diff --git a/packages/core/admin/admin/src/translations/en.json b/packages/core/admin/admin/src/translations/en.json index a7341780bc..04ed4891eb 100644 --- a/packages/core/admin/admin/src/translations/en.json +++ b/packages/core/admin/admin/src/translations/en.json @@ -226,6 +226,7 @@ "Settings.profile.form.section.profile.page.title": "Profile page", "Settings.review-workflows.page.title": "Review Workflow", "Settings.review-workflows.page.subtitle": "{count, plural, one {# stage} other {# stages}}", + "Settings.review-workflows.page.isLoading": "Workflow is loading", "Settings.review-workflows.stage.name.label": "Stage name", "Settings.roles.create.description": "Define the rights given to the role", "Settings.roles.create.title": "Create a role", diff --git a/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/ReviewWorkflows.js b/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/ReviewWorkflows.js index d993f93cd4..87f5443aaa 100644 --- a/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/ReviewWorkflows.js +++ b/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/ReviewWorkflows.js @@ -1,35 +1,39 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import { useIntl } from 'react-intl'; +import { useSelector, useDispatch } from 'react-redux'; import { SettingsPageTitle } from '@strapi/helper-plugin'; -import { Button, ContentLayout, HeaderLayout, Layout, Main } from '@strapi/design-system'; +import { Button, ContentLayout, HeaderLayout, Layout, Loader, Main } from '@strapi/design-system'; import { Check } from '@strapi/icons'; import { Stages } from './components/Stages'; - -const STAGES = [ - { - uid: 'id-1', - name: 'To do', - }, - - { - uid: 'id-2', - name: 'Ready to review', - }, - - { - uid: 'id-3', - name: 'In progress', - }, - - { - uid: 'id-4', - name: 'Reviewed', - }, -]; +import { reducer } from './reducer'; +import { REDUX_NAMESPACE } from './constants'; +import { useInjectReducer } from '../../../../../../admin/src/hooks/useInjectReducer'; +import { useReviewWorkflows } from './hooks/useReviewWorkflows'; +import { setWorkflowLoadingState, setWorkflowStages } from './actions'; export function ReviewWorkflowsPage() { const { formatMessage } = useIntl(); + const { workflows: workflowsData } = useReviewWorkflows(); + const workflow = useSelector((state) => state?.[REDUX_NAMESPACE]); + const dispatch = useDispatch(); + + useInjectReducer(REDUX_NAMESPACE, reducer); + + useEffect(() => { + dispatch(setWorkflowLoadingState(workflowsData.status)); + + if (workflowsData.status === 'success') { + dispatch(setWorkflowStages(workflowsData.data)); + } + }, [workflowsData.status, workflowsData.data, dispatch]); + + // useInjectReducer() runs on the first rendering after useSelector + // which will return undefined. This helps to avoid too many optional + // chaining operators down the component. + if (!workflow) { + return null; + } return ( @@ -58,11 +62,20 @@ export function ReviewWorkflowsPage() { id: 'Settings.review-workflows.page.subtitle', defaultMessage: '{count, plural, one {# stage} other {# stages}}', }, - { count: STAGES.length } + { count: workflow.workflows.stages.length } )} /> - + {workflow.workflows.state === 'loading' ? ( + + {formatMessage({ + id: 'Settings.review-workflows.page.isLoading', + defaultMessage: 'Workflow is loading', + })} + + ) : ( + + )} diff --git a/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/actions/index.js b/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/actions/index.js new file mode 100644 index 0000000000..fcef478087 --- /dev/null +++ b/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/actions/index.js @@ -0,0 +1,19 @@ +import { ACTION_SET_LOADING_STATE, ACTION_SET_STAGES } from '../constants'; + +export function setWorkflowLoadingState(state) { + return { + type: ACTION_SET_LOADING_STATE, + payload: { + state, + }, + }; +} + +export function setWorkflowStages(stages) { + return { + type: ACTION_SET_STAGES, + payload: { + stages, + }, + }; +} diff --git a/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/components/Stages/Stage/Stage.js b/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/components/Stages/Stage/Stage.js index 67cd42c86d..83201ae24a 100644 --- a/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/components/Stages/Stage/Stage.js +++ b/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/components/Stages/Stage/Stage.js @@ -22,7 +22,7 @@ const StyledAccordion = styled(Box)` } `; -function Stage({ uid, name }) { +function Stage({ id, name }) { const { formatMessage } = useIntl(); const [isOpen, setIsOpen] = useState(false); @@ -34,7 +34,7 @@ function Stage({ uid, name }) { - {stages.map(({ uid, ...stage }) => ( - - + {stages.map(({ id, ...stage }) => ( + + ))} diff --git a/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/constants.js b/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/constants.js index 9fa0c3b1f2..e5597df469 100644 --- a/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/constants.js +++ b/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/constants.js @@ -1,6 +1,11 @@ import PropTypes from 'prop-types'; +export const REDUX_NAMESPACE = 'settings_review-workflows'; + +export const ACTION_SET_LOADING_STATE = `Settings/Review_Workflows/SET_STATE`; +export const ACTION_SET_STAGES = `Settings/Review_Workflows/SET_DATA`; + export const StageType = PropTypes.shape({ - uid: PropTypes.string.isRequired, + id: PropTypes.string.isRequired, name: PropTypes.string.isRequired, }); diff --git a/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/hooks/useReviewWorkflows.js b/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/hooks/useReviewWorkflows.js index d6ffd1dc63..2296f02718 100644 --- a/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/hooks/useReviewWorkflows.js +++ b/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/hooks/useReviewWorkflows.js @@ -2,12 +2,36 @@ import { useQuery } from 'react-query'; import { useFetchClient } from '@strapi/helper-plugin'; -export function useReviewWorkflows(workflowUid) { +export function useReviewWorkflows(workflowId) { const { get } = useFetchClient(); async function fetchWorkflows() { + /* TODO: mocked for now until the API is ready */ + return [ + { + id: 'id-1', + name: 'To do', + }, + + { + id: 'id-2', + name: 'Ready to review', + }, + + { + id: 'id-3', + name: 'In progress', + }, + + { + id: 'id-4', + name: 'Reviewed', + }, + ]; + + // eslint-disable-next-line no-unreachable try { - const { data } = await get(`/admin/review-workflows/workflows/${workflowUid ?? ''}`); + const { data } = await get(`/admin/review-workflows/workflows/${workflowId ?? ''}`); return data; } catch (err) { @@ -15,7 +39,7 @@ export function useReviewWorkflows(workflowUid) { } } - const workflows = useQuery(['review-workflows', workflowUid ?? 'default'], fetchWorkflows); + const workflows = useQuery(['review-workflows', workflowId ?? 'default'], fetchWorkflows); return { workflows, diff --git a/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/reducer/index.js b/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/reducer/index.js new file mode 100644 index 0000000000..85b6b9fa07 --- /dev/null +++ b/packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/reducer/index.js @@ -0,0 +1,27 @@ +import produce from 'immer'; + +import { ACTION_SET_STAGES, ACTION_SET_LOADING_STATE } from '../constants'; + +const initialState = { + workflows: { + state: 'loading', + stages: [], + }, +}; + +export function reducer(state = initialState, action) { + return produce(state, (draft) => { + switch (action.type) { + case ACTION_SET_LOADING_STATE: + draft.workflows.state = action.payload.state; + break; + + case ACTION_SET_STAGES: + draft.workflows.stages = action.payload.stages; + break; + + default: + break; + } + }); +}