From 03c9a85971189402f1c2b45a121c37e116aede17 Mon Sep 17 00:00:00 2001 From: vashjs Date: Fri, 25 Oct 2024 22:30:45 +0200 Subject: [PATCH] test --- .../BulkEditInAppLayer/BulkEditInAppLayer.js | 10 ++- .../BulkEditPreviewModal.js | 7 +- .../BulkEditPreviewModalList.js | 74 +++++++++---------- .../BulkEditMarkLayer/BulkEditMarkLayer.js | 8 ++ src/hooks/api/useBulkOperationDetails.js | 10 ++- src/hooks/api/useBulkOperationStart.js | 1 - src/hooks/useConfirmChanges.js | 17 ++++- 7 files changed, 80 insertions(+), 47 deletions(-) diff --git a/src/components/BulkEditPane/BulkEditInAppLayer/BulkEditInAppLayer.js b/src/components/BulkEditPane/BulkEditInAppLayer/BulkEditInAppLayer.js index 84f1226f..fbe9cca4 100644 --- a/src/components/BulkEditPane/BulkEditInAppLayer/BulkEditInAppLayer.js +++ b/src/components/BulkEditPane/BulkEditInAppLayer/BulkEditInAppLayer.js @@ -23,12 +23,14 @@ export const BulkEditInAppLayer = ({ const { isPreviewModalOpened, - isPreviewLoading, bulkDetails, totalRecords, downloadFile, confirmChanges, closePreviewModal, + isPreviewLoading, + setIsPreviewLoading, + isReadyToShowPreview, } = useConfirmChanges({ queryDownloadKey: QUERY_KEY_DOWNLOAD_PREVIEW_MODAL, updateFn: contentUpdate, @@ -60,6 +62,10 @@ export const BulkEditInAppLayer = ({ confirmChanges({ contentUpdates: contentUpdatesBody }); }; + const handlePreviewLoaded = () => { + setIsPreviewLoading(false); + }; + return ( <> ); diff --git a/src/components/BulkEditPane/BulkEditListResult/BulkEditInAppPreviewModal/BulkEditPreviewModal.js b/src/components/BulkEditPane/BulkEditListResult/BulkEditInAppPreviewModal/BulkEditPreviewModal.js index 6e89470e..9ec0f83c 100644 --- a/src/components/BulkEditPane/BulkEditListResult/BulkEditInAppPreviewModal/BulkEditPreviewModal.js +++ b/src/components/BulkEditPane/BulkEditListResult/BulkEditInAppPreviewModal/BulkEditPreviewModal.js @@ -24,7 +24,9 @@ export const BulkEditPreviewModal = ({ open, bulkDetails, isPreviewLoading, + isReadyToShowPreview, onKeepEditing, + onPreviewLoaded, onDownload, onChangesCommited, }) => { @@ -89,8 +91,9 @@ export const BulkEditPreviewModal = ({ > ); @@ -98,9 +101,11 @@ export const BulkEditPreviewModal = ({ BulkEditPreviewModal.propTypes = { open: PropTypes.bool, + isReadyToShowPreview: PropTypes.bool, isPreviewLoading: PropTypes.bool, bulkDetails: PropTypes.object, onKeepEditing: PropTypes.func, + onPreviewLoaded: PropTypes.func, onChangesCommited: PropTypes.func, onDownload: PropTypes.func, }; diff --git a/src/components/BulkEditPane/BulkEditListResult/BulkEditInAppPreviewModal/BulkEditPreviewModalList.js b/src/components/BulkEditPane/BulkEditListResult/BulkEditInAppPreviewModal/BulkEditPreviewModalList.js index d84f124c..3f5dacdc 100644 --- a/src/components/BulkEditPane/BulkEditListResult/BulkEditInAppPreviewModal/BulkEditPreviewModalList.js +++ b/src/components/BulkEditPane/BulkEditListResult/BulkEditInAppPreviewModal/BulkEditPreviewModalList.js @@ -6,8 +6,6 @@ import { } from 'react-intl'; import { - Layout, - Loading, MessageBanner, MultiColumnList } from '@folio/stripes/components'; @@ -23,7 +21,6 @@ import { usePagination } from '../../../../hooks/usePagination'; import { CAPABILITIES, EDITING_STEPS, - JOB_STATUSES, PAGINATION_CONFIG } from '../../../../constants'; import { @@ -38,8 +35,9 @@ import { useErrorMessages } from '../../../../hooks/useErrorMessages'; export const BulkEditPreviewModalList = ({ bulkDetails, - isPreviewEnabled, + isReadyToShowPreview, onPreviewError, + onPreviewLoaded, }) => { const callout = useShowCallout(); const intl = useIntl(); @@ -63,8 +61,11 @@ export const BulkEditPreviewModalList = ({ step: EDITING_STEPS.EDIT, capabilities: currentRecordType, queryOptions: { - enabled: isPreviewEnabled && bulkDetails?.status !== JOB_STATUSES.DATA_MODIFICATION_IN_PROGRESS, - onSuccess: showErrorMessage, + enabled: !!bulkDetails?.id && isReadyToShowPreview, + onSuccess: (response) => { + showErrorMessage(response); + onPreviewLoaded(response); + }, onError: () => { callout({ type: 'error', @@ -76,7 +77,7 @@ export const BulkEditPreviewModalList = ({ ...pagination, }); - if (!contentData || !isPreviewEnabled) return ; + if (!contentData?.length) return ; const renderMessageBanner = () => { if (!bulkDetails?.processedNumOfRecords && currentRecordType === CAPABILITIES.INSTANCE) { @@ -95,46 +96,41 @@ export const BulkEditPreviewModalList = ({ }; return ( - bulkDetails?.status !== JOB_STATUSES.DATA_MODIFICATION_IN_PROGRESS ? - ( - <> - {renderMessageBanner()} + <> + {renderMessageBanner()} - - + + - + - {contentData.length > 0 && ( - - )} - - ) - : - - - + {contentData.length > 0 && ( + + )} + ); }; BulkEditPreviewModalList.propTypes = { bulkDetails: PropTypes.object, isPreviewEnabled: PropTypes.bool, + isReadyToShowPreview: PropTypes.bool, onPreviewError: PropTypes.func, + onPreviewLoaded: PropTypes.func, }; diff --git a/src/components/BulkEditPane/BulkEditMarkLayer/BulkEditMarkLayer.js b/src/components/BulkEditPane/BulkEditMarkLayer/BulkEditMarkLayer.js index 3ac96fe8..5d212d52 100644 --- a/src/components/BulkEditPane/BulkEditMarkLayer/BulkEditMarkLayer.js +++ b/src/components/BulkEditPane/BulkEditMarkLayer/BulkEditMarkLayer.js @@ -30,6 +30,8 @@ export const BulkEditMarkLayer = ({ downloadFile, confirmChanges, closePreviewModal, + setIsPreviewLoading, + isReadyToShowPreview, } = useConfirmChanges({ updateFn: markContentUpdate, queryDownloadKey: QUERY_KEY_DOWNLOAD_MARK_PREVIEW_MODAL, @@ -64,6 +66,10 @@ export const BulkEditMarkLayer = ({ }); }; + const handlePreviewLoaded = () => { + setIsPreviewLoading(false); + }; + return ( <> ); diff --git a/src/hooks/api/useBulkOperationDetails.js b/src/hooks/api/useBulkOperationDetails.js index 35ff3628..22e63279 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,14 +10,14 @@ export const BULK_OPERATION_DETAILS_KEY = 'BULK_OPERATION_DETAILS_KEY'; export const useBulkOperationDetails = ({ id, - interval = 0, + interval, additionalQueryKeys = [], ...options }) => { const ky = useOkapiKy(); const [namespaceKey] = useNamespace({ key: BULK_OPERATION_DETAILS_KEY }); const history = useHistory(); - const [refetchInterval, setRefetchInterval] = useState(interval); + const [refetchInterval, setRefetchInterval] = useState(0); const { showErrorMessage } = useErrorMessages(); const clearInterval = () => { @@ -58,6 +58,10 @@ export const useBulkOperationDetails = ({ ...options, }); + useEffect(() => { + setRefetchInterval(interval); + }, [interval]); + return { bulkDetails: data, isLoading, diff --git a/src/hooks/api/useBulkOperationStart.js b/src/hooks/api/useBulkOperationStart.js index a33e087f..dd84015b 100644 --- a/src/hooks/api/useBulkOperationStart.js +++ b/src/hooks/api/useBulkOperationStart.js @@ -71,7 +71,6 @@ export const useBulkOperationStart = (mutationOptions = {}) => { return data; }, - onSuccess: showErrorMessage, onError: showErrorMessage, ...mutationOptions, }); diff --git a/src/hooks/useConfirmChanges.js b/src/hooks/useConfirmChanges.js index a65e0a6d..f14d1e8f 100644 --- a/src/hooks/useConfirmChanges.js +++ b/src/hooks/useConfirmChanges.js @@ -15,6 +15,7 @@ import { APPROACHES, EDITING_STEPS, FILE_SEARCH_PARAMS, + JOB_STATUSES, } from '../constants'; import { useSearchParams } from './useSearchParams'; @@ -31,9 +32,13 @@ export const useConfirmChanges = ({ const searchParams = useSearchParams(); const [isPreviewModalOpened, setIsPreviewModalOpened] = useState(false); + const [isBulkOperationStarting, setIsBulkOperationStarting] = useState(false); const [isPreviewLoading, setIsPreviewLoading] = useState(false); - const { bulkDetails } = useBulkOperationDetails({ id: bulkOperationId, interval: 1000 * 3 }); + const { bulkDetails } = useBulkOperationDetails({ + id: bulkOperationId, + interval: isPreviewLoading ? 3000 : 0 + }); const { bulkOperationStart } = useBulkOperationStart(); const totalRecords = bulkDetails?.totalNumOfRecords; @@ -44,9 +49,11 @@ export const useConfirmChanges = ({ const closePreviewModal = () => { setIsPreviewModalOpened(false); + setIsPreviewLoading(false); }; const confirmChanges = (payload) => { + setIsBulkOperationStarting(true); setIsPreviewLoading(true); setIsPreviewModalOpened(true); @@ -69,7 +76,7 @@ export const useConfirmChanges = ({ closePreviewModal(); }) .finally(() => { - setIsPreviewLoading(false); + setIsBulkOperationStarting(false); }); }; @@ -83,10 +90,16 @@ export const useConfirmChanges = ({ onSuccess: (data) => onDownloadSuccess(data, searchParams), }); + const isReadyToShowPreview = !isBulkOperationStarting && + ![JOB_STATUSES.DATA_MODIFICATION, JOB_STATUSES.DATA_MODIFICATION_IN_PROGRESS].includes(bulkDetails?.status); + return { totalRecords, bulkDetails, isPreviewModalOpened, + isBulkOperationStarting, + setIsBulkOperationStarting, + isReadyToShowPreview, isPreviewLoading, setIsPreviewLoading, isFileDownloading,