SCC-4193 - Optimize state in bib page

CHANGELOG

@@ -22,6 +22,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Updated
 
+- Bib page state optimizations (SCC-4193)
 - Bump nvmrc version to Node 20 and DS package to release candidate 3.4.0-rc.
 - 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)

pages/bib/[id]/index.tsx

@@ -66,15 +66,19 @@ export default function BibPage({
   const { push, query } = useRouter()
   const metadataTitle = `Item Details | ${SITE_NAME}`
 
-  const [bib, setBib] = useState(new Bib(discoveryBibResult))
+  const bib = new Bib(discoveryBibResult)
+  const [itemTableData, setItemTableTata] = useState(bib.itemTableData)
   const [itemsLoading, setItemsLoading] = useState(false)
   const [itemFetchError, setItemFetchError] = useState(false)
 
   const [viewAllExpanded, setViewAllExpanded] = useState(viewAllItems)
   const [appliedFilters, setAppliedFilters] = useState(
     parseItemFilterQueryParams(query)
   )
+  const filtersAreApplied = areFiltersApplied(appliedFilters)
+
   const [itemTablePage, setItemTablePage] = useState(itemPage)
+  const [numItems, setNumItems] = useState(bib.numItems(filtersAreApplied))
 
   const itemTableHeadingRef = useRef<HTMLDivElement>(null)
   const viewAllLoadingTextRef = useRef<HTMLDivElement & HTMLLabelElement>(null)
@@ -87,8 +91,6 @@ export default function BibPage({
 
   const displayLegacyCatalogLink = isNyplBibID(bib.id)
 
-  const filtersAreApplied = areFiltersApplied(appliedFilters)
-
   const refreshItemTable = async (
     newQuery: BibQueryParams,
     viewAllItems = false,
@@ -140,7 +142,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 +274,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 +293,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/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
   }