SCC-4193 - Optimize state in bib page

CHANGELOG

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Prerelease
+
+### Updated
+
+- Bib page state optimizations (SCC-4193)
+
 ## [1.3.2] 2024-10-7
 
 ### Fixed
@@ -35,8 +41,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Updated
 
-- Bump DS version to 3.4.0
 - Bump nvmrc version to Node 20.
+- Bump DS package to 3.4.0.
 - Update error message in Item Filter Year to include new error message prefix from the DS.
 - Integrate view_all query param on client side and remove batched fetch (SCC-4287)
 - Replaced travis with github actions (SCC-4218)

pages/bib/[id]/index.tsx

@@ -66,14 +66,24 @@ export default function BibPage({
   const { push, query } = useRouter()
   const metadataTitle = `Item Details | ${SITE_NAME}`
 
-  const [bib, setBib] = useState(new Bib(discoveryBibResult))
-  const [itemsLoading, setItemsLoading] = useState(false)
-  const [itemFetchError, setItemFetchError] = useState(false)
+  // We do not need to preserve the whole bib in state since the bib details are constant
+  // and do not need to be updated in memory every time the item table data is refetched
+  const bib = new Bib(discoveryBibResult)
 
-  const [viewAllExpanded, setViewAllExpanded] = useState(viewAllItems)
+  // Item table data / filters state
+  const [itemTableData, setItemTableTata] = useState(bib.itemTableData)
   const [appliedFilters, setAppliedFilters] = useState(
     parseItemFilterQueryParams(query)
   )
+  const filtersAreApplied = areFiltersApplied(appliedFilters)
+  const [numItems, setNumItems] = useState(bib.numItems(filtersAreApplied))
+
+  // Item table status state
+  const [itemsLoading, setItemsLoading] = useState(false)
+  const [itemFetchError, setItemFetchError] = useState(false)
+
+  // Pagination state
+  const [viewAllExpanded, setViewAllExpanded] = useState(viewAllItems)
   const [itemTablePage, setItemTablePage] = useState(itemPage)
 
   const itemTableHeadingRef = useRef<HTMLDivElement>(null)
@@ -87,8 +97,6 @@ export default function BibPage({
 
   const displayLegacyCatalogLink = isNyplBibID(bib.id)
 
-  const filtersAreApplied = areFiltersApplied(appliedFilters)
-
   const refreshItemTable = async (
     newQuery: BibQueryParams,
     viewAllItems = false,
@@ -140,7 +148,11 @@ export default function BibPage({
       )
       if (response?.ok) {
         const { discoveryBibResult } = await response.json()
-        setBib(new Bib(discoveryBibResult))
+        const refreshedBib = new Bib(discoveryBibResult)
+
+        // Set values that need to be updated in state for the refreshed Bib
+        setNumItems(refreshedBib.numItems(filtersAreApplied))
+        setItemTableTata(refreshedBib.itemTableData)
 
         setItemsLoading(false)
 
@@ -268,17 +280,17 @@ export default function BibPage({
                   >
                     {buildItemTableDisplayingString(
                       itemTablePage,
-                      bib.numItems(filtersAreApplied),
+                      numItems,
                       viewAllExpanded,
                       filtersAreApplied
                     )}
                   </Heading>
-                  {bib.itemTableData ? (
-                    <ItemTable itemTableData={bib.itemTableData} />
+                  {itemTableData.hasItems ? (
+                    <ItemTable itemTableData={itemTableData} />
                   ) : null}
                 </>
               )}
-              {bib.itemTableData ? (
+              {itemTableData.hasItems ? (
                 <ItemTableControls
                   bib={bib}
                   viewAllExpanded={viewAllExpanded}
@@ -287,7 +299,7 @@ export default function BibPage({
                   handlePageChange={handlePageChange}
                   handleViewAllClick={handleViewAllClick}
                   viewAllLoadingTextRef={viewAllLoadingTextRef}
-                  numItemsTotal={bib.numItems(filtersAreApplied)}
+                  numItemsTotal={numItems}
                   filtersAreApplied={filtersAreApplied}
                 />
               ) : null}

src/components/ItemTable/ItemTableControls.tsx

@@ -38,8 +38,9 @@ const ItemTableControls = ({
   numItemsTotal = 0,
   filtersAreApplied = false,
 }: ItemTableControlsProps) => {
-  const viewAllLoadingMessage =
-    bib.getItemsViewAllLoadingMessage(filtersAreApplied)
+  const viewAllLoadingMessage = `Loading all ${
+    filtersAreApplied ? "matching" : numItemsTotal
+  } items. This may take a few moments...`
 
   return (
     <Box display={{ md: "flex" }} my="xl" justifyContent="space-between">

src/models/Bib.ts

@@ -107,13 +107,6 @@ export default class Bib {
     }${this.resourceType.toLowerCase()}${totalItems !== 1 ? "s" : ""}`
   }
 
-  getItemsViewAllLoadingMessage(filtersAreApplied = false) {
-    // We don't want to show the number of filtered items since this may change during loading.
-    return `Loading all ${
-      filtersAreApplied ? "matching" : this.numPhysicalItems
-    } items. This may take a few moments...`
-  }
-
   getTitleDisplayFromResult(result: DiscoveryBibResult) {
     if (!result.titleDisplay || !result.titleDisplay.length) {
       const author =

src/models/ItemTableData.ts

@@ -58,6 +58,10 @@ export default class ItemTableData {
     })
   }
 
+  hasItems(): boolean {
+    return this.items?.length > 0
+  }
+
   showVolumeColumn(): boolean {
     return this.items?.some((item) => item.volume) && !this.inSearchResult
   }