diff --git a/src/components/BulkEditPane/BulkEditListResult/BulkEditInAppPreviewModal/BulkEditPreviewModal.js b/src/components/BulkEditPane/BulkEditListResult/BulkEditInAppPreviewModal/BulkEditPreviewModal.js index dbee6917..8c3f1cdf 100644 --- a/src/components/BulkEditPane/BulkEditListResult/BulkEditInAppPreviewModal/BulkEditPreviewModal.js +++ b/src/components/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} > - + {open && ( + + )} ); }; diff --git a/src/components/BulkEditPane/BulkEditListResult/BulkEditInAppPreviewModal/BulkEditPreviewModalList.js b/src/components/BulkEditPane/BulkEditListResult/BulkEditInAppPreviewModal/BulkEditPreviewModalList.js index ee0d4c0b..84fcec4e 100644 --- a/src/components/BulkEditPane/BulkEditListResult/BulkEditInAppPreviewModal/BulkEditPreviewModalList.js +++ b/src/components/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,7 +69,7 @@ export const BulkEditPreviewModalList = ({ step: EDITING_STEPS.EDIT, capabilities: currentRecordType, queryOptions: { - enabled: bulkDetails?.status === JOB_STATUSES.REVIEW_CHANGES, + enabled, onSuccess: showErrorMessage, onError: (error) => { showErrorMessage(error); @@ -70,6 +77,7 @@ export const BulkEditPreviewModalList = ({ }, 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 index f3e6325d..f764ff48 100644 --- 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 index 10565f6d..c065a69f 100644 --- 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 index b53da3f4..a1ab44e9 100644 --- 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 index e53e59cb..fa15a223 100644 --- 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 index 006cec79..5ccf8371 100644 --- 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(() => {