From 2224992c29926fdd277d033b779ce924449611f4 Mon Sep 17 00:00:00 2001 From: Diego Cohen Date: Fri, 6 Sep 2024 08:45:54 -0400 Subject: [PATCH 1/8] Initialize bib state refactor --- pages/bib/[id]/index.tsx | 16 +++++++++++----- src/components/ItemTable/ItemTableControls.tsx | 5 +++-- src/models/Bib.ts | 16 ---------------- src/models/ItemTableData.ts | 4 ++++ 4 files changed, 18 insertions(+), 23 deletions(-) diff --git a/pages/bib/[id]/index.tsx b/pages/bib/[id]/index.tsx index c55392799..bf5e36a6c 100644 --- a/pages/bib/[id]/index.tsx +++ b/pages/bib/[id]/index.tsx @@ -1,6 +1,6 @@ import Head from "next/head" import type { SyntheticEvent } from "react" -import { useState, useRef, useEffect } from "react" +import { useState, useRef } from "react" import { useRouter } from "next/router" import { Heading, @@ -44,6 +44,7 @@ import { parseItemFilterQueryParams, areFiltersApplied, } from "../../../src/utils/itemFilterUtils" +import ItemTableData from "../../../src/models/ItemTableData" interface BibPropsType { discoveryBibResult: DiscoveryBibResult @@ -66,7 +67,12 @@ 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( + new ItemTableData(bib.items, { + isArchiveCollection: bib.isArchiveCollection, + }) + ) const [itemsLoading, setItemsLoading] = useState(false) const [itemFetchError, setItemFetchError] = useState(false) const [viewAllExpanded, setViewAllExpanded] = useState(viewAllItems) @@ -263,12 +269,12 @@ export default function BibPage({ filtersAreApplied )} - {bib.itemTableData ? ( - + {itemTableData.hasItems ? ( + ) : null} )} - {bib.itemTableData ? ( + {itemTableData.hasItems ? ( { - 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 accc0f398..5d10d25cb 100644 --- a/src/models/Bib.ts +++ b/src/models/Bib.ts @@ -67,15 +67,6 @@ export default class Bib { return !this.isOnlyElectronicResources && this.hasPhysicalItems } - get itemTableData() { - return ( - this.items?.length && - new ItemTableData(this.items, { - isArchiveCollection: this.isArchiveCollection, - }) - ) - } - get showViewAllItemsLink() { return this.numItemsMatched > ITEM_PAGINATION_BATCH_SIZE } @@ -99,13 +90,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...` - } - getTitleFromResult(result: DiscoveryBibResult) { if (!result.titleDisplay || !result.titleDisplay.length) { const author = diff --git a/src/models/ItemTableData.ts b/src/models/ItemTableData.ts index c6b17ebda..3b869081f 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 } From 7fd3e444cf087de70432204efc11e75bcac72707 Mon Sep 17 00:00:00 2001 From: Diego Cohen Date: Tue, 1 Oct 2024 15:22:55 -0400 Subject: [PATCH 2/8] Set numItems in state --- pages/bib/[id]/index.tsx | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/pages/bib/[id]/index.tsx b/pages/bib/[id]/index.tsx index e5e5b7d05..e54fecbfe 100644 --- a/pages/bib/[id]/index.tsx +++ b/pages/bib/[id]/index.tsx @@ -80,7 +80,10 @@ export default function BibPage({ 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(null) const viewAllLoadingTextRef = useRef(null) @@ -93,8 +96,6 @@ export default function BibPage({ const displayLegacyCatalogLink = isNyplBibID(bib.id) - const filtersAreApplied = areFiltersApplied(appliedFilters) - const refreshItemTable = async ( newQuery: BibQueryParams, viewAllItems = false, @@ -146,7 +147,15 @@ export default function BibPage({ ) if (response?.ok) { const { discoveryBibResult } = await response.json() - setBib(new Bib(discoveryBibResult)) + const refreshedBib = new Bib(discoveryBibResult) + + setNumItems(refreshedBib.numItems(filtersAreApplied)) + + setItemTableTata( + new ItemTableData(refreshedBib.items, { + isArchiveCollection: refreshedBib.isArchiveCollection, + }) + ) setItemsLoading(false) @@ -274,7 +283,7 @@ export default function BibPage({ > {buildItemTableDisplayingString( itemTablePage, - bib.numItems(filtersAreApplied), + numItems, viewAllExpanded, filtersAreApplied )} @@ -293,7 +302,7 @@ export default function BibPage({ handlePageChange={handlePageChange} handleViewAllClick={handleViewAllClick} viewAllLoadingTextRef={viewAllLoadingTextRef} - numItemsTotal={bib.numItems(filtersAreApplied)} + numItemsTotal={numItems} filtersAreApplied={filtersAreApplied} /> ) : null} From 21acd127092adad9f008695a0967e3aec6b8f796 Mon Sep 17 00:00:00 2001 From: Diego Cohen Date: Wed, 2 Oct 2024 10:22:30 -0400 Subject: [PATCH 3/8] Update changelog --- CHANGELOG | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG b/CHANGELOG index 079be43e1..77e6829cd 100644 --- a/CHANGELOG +++ b/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) From 4753bb2048a122daa9f72851fced8345ce760a24 Mon Sep 17 00:00:00 2001 From: Diego Cohen Date: Wed, 2 Oct 2024 11:00:19 -0400 Subject: [PATCH 4/8] Use itemTableData helper --- pages/bib/[id]/index.tsx | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/pages/bib/[id]/index.tsx b/pages/bib/[id]/index.tsx index e54fecbfe..70d97cf33 100644 --- a/pages/bib/[id]/index.tsx +++ b/pages/bib/[id]/index.tsx @@ -68,11 +68,7 @@ export default function BibPage({ const metadataTitle = `Item Details | ${SITE_NAME}` const bib = new Bib(discoveryBibResult) - const [itemTableData, setItemTableTata] = useState( - new ItemTableData(bib.items, { - isArchiveCollection: bib.isArchiveCollection, - }) - ) + const [itemTableData, setItemTableTata] = useState(bib.itemTableData) const [itemsLoading, setItemsLoading] = useState(false) const [itemFetchError, setItemFetchError] = useState(false) @@ -149,13 +145,9 @@ export default function BibPage({ const { discoveryBibResult } = await response.json() const refreshedBib = new Bib(discoveryBibResult) + // Set values that need to be updated in state for the refreshed Bib setNumItems(refreshedBib.numItems(filtersAreApplied)) - - setItemTableTata( - new ItemTableData(refreshedBib.items, { - isArchiveCollection: refreshedBib.isArchiveCollection, - }) - ) + setItemTableTata(refreshedBib.itemTableData) setItemsLoading(false) From dfe9af8b75aab305fc312672f9cf11a48538f7c3 Mon Sep 17 00:00:00 2001 From: Diego Cohen Date: Wed, 2 Oct 2024 11:00:39 -0400 Subject: [PATCH 5/8] Remove unused import --- pages/bib/[id]/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/pages/bib/[id]/index.tsx b/pages/bib/[id]/index.tsx index 70d97cf33..a9982fd9a 100644 --- a/pages/bib/[id]/index.tsx +++ b/pages/bib/[id]/index.tsx @@ -44,7 +44,6 @@ import { parseItemFilterQueryParams, areFiltersApplied, } from "../../../src/utils/itemFilterUtils" -import ItemTableData from "../../../src/models/ItemTableData" interface BibPropsType { discoveryBibResult: DiscoveryBibResult From 6f9e4caaf05ffc8d2fedab6d4999251b94b898f5 Mon Sep 17 00:00:00 2001 From: Diego Cohen Date: Tue, 8 Oct 2024 14:13:03 -0400 Subject: [PATCH 6/8] Remove redundant getViewAllLoading message function from bib model --- src/models/Bib.ts | 7 ------- 1 file changed, 7 deletions(-) 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 = From cee412cc0db17fa17f3e9d3bcceb5ef6315006b7 Mon Sep 17 00:00:00 2001 From: Diego Cohen Date: Tue, 8 Oct 2024 14:27:55 -0400 Subject: [PATCH 7/8] Add comments to bib state --- pages/bib/[id]/index.tsx | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/pages/bib/[id]/index.tsx b/pages/bib/[id]/index.tsx index a9982fd9a..822679387 100644 --- a/pages/bib/[id]/index.tsx +++ b/pages/bib/[id]/index.tsx @@ -66,19 +66,25 @@ export default function BibPage({ const { push, query } = useRouter() const metadataTitle = `Item Details | ${SITE_NAME}` + // 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 [itemTableData, setItemTableTata] = useState(bib.itemTableData) - const [itemsLoading, setItemsLoading] = useState(false) - const [itemFetchError, setItemFetchError] = useState(false) - 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 [numItems, setNumItems] = useState(bib.numItems(filtersAreApplied)) const itemTableHeadingRef = useRef(null) const viewAllLoadingTextRef = useRef(null) From 7ada25f443a27efc67068842a996a69cbe5934ee Mon Sep 17 00:00:00 2001 From: Diego Cohen Date: Tue, 8 Oct 2024 15:11:22 -0400 Subject: [PATCH 8/8] Fix changelog --- CHANGELOG | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG b/CHANGELOG index e22659176..869478f73 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -41,7 +41,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Updated -- Bump nvmrc version to Node 20 and DS package to release candidate 3.4.0-rc. +- 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)