From 430243c650fbe7a950d5e861668f8ce90e70c62f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Kuklis?= Date: Thu, 12 Aug 2021 10:55:57 -0400 Subject: [PATCH] UIIN-1560: Improve performance on instance view (#1434) * UIIN-1560: Improve performance on instance view --- src/Instance/HoldingsList/Holding/Holding.js | 16 ++--- .../HoldingsList/Holding/HoldingAccordion.js | 49 +++++++-------- .../Holding/HoldingAccordion.test.js | 10 +-- .../Holding/HoldingButtonsGroup.js | 3 +- src/Instance/ItemsList/ItemsListContainer.js | 13 +++- src/ViewInstance.js | 63 +++++++------------ src/constants.js | 2 + src/hooks/useHoldingItemsQuery.js | 25 ++++++++ translations/ui-inventory/en.json | 2 +- translations/ui-inventory/en_GB.json | 4 +- translations/ui-inventory/en_SE.json | 4 +- translations/ui-inventory/en_US.json | 4 +- 12 files changed, 100 insertions(+), 95 deletions(-) create mode 100644 src/hooks/useHoldingItemsQuery.js diff --git a/src/Instance/HoldingsList/Holding/Holding.js b/src/Instance/HoldingsList/Holding/Holding.js index d97143e21..39683af76 100644 --- a/src/Instance/HoldingsList/Holding/Holding.js +++ b/src/Instance/HoldingsList/Holding/Holding.js @@ -51,17 +51,11 @@ const Holding = ({ onViewHolding={onViewHolding} onAddItem={onAddItem} > - { - ({ items, handleAccordionToggle }) => ( - - ) - } + diff --git a/src/Instance/HoldingsList/Holding/HoldingAccordion.js b/src/Instance/HoldingsList/Holding/HoldingAccordion.js index 95e1ea6d2..ade240f05 100644 --- a/src/Instance/HoldingsList/Holding/HoldingAccordion.js +++ b/src/Instance/HoldingsList/Holding/HoldingAccordion.js @@ -1,5 +1,4 @@ import React, { - useEffect, useState, useContext, } from 'react'; @@ -25,21 +24,23 @@ const HoldingAccordion = ({ onViewHolding, onAddItem, withMoveDropdown, - mutator: { - instanceHoldingItems: { - reset, - GET, - }, + resources: { + instanceHoldingItems, }, }) => { - const [items, setItems] = useState(); - const [isLoading, setIsLoading] = useState(true); const { locationsById } = useContext(DataContext); const labelLocation = holding.permanentLocationId ? locationsById[holding.permanentLocationId].name : ''; const [open, setOpen] = useState(false); - const handleAccordionToggle = () => setOpen(!open); - const itemCount = items?.length ?? 0; + const [openFirstTime, setOpenFirstTime] = useState(false); + const handleAccordionToggle = () => { + if (!open && !openFirstTime) { + setOpenFirstTime(true); + } + + setOpen(!open); + }; + const itemCount = instanceHoldingItems?.other?.totalRecords; const holdingButtonsGroup = ; - useEffect(() => { - setIsLoading(true); - reset(); - GET() - .then(setItems) - .finally(() => setIsLoading(false)); - }, []); - - if (isLoading) return null; - return ( - - - {children({ items })} - - + { + (open || openFirstTime) && + + + {children} + + + } ); }; @@ -106,16 +100,15 @@ HoldingAccordion.manifest = Object.freeze({ path: 'inventory/items', params: { query: 'holdingsRecordId==!{holding.id}', - limit: '5000', + limit: '1', }, - accumulate: true, resourceShouldRefresh: true, abortOnUnmount: true, }, }); HoldingAccordion.propTypes = { - mutator: PropTypes.object.isRequired, + resources: PropTypes.object.isRequired, holding: PropTypes.object.isRequired, onViewHolding: PropTypes.func.isRequired, onAddItem: PropTypes.func.isRequired, diff --git a/src/Instance/HoldingsList/Holding/HoldingAccordion.test.js b/src/Instance/HoldingsList/Holding/HoldingAccordion.test.js index be856652d..5d5c5bdd0 100644 --- a/src/Instance/HoldingsList/Holding/HoldingAccordion.test.js +++ b/src/Instance/HoldingsList/Holding/HoldingAccordion.test.js @@ -36,11 +36,13 @@ const HoldingAccordionSetup = ({ onViewHolding={noop} onAddItem={noop} withMoveDropdown={false} - mutator={{ + resources={{ instanceHoldingItems: { - GET: () => new Promise(resolve => resolve(items)), - reset: noop, - }, + records: items, + other: { + totalRecords: 3, + } + } }} > {() => null} diff --git a/src/Instance/HoldingsList/Holding/HoldingButtonsGroup.js b/src/Instance/HoldingsList/Holding/HoldingButtonsGroup.js index 3a7a2494e..c918a7d04 100644 --- a/src/Instance/HoldingsList/Holding/HoldingButtonsGroup.js +++ b/src/Instance/HoldingsList/Holding/HoldingButtonsGroup.js @@ -6,6 +6,7 @@ import { IfPermission } from '@folio/stripes/core'; import { Button, Badge, + Icon, } from '@folio/stripes/components'; import { MoveToDropdown } from './MoveToDropdown'; @@ -48,7 +49,7 @@ const HoldingButtonsGroup = ({ - {!isOpen && {itemCount}} + {!isOpen && {itemCount !== undefined ? itemCount : }} ); diff --git a/src/Instance/ItemsList/ItemsListContainer.js b/src/Instance/ItemsList/ItemsListContainer.js index c74e55701..01bba46ae 100644 --- a/src/Instance/ItemsList/ItemsListContainer.js +++ b/src/Instance/ItemsList/ItemsListContainer.js @@ -1,12 +1,17 @@ import React, { useContext, memo } from 'react'; import PropTypes from 'prop-types'; +import { + Loading, +} from '@folio/stripes/components'; + import DnDContext from '../DnDContext'; import ItemsList from './ItemsList'; +import useHoldingItemsQuery from '../../hooks/useHoldingItemsQuery'; + const ItemsListContainer = ({ holding, - items, draggable, droppable, }) => { @@ -17,6 +22,11 @@ const ItemsListContainer = ({ activeDropZone, isItemsDroppable, } = useContext(DnDContext); + const { isLoading, items } = useHoldingItemsQuery(holding.id); + + if (isLoading) { + return ; + } return ( { - this.setState({ items }); - return batchFetchRequests(mutator.allInstanceRequests, items); - }, - () => this.setState({ items: [] }), - ) - .then( - (requests) => this.setState({ requests }), - () => this.setState({ requests: [] }), - ); - } } componentWillUnmount() { @@ -357,7 +337,7 @@ class ViewInstance extends React.Component { onCopy, stripes } = this.props; - const { items, marcRecord, requests } = this.state; + const { marcRecord, requests } = this.state; const isSourceMARC = get(instance, ['source'], '') === 'MARC'; const canEditInstance = stripes.hasPerm('ui-inventory.instance.edit'); const canCreateInstance = stripes.hasPerm('ui-inventory.instance.create'); @@ -488,23 +468,22 @@ class ViewInstance extends React.Component { ) } - {!items?.length ? null : ( - - )} + + diff --git a/src/constants.js b/src/constants.js index a83bd2db1..0681b7b09 100644 --- a/src/constants.js +++ b/src/constants.js @@ -151,3 +151,5 @@ export const layers = { export const INSTANCES_ID_REPORT_TIMEOUT = 2000; export const QUICK_EXPORT_LIMIT = process.env.NODE_ENV !== 'test' ? 100 : 2; + +export const LIMIT_MAX = 5000; diff --git a/src/hooks/useHoldingItemsQuery.js b/src/hooks/useHoldingItemsQuery.js new file mode 100644 index 000000000..a6e2f59fe --- /dev/null +++ b/src/hooks/useHoldingItemsQuery.js @@ -0,0 +1,25 @@ +import { useQuery } from 'react-query'; + +import { useOkapiKy, useNamespace } from '@folio/stripes/core'; + +import { LIMIT_MAX } from '../constants'; + +const useHoldingItemsQuery = (holdingsRecordId, options = {}) => { + const ky = useOkapiKy(); + const [namespace] = useNamespace(); + const queryKey = [namespace, 'items', holdingsRecordId]; + const searchParams = { + limit: LIMIT_MAX, + query: `holdingsRecordId==${holdingsRecordId}`, + }; + + const queryFn = () => ky.get('inventory/items', { searchParams }).json(); + const { data, isLoading } = useQuery({ queryKey, queryFn, ...options }); + + return { + isLoading, + items: data?.items, + }; +}; + +export default useHoldingItemsQuery; diff --git a/translations/ui-inventory/en.json b/translations/ui-inventory/en.json index d2de43abf..7165451c9 100644 --- a/translations/ui-inventory/en.json +++ b/translations/ui-inventory/en.json @@ -47,7 +47,7 @@ "newInstance": "New instance", "editInstance": "Edit", "moveItems": "Move holdings/items to another instance", - "viewRequests": "View requests ({count})", + "viewRequests": "View requests", "instanceDetails": "Instance details", "addHoldings": "Add holdings", "itemDotStatus": "Item • {barcode} • {status}", diff --git a/translations/ui-inventory/en_GB.json b/translations/ui-inventory/en_GB.json index 92671d1c5..6b1596915 100644 --- a/translations/ui-inventory/en_GB.json +++ b/translations/ui-inventory/en_GB.json @@ -570,7 +570,7 @@ "selectHoldingsSource": "Select holdings source", "holdingsSourceLabel": "Source", "uniqueName": "Name must be unique", - "viewRequests": "View requests ({count})", + "viewRequests": "View requests", "instanceRecordRequestsTitle": "Requests on items - {instanceResourceTitle}, {instancePublicationDate}", "instanceRecordRequestsSubtitle": "{count} items found", "item.requestQueue": "Request queue", @@ -679,4 +679,4 @@ "acq.orderType": "Order type", "acq.orderType.One-Time": "One-time", "acq.orderType.Ongoing": "Ongoing" -} \ No newline at end of file +} diff --git a/translations/ui-inventory/en_SE.json b/translations/ui-inventory/en_SE.json index 92671d1c5..6b1596915 100644 --- a/translations/ui-inventory/en_SE.json +++ b/translations/ui-inventory/en_SE.json @@ -570,7 +570,7 @@ "selectHoldingsSource": "Select holdings source", "holdingsSourceLabel": "Source", "uniqueName": "Name must be unique", - "viewRequests": "View requests ({count})", + "viewRequests": "View requests", "instanceRecordRequestsTitle": "Requests on items - {instanceResourceTitle}, {instancePublicationDate}", "instanceRecordRequestsSubtitle": "{count} items found", "item.requestQueue": "Request queue", @@ -679,4 +679,4 @@ "acq.orderType": "Order type", "acq.orderType.One-Time": "One-time", "acq.orderType.Ongoing": "Ongoing" -} \ No newline at end of file +} diff --git a/translations/ui-inventory/en_US.json b/translations/ui-inventory/en_US.json index 33a39bb97..d1db1b713 100644 --- a/translations/ui-inventory/en_US.json +++ b/translations/ui-inventory/en_US.json @@ -570,7 +570,7 @@ "selectHoldingsSource": "Select holdings source", "holdingsSourceLabel": "Source", "uniqueName": "Name must be unique", - "viewRequests": "View requests ({count})", + "viewRequests": "View requests", "instanceRecordRequestsTitle": "Requests on items - {instanceResourceTitle}, {instancePublicationDate}", "instanceRecordRequestsSubtitle": "{count} items found", "item.requestQueue": "Request queue", @@ -679,4 +679,4 @@ "acq.orderType": "Order type", "acq.orderType.One-Time": "One-time", "acq.orderType.Ongoing": "Ongoing" -} \ No newline at end of file +}