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(() => {