Refactor sidebar panels state to store

[MAILPOET-2455]

assets/js/src/form_editor/components/form_settings/basic_settings_panel.jsx

@@ -10,9 +10,10 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import React from 'react';
 import MailPoet from 'mailpoet';
 import classnames from 'classnames';
+import PropTypes from 'prop-types';
 import Selection from '../../../form/fields/selection.jsx';
 
-export default () => {
+const BasicSettingsPanel = ({ onToggle, isOpened }) => {
   const settings = useSelect(
     (select) => select('mailpoet-form-editor').getFormSettings(),
     []
@@ -68,7 +69,7 @@ export default () => {
   const shouldDisplayMissingListError = missingListError && !selectedSegments.length;
   return (
     <Panel>
-      <PanelBody title={MailPoet.I18n.t('formSettings')}>
+      <PanelBody title={MailPoet.I18n.t('formSettings')} opened={isOpened} onToggle={onToggle}>
         <BaseControl
           label={MailPoet.I18n.t('settingsListLabel')}
           className={classnames({ 'mailpoet-form-missing-lists': shouldDisplayMissingListError })}
@@ -125,3 +126,10 @@ export default () => {
     </Panel>
   );
 };
+
+BasicSettingsPanel.propTypes = {
+  onToggle: PropTypes.func.isRequired,
+  isOpened: PropTypes.bool.isRequired,
+};
+
+export default BasicSettingsPanel;

assets/js/src/form_editor/components/form_settings/custom_css_panel.jsx

@@ -5,9 +5,10 @@ import {
 } from '@wordpress/components';
 import MailPoet from 'mailpoet';
 import { useSelect, useDispatch } from '@wordpress/data';
+import PropTypes from 'prop-types';
 import CodeMirror from './codemirror_wrap.jsx';
 
-export default () => {
+const CustomCssPanel = ({ onToggle, isOpened }) => {
   const styles = useSelect(
     (select) => select('mailpoet-form-editor').getFormStyles(),
     []
@@ -17,9 +18,17 @@ export default () => {
 
   return (
     <Panel>
-      <PanelBody title={MailPoet.I18n.t('customCss')} initialOpen={false}>
+      <PanelBody title={MailPoet.I18n.t('customCss')} opened={isOpened} onToggle={onToggle}>
         <CodeMirror value={styles} onChange={changeFormStyles} />
       </PanelBody>
     </Panel>
   );
 };
+
+
+CustomCssPanel.propTypes = {
+  onToggle: PropTypes.func.isRequired,
+  isOpened: PropTypes.bool.isRequired,
+};
+
+export default CustomCssPanel;

assets/js/src/form_editor/components/form_settings/form_placement_panel.jsx

@@ -8,8 +8,9 @@ import { useSelect } from '@wordpress/data';
 import MailPoet from 'mailpoet';
 import ReactStringReplace from 'react-string-replace';
 import { curry } from 'lodash';
+import PropTypes from 'prop-types';
 
-export default () => {
+const FormPlacementPanel = ({ onToggle, isOpened }) => {
   const [copyAreaContent, setCopyAreaContent] = useState(null);
 
   const formExports = useSelect(
@@ -70,7 +71,7 @@ export default () => {
 
   return (
     <Panel>
-      <PanelBody title={MailPoet.I18n.t('formPlacement')} initialOpen={false}>
+      <PanelBody title={MailPoet.I18n.t('formPlacement')} opened={isOpened} onToggle={onToggle}>
         <p>{addFormWidgetHint}</p>
         <p>{addFormShortcodeHint}</p>
         <p>{addFormPhpIframeHint}</p>
@@ -79,3 +80,10 @@ export default () => {
     </Panel>
   );
 };
+
+FormPlacementPanel.propTypes = {
+  onToggle: PropTypes.func.isRequired,
+  isOpened: PropTypes.bool.isRequired,
+};
+
+export default FormPlacementPanel;

assets/js/src/form_editor/components/form_settings/form_settings.jsx

@@ -1,13 +1,32 @@
 import React from 'react';
 
+import { useDispatch, useSelect } from '@wordpress/data';
+import { partial } from 'lodash';
 import BasicSettingsPanel from './basic_settings_panel.jsx';
 import FormPlacementPanel from './form_placement_panel.jsx';
 import CustomCssPanel from './custom_css_panel.jsx';
 
-export default () => (
+export default () => {
-  <>
+  const { toggleSidebarPanel } = useDispatch('mailpoet-form-editor');
-    <BasicSettingsPanel />
+  const openedPanels = useSelect(
-    <FormPlacementPanel />
+    (select) => select('mailpoet-form-editor').getSidebarOpenedPanels(),
-    <CustomCssPanel />
+    []
-  </>
+  );
-);
+
+  return (
+    <>
+      <BasicSettingsPanel
+        isOpened={openedPanels.includes('basic-settings')}
+        onToggle={partial(toggleSidebarPanel, 'basic-settings')}
+      />
+      <FormPlacementPanel
+        isOpened={openedPanels.includes('form-placement')}
+        onToggle={partial(toggleSidebarPanel, 'form-placement')}
+      />
+      <CustomCssPanel
+        isOpened={openedPanels.includes('custom-css')}
+        onToggle={partial(toggleSidebarPanel, 'custom-css')}
+      />
+    </>
+  );
+};

assets/js/src/form_editor/store/actions.jsx

@@ -70,6 +70,14 @@ export function switchSidebarTab(id) {
   };
 }
 
+export function toggleSidebarPanel(id, isOpened = undefined) {
+  return {
+    type: 'TOGGLE_SIDEBAR_PANEL',
+    id,
+    isOpened,
+  };
+}
+
 export function* saveForm() {
   yield {
     type: 'SAVE_FORM',

assets/js/src/form_editor/store/reducer.jsx

@@ -7,6 +7,7 @@ import saveFormDone from './reducers/saveFormDone.jsx';
 import removeNotice from './reducers/removeNotice.jsx';
 import changeFormSettings from './reducers/changeFormSettings.jsx';
 import switchSidebarTab from './reducers/switchSidebarTab.jsx';
+import toggleSidebarPanel from './reducers/toggleSidebarPanel.jsx';
 
 export default (defaultState) => (state = defaultState, action) => {
   switch (action.type) {
@@ -19,6 +20,7 @@ export default (defaultState) => (state = defaultState, action) => {
     case 'TOGGLE_SIDEBAR': return toggleSidebar(state, action);
     case 'CHANGE_FORM_SETTINGS': return changeFormSettings(state, action);
     case 'SWITCH_SIDEBAR_TAB': return switchSidebarTab(state, action);
+    case 'TOGGLE_SIDEBAR_PANEL': return toggleSidebarPanel(state, action);
     default:
       return state;
   }

assets/js/src/form_editor/store/reducers/toggleSidebarPanel.jsx

@@ -0,0 +1,20 @@
+import { remove } from 'lodash';
+
+export default (state, action) => {
+  const openedPanels = [...state.sidebar.openedPanels];
+  const isOpenedCurrent = openedPanels.includes(action.id);
+  const isOpenedFinal = action.isOpened !== undefined ? action.isOpened : !isOpenedCurrent;
+  if (isOpenedFinal && !isOpenedCurrent) {
+    openedPanels.push(action.id);
+  }
+  if (!isOpenedFinal && isOpenedCurrent) {
+    remove(openedPanels, (item) => item === action.id);
+  }
+  return {
+    ...state,
+    sidebar: {
+      ...state.sidebar,
+      openedPanels,
+    },
+  };
+};

assets/js/src/form_editor/store/selectors.jsx

@@ -41,4 +41,7 @@ export default {
   getSidebarActiveTab(state) {
     return state.sidebar.activeTab;
   },
+  getSidebarOpenedPanels(state) {
+    return state.sidebar.openedPanels;
+  },
 };

assets/js/src/form_editor/store/store.jsx

@@ -20,6 +20,7 @@ const defaultState = {
   notices: [],
   sidebar: {
     activeTab: 'form',
+    openedPanels: ['basic-settings'],
   },
 };