UIBULKED-497: "Are you sure" preview displays outdated values after User changed selection on bulk edit form and clicked "Confirm changes"

src/components/BulkEditPane/BulkEditInAppLayer/BulkEditInAppLayer.js

@@ -29,6 +29,7 @@ export const BulkEditInAppLayer = ({
     downloadFile,
     confirmChanges,
     closePreviewModal,
+    setShouldRefetchStatus
   } = useConfirmChanges({
     queryDownloadKey: QUERY_KEY_DOWNLOAD_PREVIEW_MODAL,
     updateFn: contentUpdate,
@@ -81,6 +82,7 @@ export const BulkEditInAppLayer = ({
         onDownload={downloadFile}
         onKeepEditing={closePreviewModal}
         onChangesCommited={handleChangesCommited}
+        setShouldRefetchStatus={setShouldRefetchStatus}
       />
     </>
   );

src/components/BulkEditPane/BulkEditListResult/BulkEditInAppPreviewModal/BulkEditPreviewModal.js

@@ -27,6 +27,7 @@ export const BulkEditPreviewModal = ({
   onKeepEditing,
   onDownload,
   onChangesCommited,
+  setShouldRefetchStatus
 }) => {
   const callout = useShowCallout();
   const intl = useIntl();
@@ -91,6 +92,7 @@ export const BulkEditPreviewModal = ({
         bulkDetails={bulkDetails}
         isPreviewEnabled={!isPreviewLoading}
         onPreviewError={onKeepEditing}
+        setShouldRefetchStatus={setShouldRefetchStatus}
       />
     </Modal>
   );
@@ -103,4 +105,5 @@ BulkEditPreviewModal.propTypes = {
   onKeepEditing: PropTypes.func,
   onChangesCommited: PropTypes.func,
   onDownload: PropTypes.func,
+  setShouldRefetchStatus: PropTypes.func
 };

src/components/BulkEditPane/BulkEditListResult/BulkEditInAppPreviewModal/BulkEditPreviewModalList.js

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { memo, useContext, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import {
   FormattedMessage,
@@ -40,6 +40,7 @@
   bulkDetails,
   isPreviewEnabled,
   onPreviewError,
+  setShouldRefetchStatus,
 }) => {
   const callout = useShowCallout();
   const intl = useIntl();
@@ -52,6 +53,17 @@
   } = usePagination(PAGINATION_CONFIG);
 
   const visibleColumnKeys = getVisibleColumnsKeys(visibleColumns);
+  console.log('isPreviewEnabled:', isPreviewEnabled);
+  console.log('bulkDetails status:', bulkDetails?.status);
+  const [shouldFetch, setShouldFetch] = useState(false);
+
+  useEffect(() => {
+    if (isPreviewEnabled && ![JOB_STATUSES.DATA_MODIFICATION_IN_PROGRESS, JOB_STATUSES.DATA_MODIFICATION].includes(bulkDetails?.status)) {
+      setShouldFetch(true);
+    } else {
+      setShouldFetch(false);
+    }
+  }, [bulkDetails?.status, isPreviewEnabled]);
 
   const {
     contentData,
@@ -62,8 +74,10 @@
     id: bulkDetails?.id,
     step: EDITING_STEPS.EDIT,
     capabilities: currentRecordType,
+    onSuccess: () => setShouldRefetchStatus(false),
     queryOptions: {
+      enabled: shouldFetch,
       enabled: isPreviewEnabled && bulkDetails?.status !== JOB_STATUSES.DATA_MODIFICATION_IN_PROGRESS,
       onSuccess: showErrorMessage,
       onError: () => {
         callout({

src/components/shared/ProgressBar/ProgressBar.js

@@ -5,7 +5,7 @@
 import { Icon, Loading } from '@folio/stripes/components';
 import { useShowCallout } from '@folio/stripes-acq-components';
 
 import { useBulkOperationDetails } from '../../../hooks/api';
 import { EDITING_STEPS, ERRORS, JOB_STATUSES } from '../../../constants';
 import { getBulkOperationStep } from './utils';
 import css from './ProgressBar.css';
@@ -24,6 +24,7 @@
   const { bulkDetails, clearIntervalAndRedirect } = useBulkOperationDetails({
     id,
     interval: 1000 * 3,
+    shouldRefetch: true,
     additionalQueryKeys: [step],
   });
 

src/hooks/api/useBulkOperationDetails.js

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useQuery } from 'react-query';
 import { useNamespace, useOkapiKy } from '@folio/stripes/core';
 import { useHistory } from 'react-router-dom';
@@ -12,21 +12,34 @@ export const useBulkOperationDetails = ({
   id,
   interval = 0,
   additionalQueryKeys = [],
+  shouldRefetch = false,
   ...options
 }) => {
   const ky = useOkapiKy();
   const [namespaceKey] = useNamespace({ key: BULK_OPERATION_DETAILS_KEY });
   const history = useHistory();
-  const [refetchInterval, setRefetchInterval] = useState(interval);
-  const { showErrorMessage } = useErrorMessages();
+  const { data, isLoading, refetch } = useQuery({
+    queryKey: [BULK_OPERATION_DETAILS_KEY, namespaceKey, id],
+    enabled: !!id,
+    queryFn: () => ky.get(`bulk-operations/${id}`).json(),
+    ...options,
+  });
 
-  const clearInterval = () => {
-    setRefetchInterval(0);
-  };
+  useEffect(() => {
+    let intervalId;
 
-  const clearIntervalAndRedirect = (pathname, searchParams) => {
-    clearInterval();
+    if (shouldRefetch) {
+      intervalId = setInterval(() => {
+        refetch();
+      }, interval);
+    }
+
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [shouldRefetch, interval, refetch]);
 
+  const clearIntervalAndRedirect = (pathname, searchParams) => {
     history.replace({
       pathname,
       search: searchParams ? buildSearch(searchParams, history.location.search) : '',
@@ -61,7 +74,7 @@ export const useBulkOperationDetails = ({
   return {
     bulkDetails: data,
     isLoading,
-    clearInterval,
+    refetch,
     clearIntervalAndRedirect,
   };
 };

src/hooks/api/useRecordsPreview.js

@@ -4,6 +4,7 @@
 
 import { useNamespace, useOkapiKy } from '@folio/stripes/core';
 
+import noop from 'lodash/noop';
 import { BULK_VISIBLE_COLUMNS } from '../../constants';
 import { getMappedTableData } from '../../utils/mappers';
 import { RootContext } from '../../context/RootContext';
@@ -21,7 +22,8 @@
   limit,
   offset,
   criteria,
-  queryRecordType
+  queryRecordType,
+  onSuccess = noop,
 }) => {
   const intl = useIntl();
   const { setVisibleColumns } = useContext(RootContext);
@@ -83,6 +85,13 @@
     capabilities
   ]);
 
+  console.log(contentData);
+  useEffect(() => {
+    if (contentData?.length > 0) {
+      onSuccess();
+    }
+  }, [contentData, onSuccess]);
+
   return {
     isLoading,
     refetch,

src/hooks/useConfirmChanges.js

@@ -1,11 +1,11 @@
-import { useState } from 'react';
+import { useContext, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { useQueryClient } from 'react-query';
 
 import { useShowCallout } from '@folio/stripes-acq-components';
 
 import {
   PREVIEW_MODAL_KEY,
   BULK_OPERATION_DETAILS_KEY,
   useBulkOperationDetails,
   useBulkOperationStart,
@@ -32,8 +32,13 @@
 
   const [isPreviewModalOpened, setIsPreviewModalOpened] = useState(false);
   const [isPreviewLoading, setIsPreviewLoading] = useState(false);
+  const [shouldRefetchStatus, setShouldRefetchStatus] = useState(false);
 
-  const { bulkDetails } = useBulkOperationDetails({ id: bulkOperationId, interval: 1000 * 3 });
+  const { bulkDetails } = useBulkOperationDetails({
+    id: bulkOperationId,
+    interval: 1000 * 3,
+    shouldRefetch: shouldRefetchStatus,
+  });
   const { bulkOperationStart } = useBulkOperationStart();
 
   const totalRecords = bulkDetails?.totalNumOfRecords;
@@ -44,11 +49,13 @@
 
   const closePreviewModal = () => {
     setIsPreviewModalOpened(false);
+    setShouldRefetchStatus(false);
   };
 
   const confirmChanges = (payload) => {
     setIsPreviewLoading(true);
     setIsPreviewModalOpened(true);
+    setShouldRefetchStatus(true);
 
     updateFn(payload)
       .then(() => bulkOperationStart({
@@ -58,7 +65,6 @@
       }))
       .then(() => {
         queryClient.invalidateQueries(BULK_OPERATION_DETAILS_KEY);
-        queryClient.invalidateQueries(PREVIEW_MODAL_KEY);
       })
       .catch(() => {
         callout({
@@ -94,5 +100,6 @@
     openPreviewModal,
     closePreviewModal,
     confirmChanges,
+    setShouldRefetchStatus
   };
 };