From 27bd755a6fa1954a2d2ebca645974852772166e9 Mon Sep 17 00:00:00 2001 From: Tisha Soumya Date: Tue, 19 Sep 2023 16:47:26 +0530 Subject: [PATCH] Refactor Content workflow Modal (#4969) Co-authored-by: Nilesh --- news/4969.feature | 1 + .../manage/Contents/ContentsWorkflowModal.jsx | 241 +++++++----------- 2 files changed, 88 insertions(+), 154 deletions(-) create mode 100644 news/4969.feature diff --git a/news/4969.feature b/news/4969.feature new file mode 100644 index 0000000000..cdaa427253 --- /dev/null +++ b/news/4969.feature @@ -0,0 +1 @@ +Refactor ContentsWorkflowModal -@Tishasoumya-02 \ No newline at end of file diff --git a/src/components/manage/Contents/ContentsWorkflowModal.jsx b/src/components/manage/Contents/ContentsWorkflowModal.jsx index 73b6216c12..d5ac0ba2cd 100644 --- a/src/components/manage/Contents/ContentsWorkflowModal.jsx +++ b/src/components/manage/Contents/ContentsWorkflowModal.jsx @@ -1,15 +1,10 @@ -/** - * Contents workflow modal. - * @module components/manage/Contents/ContentsWorkflowModal - */ - -import React, { Component } from 'react'; +import React, { useCallback, useEffect } from 'react'; import PropTypes from 'prop-types'; -import { connect } from 'react-redux'; -import { compose } from 'redux'; +import { shallowEqual, useDispatch, useSelector } from 'react-redux'; import { concat, filter, last, map, uniqBy } from 'lodash'; -import { defineMessages, injectIntl } from 'react-intl'; +import { defineMessages, useIntl } from 'react-intl'; +import { usePrevious } from '@plone/volto/helpers'; import { getWorkflow, transitionWorkflow } from '@plone/volto/actions'; import { ModalForm } from '@plone/volto/components'; @@ -37,158 +32,96 @@ const messages = defineMessages({ }, }); -/** - * ContentsWorkflowModal class. - * @class ContentsWorkflowModal - * @extends Component - */ -class ContentsWorkflowModal extends Component { - /** - * Property types. - * @property {Object} propTypes Property types. - * @static - */ - static propTypes = { - getWorkflow: PropTypes.func.isRequired, - transitionWorkflow: PropTypes.func.isRequired, - items: PropTypes.arrayOf(PropTypes.string).isRequired, - request: PropTypes.shape({ - loading: PropTypes.bool, - loaded: PropTypes.bool, - }).isRequired, - workflows: PropTypes.arrayOf( - PropTypes.shape({ - transition: PropTypes.shape({ - '@id': PropTypes.string, - title: PropTypes.string, - }), - }), - ).isRequired, - open: PropTypes.bool.isRequired, - onOk: PropTypes.func.isRequired, - onCancel: PropTypes.func.isRequired, - }; - - /** - * Constructor - * @method constructor - * @param {Object} props Component properties - * @constructs ContentsUploadModal - */ - constructor(props) { - super(props); - this.onSubmit = this.onSubmit.bind(this); - } +const ContentsWorkflowModal = (props) => { + const { onOk, items, open, onCancel } = props; + const intl = useIntl(); + const dispatch = useDispatch(); + const request = useSelector((state) => state.workflow.transition); + const workflows = useSelector( + (state) => state.workflow.multiple, + shallowEqual, + ); + const prevrequestloading = usePrevious(request.loading); - componentDidMount() { - this.props.getWorkflow(this.props.items); - } + useEffect(() => { + dispatch(getWorkflow(items)); + }, [dispatch, items]); - /** - * Component will receive props - * @method componentWillReceiveProps - * @param {Object} nextProps Next properties - * @returns {undefined} - */ - UNSAFE_componentWillReceiveProps(nextProps) { - if (this.props.request.loading && nextProps.request.loaded) { - this.props.onOk(); + useEffect(() => { + if (prevrequestloading && request.loaded) { + onOk(); } - } + }, [onOk, prevrequestloading, request.loaded]); - /** - * Submit handler - * @method onSubmit - * @param {string} state New state - * @returns {undefined} - */ - onSubmit({ state, include_children }) { - if (!state) { - return; - } - - this.props.transitionWorkflow( - filter( - map( - concat( - ...map(this.props.workflows, (workflow) => workflow.transitions), + const onSubmit = useCallback( + ({ state, include_children }) => { + if (!state) { + return; + } + dispatch( + transitionWorkflow( + filter( + map( + concat(...map(workflows, (workflow) => workflow.transitions)), + (item) => item['@id'], + ), + (x) => last(x.split('/')) === state, ), - (item) => item['@id'], + include_children, ), - (x) => last(x.split('/')) === state, - ), - include_children, - ); - } + ); + }, + [dispatch, workflows], + ); - /** - * Render method. - * @method render - * @returns {string} Markup for the component. - */ - render() { - return ( - this.props.open && - this.props.workflows.length > 0 && ( - workflow.transitions, - ), - ), - (x) => x.title, - ), - (y) => [last(y['@id'].split('/')), y.title], - ), - }, - include_children: { - title: this.props.intl.formatMessage( - messages.includeChildrenTitle, + return ( + open && + workflows.length > 0 && ( + workflow.transitions)), + (x) => x.title, ), - type: 'boolean', - }, + (y) => [last(y['@id'].split('/')), y.title], + ), }, - required: [], - }} - /> - ) - ); - } -} + include_children: { + title: intl.formatMessage(messages.includeChildrenTitle), + type: 'boolean', + }, + }, + required: [], + }} + /> + ) + ); +}; + +ContentsWorkflowModal.propTypes = { + items: PropTypes.arrayOf(PropTypes.string).isRequired, + open: PropTypes.bool.isRequired, + onOk: PropTypes.func.isRequired, + onCancel: PropTypes.func.isRequired, +}; -export default compose( - injectIntl, - connect( - (state) => ({ - request: state.workflow.transition, - workflows: state.workflow.multiple, - }), - { getWorkflow, transitionWorkflow }, - ), -)(ContentsWorkflowModal); +export default ContentsWorkflowModal;