add fix

folio-org · Oct 27, 2024 · 71451c3 · 71451c3
1 parent ecbc593
commit 71451c3
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 33 deletions.
diff --git a/...ponents/BulkEditPane/BulkEditListResult/BulkEditInAppPreviewModal/BulkEditPreviewModal.js b/...ponents/BulkEditPane/BulkEditListResult/BulkEditInAppPreviewModal/BulkEditPreviewModal.js
@@ -1,10 +1,10 @@
 import React from 'react';
-import { FormattedMessage, useIntl } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
 import { Modal } from '@folio/stripes/components';
-import { buildSearch, useShowCallout } from '@folio/stripes-acq-components';
+import { buildSearch } from '@folio/stripes-acq-components';
 
 import {
   APPROACHES,
@@ -16,6 +16,7 @@ import { useBulkOperationStart } from '../../../../hooks/api';
 import { BulkEditPreviewModalFooter } from './BulkEditPreviewModalFooter';
 import { useSearchParams } from '../../../../hooks';
 import { BulkEditPreviewModalList } from './BulkEditPreviewModalList';
+import { useErrorMessages } from '../../../../hooks/useErrorMessages';
 
 
 export const BulkEditPreviewModal = ({
@@ -26,11 +27,9 @@ export const BulkEditPreviewModal = ({
   onDownload,
   onChangesCommited,
 }) => {
-  const callout = useShowCallout();
-  const intl = useIntl();
   const history = useHistory();
   const { criteria, approach } = useSearchParams();
-
+  const { showErrorMessage } = useErrorMessages();
   const { bulkOperationStart } = useBulkOperationStart();
 
   const hasLinkForDownload = bulkDetails?.[FILE_KEYS.PROPOSED_CHANGES_LINK_MARC] || bulkDetails?.[FILE_KEYS.PROPOSED_CHANGES_LINK];
@@ -55,11 +54,8 @@ export const BulkEditPreviewModal = ({
           progress: criteria,
         }, history.location.search),
       });
-    } catch {
-      callout({
-        type: 'error',
-        message: intl.formatMessage({ id: 'ui-bulk-edit.error.sww' }),
-      });
+    } catch (e) {
+      showErrorMessage(e);
     }
   };
 
@@ -85,10 +81,12 @@ export const BulkEditPreviewModal = ({
       dismissible
       onClose={onKeepEditing}
     >
-      <BulkEditPreviewModalList
-        isPreviewEnabled={!isPreviewLoading}
-        onPreviewError={onKeepEditing}
-      />
+      {open && (
+        <BulkEditPreviewModalList
+          isPreviewEnabled={!isPreviewLoading}
+          onPreviewError={onKeepEditing}
+        />
+      )}
     </Modal>
   );
 };

diff --git a/...nts/BulkEditPane/BulkEditListResult/BulkEditInAppPreviewModal/BulkEditPreviewModalList.js b/...nts/BulkEditPane/BulkEditListResult/BulkEditInAppPreviewModal/BulkEditPreviewModalList.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import {
   FormattedMessage,
 } from 'react-intl';
