UIREC-393: fix invalid reference issue for Unreceive pieces full scre…

…en page

src/Piece/PieceForm/PieceFormContainer.js

@@ -68,7 +68,7 @@ export const PieceFormContainer = ({
 
   const {
     targetTenantId: tenantId,
-    isCentralOrderingEnabled,
+    crossTenant,
     isCentralRouting,
   } = useReceivingSearchContext();
 
@@ -77,7 +77,7 @@ export const PieceFormContainer = ({
   const {
     isLoading: isLocationsLoading,
     locations,
-  } = useLocationsQuery({ consortium: isCentralOrderingEnabled });
+  } = useLocationsQuery({ consortium: crossTenant });
 
   const {
     isLoading: isTitleLoading,

src/TitleReceive/TitleReceiveContainer.js

@@ -37,7 +37,6 @@ function TitleReceiveContainer({ history, location, match }) {
   const showCallout = useShowCallout();
   const {
     crossTenant,
-    isCentralOrderingEnabled,
     isCentralRouting,
     targetTenantId,
   } = useReceivingSearchContext();
@@ -48,6 +47,7 @@ function TitleReceiveContainer({ history, location, match }) {
     pieces = [],
     title,
     orderLine: poLine,
+    locations,
     isLoading: isPiecesLoading,
   } = useTitleHydratedPieces({
     titleId,
@@ -59,11 +59,6 @@ function TitleReceiveContainer({ history, location, match }) {
 
   const { receive } = useReceive();
 
-  const {
-    isLoading: isLocationsLoading,
-    locations,
-  } = useLocationsQuery({ consortium: isCentralOrderingEnabled });
-
   const onCancel = useCallback(
     () => {
       history.push({
@@ -122,9 +117,7 @@ function TitleReceiveContainer({ history, location, match }) {
     [poLine],
   );
 
-  const isLoading = isPiecesLoading || isLocationsLoading;
-
-  if (isLoading) {
+  if (isPiecesLoading) {
     return (
       <Paneset>
         <LoadingPane />

src/TitleReceive/TitleReceiveContainer.test.js

@@ -5,7 +5,6 @@ import {
   render,
   screen,
 } from '@folio/jest-config-stripes/testing-library/react';
-import { useLocationsQuery } from '@folio/stripes-acq-components';
 
 import {
   useReceive,
@@ -17,7 +16,6 @@ import TitleReceive from './TitleReceive';
 jest.mock('@folio/stripes-acq-components', () => ({
   ...jest.requireActual('@folio/stripes-acq-components'),
   useCentralOrderingContext: jest.fn(() => ({ isCentralOrderingEnabled: false })),
-  useLocationsQuery: jest.fn(),
 }));
 jest.mock('@folio/stripes/core', () => ({
   ...jest.requireActual('@folio/stripes/core'),
@@ -28,7 +26,6 @@ jest.mock('@folio/stripes/components', () => ({
   LoadingPane: jest.fn().mockReturnValue('LoadingPane'),
 }));
 jest.mock('../common/hooks', () => ({
-  useHoldingsAndLocations: jest.fn().mockReturnValue({ locations: [] }),
   useReceive: jest.fn().mockReturnValue({}),
   useTitleHydratedPieces: jest.fn(),
   useReceivingTenantIdsAndLocations: jest.fn().mockReturnValue({}),
@@ -66,14 +63,12 @@ describe('TitleReceiveContainer', () => {
   beforeEach(() => {
     TitleReceive.mockClear();
     historyMock.push.mockClear();
-    useLocationsQuery
-      .mockClear()
-      .mockReturnValue({ locations: [{ id: 'locationId' }] });
     useTitleHydratedPieces.mockClear().mockReturnValue({
       title: mockTitle,
       pieces: mockPieces,
       orderLine: mockPoLine,
       isLoading: false,
+      locations: [{ id: 'locationId' }],
     });
   });
 
@@ -82,6 +77,7 @@ describe('TitleReceiveContainer', () => {
       title: {},
       pieces: [],
       orderLine: {},
+      locations: [],
       isLoading: true,
     });
     renderTitleReceiveContainer();

src/TitleUnreceive/TitleUnreceiveContainer.js

@@ -1,8 +1,6 @@
 import PropTypes from 'prop-types';
 import {
   useCallback,
-  useEffect,
-  useState,
 } from 'react';
 import ReactRouterPropTypes from 'react-router-prop-types';
 
@@ -14,36 +12,22 @@ import {
   Paneset,
 } from '@folio/stripes/components';
 import {
-  baseManifest,
-  batchFetch,
-  LIMIT_MAX,
-  LINES_API,
-  locationsManifest,
   PIECE_STATUS,
-  piecesResource,
   useShowCallout,
 } from '@folio/stripes-acq-components';
 
+import { receivingResource } from '../common/resources';
 import {
-  receivingResource,
-  titleResource,
-  holdingsResource,
-} from '../common/resources';
-import {
-  getHydratedPieces,
   handleUnrecieveErrorResponse,
   unreceivePieces,
 } from '../common/utils';
 import {
   CENTRAL_RECEIVING_ROUTE,
   RECEIVING_ROUTE,
 } from '../constants';
-import {
-  usePieceItemsFetch,
-  usePieceRequestsFetch,
-} from '../common/hooks/usePaginatedPieces/hooks';
 import { useReceivingSearchContext } from '../contexts';
 import TitleUnreceive from './TitleUnreceive';
+import { useTitleHydratedPieces } from '../common/hooks';
 
 function TitleUnreceiveContainer({
   history,
@@ -53,97 +37,24 @@ function TitleUnreceiveContainer({
 }) {
   const showCallout = useShowCallout();
   const titleId = match.params.id;
-  const [pieces, setPieces] = useState();
-  const [title, setTitle] = useState();
-  const [poLine, setPoLine] = useState();
-  const [pieceLocationMap, setPieceLocationMap] = useState();
-  const [pieceHoldingMap, setPieceHoldingMap] = useState();
-  const poLineId = title?.poLineId;
 
   const {
-    activeTenantId,
-    centralTenantId,
-    crossTenant,
     isCentralRouting,
     targetTenantId,
   } = useReceivingSearchContext();
-  const { fetchPieceItems } = usePieceItemsFetch({
-    instanceId: title?.instanceId,
+
+  const {
+    pieces = [],
+    title,
+    orderLine: poLine,
+    isLoading: isPiecesLoading,
+    pieceHoldingMap,
+    pieceLocationMap,
+  } = useTitleHydratedPieces({
+    titleId,
     tenantId: targetTenantId,
+    receivingStatus: PIECE_STATUS.received,
   });
-  const { fetchPieceRequests } = usePieceRequestsFetch({ tenantId: targetTenantId });
-
-  useEffect(
-    () => {
-      mutator.title.GET()
-        .then(setTitle);
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [titleId],
-  );
-
-  useEffect(
-    () => {
-      if (poLineId) {
-        mutator.poLine.GET({
-          path: `${LINES_API}/${poLineId}`,
-        }).then(setPoLine);
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [poLineId],
-  );
-
-  useEffect(
-    () => {
-      if (poLineId) {
-        const filterQuery = `titleId=${titleId} and poLineId==${poLineId} and receivingStatus==${PIECE_STATUS.received}`;
-
-        mutator.pieces.GET({
-          params: {
-            limit: `${LIMIT_MAX}`,
-            query: `${filterQuery} sortby locationId`,
-          },
-        })
-          .then(async (piecesResponse) => {
-            const hydratedPieces = await getHydratedPieces({
-              pieces: piecesResponse,
-              fetchPieceItems,
-              fetchPieceRequests,
-              activeTenantId,
-              centralTenantId,
-              crossTenant,
-            });
-
-            return hydratedPieces;
-          })
-          .then(hydratedPieces => {
-            setPieces(hydratedPieces);
-            const holdingIds = hydratedPieces.map(({ holdingId }) => holdingId).filter(Boolean);
-            const locationIds = hydratedPieces.map(({ locationId }) => locationId).filter(Boolean);
-            const holdingsPromise = holdingIds.length ? batchFetch(mutator.holdings, holdingIds) : Promise.resolve([]);
-
-            return Promise.all([holdingsPromise, locationIds]);
-          })
-          .then(([holdingsResponse, locationIds]) => {
-            setPieceHoldingMap(holdingsResponse.reduce((acc, h) => ({ ...acc, [h.id]: h }), {}));
-
-            const holdingLocations = holdingsResponse.map(({ permanentLocationId }) => permanentLocationId);
-
-            return batchFetch(mutator.locations, [...new Set([...holdingLocations, ...locationIds])]);
-          })
-          .then(locationsResponse => {
-            setPieceLocationMap(locationsResponse.reduce((acc, l) => ({ ...acc, [l.id]: l }), {}));
-          })
-          .catch(() => {
-            setPieceHoldingMap({});
-            setPieceLocationMap({});
-          });
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [titleId, poLineId],
-  );
 
   const onCancel = useCallback(
     () => {
@@ -154,6 +65,7 @@ function TitleUnreceiveContainer({
     },
     [history, isCentralRouting, titleId, location.search],
   );
+
   const onSubmit = useCallback(
     // eslint-disable-next-line no-unused-vars
     ({ receivedItems }) => {
@@ -172,7 +84,7 @@ function TitleUnreceiveContainer({
     [onCancel, showCallout],
   );
 
-  if (!(pieces && poLine && title && pieceLocationMap && pieceHoldingMap)) {
+  if (isPiecesLoading || !title || !poLine) {
     return (
       <Paneset>
         <LoadingPane />
@@ -196,31 +108,6 @@ function TitleUnreceiveContainer({
 }
 
 TitleUnreceiveContainer.manifest = Object.freeze({
-  title: {
-    ...titleResource,
-    accumulate: true,
-    fetch: false,
-    tenant: '!{tenantId}',
-  },
-  pieces: {
-    ...piecesResource,
-    tenant: '!{tenantId}',
-  },
-  poLine: {
-    ...baseManifest,
-    accumulate: true,
-    fetch: false,
-    tenant: '!{tenantId}',
-  },
-  locations: {
-    ...locationsManifest,
-    fetch: false,
-  },
-  holdings: {
-    ...holdingsResource,
-    fetch: false,
-  },
-
   unreceive: {
     ...receivingResource,
     tenant: '!{tenantId}',

src/TitleUnreceive/TitleUnreceiveContainer.test.js

@@ -2,21 +2,19 @@ import React from 'react';
 import { act, render, screen } from '@folio/jest-config-stripes/testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 
-import { getHydratedPieces } from '../common/utils';
+import { useTitleHydratedPieces } from '../common/hooks';
 import TitleUnreceiveContainer from './TitleUnreceiveContainer';
 import TitleUnreceive from './TitleUnreceive';
 
-jest.mock('../common/utils', () => ({
-  ...jest.requireActual('../common/utils'),
-  getHydratedPieces: jest.fn(),
+jest.mock('../../common/hooks', () => ({
+  useTitleHydratedPieces: jest.fn(),
 }));
 
 jest.mock('./TitleUnreceive', () => jest.fn().mockReturnValue('TitleUnreceive'));
 
 const mockTitle = { title: 'Title', id: '001', poLineId: '002' };
 const mockPoLine = { id: '002', locations: [{ locationId: '1' }] };
 const mockPieces = [{ id: '01', locationId: '1' }];
-const mockRequests = [{ id: '01', itemId: '01', locationId: '1' }];
 const locationMock = { hash: 'hash', pathname: 'pathname', search: 'search' };
 const historyMock = {
   push: jest.fn(),
@@ -29,49 +27,37 @@ const historyMock = {
   location: locationMock,
 };
 const mutatorMock = {
-  title: {
-    GET: jest.fn().mockReturnValue(Promise.resolve(mockTitle)),
-  },
-  pieces: {
-    GET: jest.fn().mockReturnValue(Promise.resolve(mockPieces)),
-  },
-  poLine: {
-    GET: jest.fn().mockReturnValue(Promise.resolve(mockPoLine)),
-  },
-  locations: {
-    GET: jest.fn().mockReturnValue(Promise.resolve([])),
-    reset: jest.fn(),
-  },
-  requests: {
-    GET: jest.fn(),
-    reset: jest.fn(),
-  },
-  items: {
-    GET: jest.fn(),
-    reset: jest.fn(),
-  },
   unreceive: {
     POST: jest.fn().mockReturnValue(Promise.resolve({ receivingResults: [] })),
   },
 };
 
-const renderTitleUnreceiveContainer = () => (render(
+const renderTitleUnreceiveContainer = () => render(
   <TitleUnreceiveContainer
     history={historyMock}
     location={locationMock}
     match={{ params: { id: '001' }, path: 'path', url: 'url' }}
     mutator={mutatorMock}
   />,
   { wrapper: MemoryRouter },
-));
+);
 
 describe('TitleUnreceiveContainer', () => {
   let mutator;
 
   beforeEach(() => {
     TitleUnreceive.mockClear();
     historyMock.push.mockClear();
-    getHydratedPieces.mockClear().mockReturnValue(Promise.resolve(mockRequests));
+    useTitleHydratedPieces.mockClear().mockReturnValue({
+      pieces: mockPieces,
+      title: mockTitle,
+      orderLine: mockPoLine,
+      isLoading: false,
+      locations: [{ id: '1', name: 'location1' }],
+      holdings: [{ id: '1', name: 'holding1' }],
+      pieceHoldingMap: { '01': '1' },
+      pieceLocationMap: { '01': '1' },
+    });
   });
 
   it('should display title unreceive', async () => {