diff --git a/CHANGELOG b/CHANGELOG index 890760296..869478f73 100644 --- a/CHANGELOG +++ b/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) diff --git a/pages/bib/[id]/index.tsx b/pages/bib/[id]/index.tsx index 26074b8ec..822679387 100644 --- a/pages/bib/[id]/index.tsx +++ b/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(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 )} - {bib.itemTableData ? ( - + {itemTableData.hasItems ? ( + ) : null} )} - {bib.itemTableData ? ( + {itemTableData.hasItems ? ( ) : null} diff --git a/src/components/ItemTable/ItemTableControls.tsx b/src/components/ItemTable/ItemTableControls.tsx index 7d866bbff..e81c7d5e9 100644 --- a/src/components/ItemTable/ItemTableControls.tsx +++ b/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 ( diff --git a/src/models/Bib.ts b/src/models/Bib.ts index 82bae98d8..3d96b2ed0 100644 --- a/src/models/Bib.ts +++ b/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 = diff --git a/src/models/ItemTableData.ts b/src/models/ItemTableData.ts index 2c6f5cc71..cfd1036e8 100644 --- a/src/models/ItemTableData.ts +++ b/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 }