diff --git a/src/components/BulkEditPane/BulkEditInAppLayer/BulkEditInAppLayer.js b/src/components/BulkEditPane/BulkEditInAppLayer/BulkEditInAppLayer.js index 84f1226f..94254de9 100644 --- a/src/components/BulkEditPane/BulkEditInAppLayer/BulkEditInAppLayer.js +++ b/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} /> ); diff --git a/src/components/BulkEditPane/BulkEditListResult/BulkEditInAppPreviewModal/BulkEditPreviewModal.js b/src/components/BulkEditPane/BulkEditListResult/BulkEditInAppPreviewModal/BulkEditPreviewModal.js index 6e89470e..8281094c 100644 --- a/src/components/BulkEditPane/BulkEditListResult/BulkEditInAppPreviewModal/BulkEditPreviewModal.js +++ b/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} /> ); @@ -103,4 +105,5 @@ BulkEditPreviewModal.propTypes = { onKeepEditing: PropTypes.func, onChangesCommited: PropTypes.func, onDownload: PropTypes.func, + setShouldRefetchStatus: PropTypes.func }; diff --git a/src/components/BulkEditPane/BulkEditListResult/BulkEditInAppPreviewModal/BulkEditPreviewModalList.js b/src/components/BulkEditPane/BulkEditListResult/BulkEditInAppPreviewModal/BulkEditPreviewModalList.js index f2f1d8d5..44188cf5 100644 --- a/src/components/BulkEditPane/BulkEditListResult/BulkEditInAppPreviewModal/BulkEditPreviewModalList.js +++ b/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, @@ -39,6 +39,7 @@ export const BulkEditPreviewModalList = ({ bulkDetails, isPreviewEnabled, onPreviewError, + setShouldRefetchStatus, }) => { const callout = useShowCallout(); const intl = useIntl(); @@ -50,6 +51,17 @@ export const BulkEditPreviewModalList = ({ } = 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, @@ -60,8 +72,9 @@ export const BulkEditPreviewModalList = ({ id: bulkDetails?.id, step: EDITING_STEPS.EDIT, capabilities: currentRecordType, + onSuccess: () => setShouldRefetchStatus(false), queryOptions: { - enabled: isPreviewEnabled && bulkDetails?.status !== JOB_STATUSES.DATA_MODIFICATION_IN_PROGRESS, + enabled: shouldFetch, onError: () => { callout({ type: 'error', diff --git a/src/components/shared/ProgressBar/ProgressBar.js b/src/components/shared/ProgressBar/ProgressBar.js index 1dc9ad68..24aa5609 100644 --- a/src/components/shared/ProgressBar/ProgressBar.js +++ b/src/components/shared/ProgressBar/ProgressBar.js @@ -24,6 +24,7 @@ export const ProgressBar = () => { const { bulkDetails, clearIntervalAndRedirect } = useBulkOperationDetails({ id, interval: 1000 * 3, + shouldRefetch: true, additionalQueryKeys: [step], }); diff --git a/src/hooks/api/useBulkOperationDetails.js b/src/hooks/api/useBulkOperationDetails.js index 295d268c..6641a634 100644 --- a/src/hooks/api/useBulkOperationDetails.js +++ b/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'; @@ -10,27 +10,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 { data, isLoading } = useQuery({ - queryKey: [BULK_OPERATION_DETAILS_KEY, namespaceKey, id, refetchInterval, ...additionalQueryKeys], + const { data, isLoading, refetch } = useQuery({ + queryKey: [BULK_OPERATION_DETAILS_KEY, namespaceKey, id], enabled: !!id, - refetchInterval, queryFn: () => ky.get(`bulk-operations/${id}`).json(), ...options, }); - const clearInterval = () => { - setRefetchInterval(0); - }; - const clearIntervalAndRedirect = (pathname, searchParams) => { - clearInterval(); + useEffect(() => { + let intervalId; + 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) : '', @@ -40,7 +47,7 @@ export const useBulkOperationDetails = ({ return { bulkDetails: data, isLoading, - clearInterval, + refetch, clearIntervalAndRedirect, }; }; diff --git a/src/hooks/api/useRecordsPreview.js b/src/hooks/api/useRecordsPreview.js index e53e59cb..e7a2bbf9 100644 --- a/src/hooks/api/useRecordsPreview.js +++ b/src/hooks/api/useRecordsPreview.js @@ -4,6 +4,7 @@ import { useIntl } from 'react-intl'; 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 @@ export const useRecordsPreview = ({ limit, offset, criteria, - queryRecordType + queryRecordType, + onSuccess = noop, }) => { const intl = useIntl(); const { setVisibleColumns } = useContext(RootContext); @@ -83,6 +85,13 @@ export const useRecordsPreview = ({ capabilities ]); + console.log(contentData); + useEffect(() => { + if (contentData?.length > 0) { + onSuccess(); + } + }, [contentData, onSuccess]); + return { isLoading, refetch, diff --git a/src/hooks/useConfirmChanges.js b/src/hooks/useConfirmChanges.js index a65e0a6d..2e2c2e8f 100644 --- a/src/hooks/useConfirmChanges.js +++ b/src/hooks/useConfirmChanges.js @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useContext, useState } from 'react'; import { useIntl } from 'react-intl'; import { useQueryClient } from 'react-query'; @@ -32,8 +32,13 @@ export const useConfirmChanges = ({ 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 @@ export const useConfirmChanges = ({ const closePreviewModal = () => { setIsPreviewModalOpened(false); + setShouldRefetchStatus(false); }; const confirmChanges = (payload) => { setIsPreviewLoading(true); setIsPreviewModalOpened(true); + setShouldRefetchStatus(true); updateFn(payload) .then(() => bulkOperationStart({ @@ -58,7 +65,6 @@ export const useConfirmChanges = ({ })) .then(() => { queryClient.invalidateQueries(BULK_OPERATION_DETAILS_KEY); - queryClient.invalidateQueries(PREVIEW_MODAL_KEY); }) .catch(() => { callout({ @@ -94,5 +100,6 @@ export const useConfirmChanges = ({ openPreviewModal, closePreviewModal, confirmChanges, + setShouldRefetchStatus }; };