diff --git a/modules/apps/document-library/document-library-web/src/main/resources/META-INF/resources/document_library/js/bulk/BulkStatus.es.js b/modules/apps/document-library/document-library-web/src/main/resources/META-INF/resources/document_library/js/bulk/BulkStatus.es.js index 155a7e66db9f7b..98c0f141315ab6 100644 --- a/modules/apps/document-library/document-library-web/src/main/resources/META-INF/resources/document_library/js/bulk/BulkStatus.es.js +++ b/modules/apps/document-library/document-library-web/src/main/resources/META-INF/resources/document_library/js/bulk/BulkStatus.es.js @@ -12,167 +12,90 @@ * details. */ -import {useResource} from '@clayui/data-provider'; import ClayLoadingIndicator from '@clayui/loading-indicator'; -import {fetch, openToast} from 'frontend-js-web'; import {useTimeout} from 'frontend-js-react-web'; +import {fetch, openToast} from 'frontend-js-web'; import PropTypes from 'prop-types'; -import React, {useEffect, useRef, useState, useCallback} from 'react'; +import React, {useCallback, useEffect, useReducer} from 'react'; -/** - * Shows a toast notification. - * - * @param {boolean} error Flag indicating if is an error or not - * @protected - */ -function _showNotification(hasError) { - let message; - - if (hasError) { - message = Liferay.Language.get('an-unexpected-error-occurred'); - } else { - message = Liferay.Language.get('changes-saved'); - } - - const openToastParams = { - message - }; - - if (hasError) { - openToastParams.title = Liferay.Language.get('error'); - openToastParams.type = 'danger'; - } - - openToast(openToastParams); -} +import reducer, {STATES} from './reducer.es'; /** * Shows the bulk actions status */ function BulkStatus({ - bulkInProgress = false, + bulkComponentId, + bulkInProgress, bulkStatusUrl = '/bulk/v1.0/status', intervalSpeed = 1000, pathModule, - portletNamespace, waitingTime = 1000 }) { const delay = useTimeout(); - const [isBulkInProgress, setIsBulkInProgress] = useState(bulkInProgress); - const [ - isBulkLoadingIndicatorVisible, - setIsBulkLoadingIndicatorVisible - ] = useState(false); - const isBulkHappened = useRef(false); + const [state, dispatch] = useReducer( + reducer, + bulkInProgress ? {current: STATES.LONG_POLLING} : {current: STATES.IDLE} + ); + + const statusCallback = useCallback(() => { + return delay(() => { + fetch( + `${Liferay.ThemeDisplay.getPortalURL()}${pathModule}${bulkStatusUrl}` + ) + .then(response => response.json()) + .then(response => { + if (response.actionInProgress) { + dispatch({type: 'check'}); + } else { + dispatch({type: 'success'}); + } + }) + .catch(() => dispatch({type: 'error'})); + }, intervalSpeed); + }, [bulkStatusUrl, delay, pathModule, intervalSpeed]); useEffect(() => { let dispose; - if (waitingTime) { - if (isBulkInProgress && !isBulkLoadingIndicatorVisible) { - dispoe = delay(() => { - setIsBulkLoadingIndicatorVisible(true); - }, waitingTime); - } - } - - return dispose; - }, [waitingTime, isBulkInProgress, isBulkLoadingIndicatorVisible]); - - const [networkState, setNetworkState] = useState({ - error: false, - loading: false, - networkStatus: 4, - unused: false - }); - - const refetchSafe = useCallback(() => refetch(), [refetch]); + if (state.current === STATES.SHORT_POLLING) { + statusCallback(); - useEffect(() => { - if (!Liferay.component(`${portletNamespace}BulkStatus`)) { - Liferay.component( - `${portletNamespace}BulkStatus`, - { - startWatch: () => { - if (!isBulkInProgress) { - setIsBulkInProgress(true); - refetchSafe(); - } - } - }, - { - destroyOnNavigate: true - } + dispose = delay( + () => dispatch({type: 'initialDelayCompleted'}), + waitingTime ); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - const {refetch, resource} = useResource({ - link: () => { - return fetch( - Liferay.ThemeDisplay.getPortalURL() + pathModule + bulkStatusUrl - ).then(response => response.json()); - }, - onNetworkStatusChange: status => - setNetworkState({ - error: status === 5, - loading: status < 4, - networkStatus: status, - unused: status === 4 - }) - }); + } else if (state.current === STATES.LONG_POLLING) { + statusCallback(); + } else if (state.current === STATES.NOTIFY) { + openToast(state.toast); - useEffect(() => { - if (networkState.error) { - _showNotification(true); + dispatch({type: 'notificationCompleted'}); } - }, [networkState.error]); - useEffect(() => { - if ( - networkState.unused && - !isBulkInProgress && - isBulkHappened.current - ) { - _showNotification(false); - } - }, [isBulkHappened, isBulkInProgress, networkState.unused]); - - useEffect(() => { - if (resource) { - if (resource.actionInProgress && !networkState.error) { - setIsBulkInProgress(true); - setTimeout(() => { - refetchSafe(); - }, intervalSpeed); - if (isBulkHappened.current === false) { - isBulkHappened.current = true; + return dispose; + }, [delay, state, statusCallback, waitingTime]); + + if (!Liferay.component(bulkComponentId)) { + Liferay.component( + bulkComponentId, + { + startWatch: () => { + dispatch({type: 'start'}); } + }, + { + destroyOnNavigate: true } - - if (!resource.actionInProgress || networkState.error) { - setIsBulkInProgress(false); - setIsBulkLoadingIndicatorVisible(false); - } - } - }, [ - intervalSpeed, - isBulkHappened, - networkState.error, - refetchSafe, - resource - ]); + ); + } return (