+import { useQueryClient } from 'react-query';
 
 import {
   MessageBanner,
@@ -23,6 +24,7 @@ import {
   PAGINATION_CONFIG
 } from '../../../../constants';
 import {
+  BULK_OPERATION_DETAILS_KEY,
   PREVIEW_MODAL_KEY,
   useBulkOperationDetails,
   useRecordsPreview
@@ -37,6 +39,7 @@ export const BulkEditPreviewModalList = ({
   isPreviewEnabled,
   onPreviewError,
 }) => {
+  const queryClient = useQueryClient();
   const { id: bulkOperationId } = usePathParams('/bulk-edit/:id');
   const { visibleColumns } = useContext(RootContext);
   const { currentRecordType } = useSearchParams();
@@ -47,10 +50,14 @@ export const BulkEditPreviewModalList = ({
   } = usePagination(PAGINATION_CONFIG);
 
   const [previewLoaded, setPreviewLoaded] = useState(false);
-  const interval = previewLoaded ? 0 : 3000;
-  const { bulkDetails } = useBulkOperationDetails({ id: bulkOperationId, interval, refetchOnMount: true });
+  const interval = previewLoaded ? 0 : 1000;
+  const { bulkDetails } = useBulkOperationDetails({
+    id: bulkOperationId,
+    interval,
+  });
 
   const visibleColumnKeys = getVisibleColumnsKeys(visibleColumns);
+  const enabled = isPreviewEnabled && bulkDetails?.status === JOB_STATUSES.REVIEW_CHANGES;
 
   const {
     contentData,
@@ -62,14 +69,15 @@ export const BulkEditPreviewModalList = ({
     step: EDITING_STEPS.EDIT,
     capabilities: currentRecordType,
     queryOptions: {
-      enabled: bulkDetails?.status === JOB_STATUSES.REVIEW_CHANGES,
+      enabled,
       onSuccess: showErrorMessage,
       onError: (error) => {
         showErrorMessage(error);
         onPreviewError();
       },
       onSettled: () => {
         setPreviewLoaded(true);
+        queryClient.invalidateQueries(BULK_OPERATION_DETAILS_KEY);
       }
     },
     ...pagination,

diff --git a/src/components/shared/ProgressBar/ProgressBar.js b/src/components/shared/ProgressBar/ProgressBar.js
@@ -49,7 +49,6 @@ export const ProgressBar = () => {
     bulkDetails,
     id,
     clearIntervalAndRedirect,
-    showErrorMessage,
   ]);
 
   return (

diff --git a/src/hooks/api/useBulkOperationDetails.js b/src/hooks/api/useBulkOperationDetails.js
@@ -32,6 +32,10 @@ export const useBulkOperationDetails = ({
 
   useEffect(() => {
     setRefetchInterval(interval);
+
+    return () => {
+      clearInterval();
+    };
   }, [interval]);
 
   const { data, isLoading } = useQuery({

diff --git a/src/hooks/api/useBulkOperationUsers.test.js b/src/hooks/api/useBulkOperationUsers.test.js
@@ -18,7 +18,7 @@ jest.mock('@folio/stripes/core', () => ({
 }));
 
 jest.mock('../../hooks/useSearchParams', () => ({
-  useSearchParams: jest.fn(),
+  useSearchParams: jest.fn().mockReturnValue({ initialFileName: 'initialFileName' }),
 }));
 
 const queryClient = new QueryClient();

diff --git a/src/hooks/api/useRecordsPreview.js b/src/hooks/api/useRecordsPreview.js
@@ -33,6 +33,7 @@ export const useRecordsPreview = ({
     {
       queryKey: [key, namespaceKey, id, step, limit, offset],
       cacheTime: 0,
+      staleTime: 0,
       keepPreviousData: true,
       queryFn: () => {
         return ky.get(`bulk-operations/${id}/preview`, { searchParams: { limit, offset, step } }).json();

diff --git a/src/hooks/useConfirmChanges.js b/src/hooks/useConfirmChanges.js
@@ -1,8 +1,6 @@
 import { useState } from 'react';
 import { useQueryClient } from 'react-query';
 
-import { useNamespace } from '@folio/stripes/core';
-
 import {
   PREVIEW_MODAL_KEY,
   BULK_OPERATION_DETAILS_KEY,
@@ -29,7 +27,6 @@ export const useConfirmChanges = ({
   const queryClient = useQueryClient();
   const searchParams = useSearchParams();
   const { showErrorMessage } = useErrorMessages();
-  const [namespaceKey] = useNamespace({ key: BULK_OPERATION_DETAILS_KEY });
 
   const [isPreviewModalOpened, setIsPreviewModalOpened] = useState(false);
   const [isPreviewLoading, setIsPreviewLoading] = useState(false);
@@ -48,16 +45,14 @@ export const useConfirmChanges = ({
   };
 
   const confirmChanges = (payload) => {
-    // as backend reset a status to 'DATA_MODIFICATION' only after the job started
-    // we need to set it manually to show the preview modal without a delay
-    queryClient.setQueryData(
-      [BULK_OPERATION_DETAILS_KEY, namespaceKey, bulkOperationId],
-      (preBulkOperation) => ({ ...preBulkOperation, status: JOB_STATUSES.DATA_MODIFICATION })
-    );
-
-    setIsPreviewModalOpened(true);
     setIsPreviewLoading(true);
 
+    queryClient.removeQueries(PREVIEW_MODAL_KEY);
+    queryClient.setQueriesData(
+      BULK_OPERATION_DETAILS_KEY,
+      (preBulkOperation) => ({ ...preBulkOperation, status: JOB_STATUSES.DATA_MODIFICATION }),
+    );
+
     updateFn(payload)
       .then(() => bulkOperationStart({
         id: bulkOperationId,
@@ -66,12 +61,10 @@ export const useConfirmChanges = ({
       }))
       .then((response) => {
         showErrorMessage(response);
-
-        queryClient.invalidateQueries(PREVIEW_MODAL_KEY);
+        openPreviewModal();
       })
       .catch((error) => {
         showErrorMessage(error);
-
         closePreviewModal();
       })
       .finally(() => {