Refactor sidebar tabs from local state to store

[MAILPOET-2455]

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

@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { IconButton } from '@wordpress/components';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
@@ -29,9 +29,12 @@ SidebarHeader.propTypes = {
 };
 
 export default () => {
-  const [activeTab, setActiveTab] = useState('form');
+  const activeTab = useSelect(
+    (select) => select('mailpoet-form-editor').getSidebarActiveTab(),
+    []
+  );
 
-  const { toggleSidebar } = useDispatch('mailpoet-form-editor');
+  const { toggleSidebar, switchSidebarTab } = useDispatch('mailpoet-form-editor');
 
   return (
     <div className="edit-post-sidebar">
@@ -39,7 +42,7 @@ export default () => {
         <ul>
           <li>
             <button
-              onClick={() => setActiveTab('form')}
+              onClick={() => switchSidebarTab('form')}
               className={classnames('edit-post-sidebar__panel-tab', { 'is-active': activeTab === 'form' })}
               type="button"
             >
@@ -48,7 +51,7 @@ export default () => {
           </li>
           <li>
             <button
-              onClick={() => setActiveTab('block')}
+              onClick={() => switchSidebarTab('block')}
               className={classnames('edit-post-sidebar__panel-tab', { 'is-active': activeTab === 'block' })}
               type="button"
             >

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

@@ -63,6 +63,13 @@ export function removeNotice(id) {
   };
 }
 
+export function switchSidebarTab(id) {
+  return {
+    type: 'SWITCH_SIDEBAR_TAB',
+    id,
+  };
+}
+
 export function* saveForm() {
   yield {
     type: 'SAVE_FORM',

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

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

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

@@ -0,0 +1,7 @@
+export default (state, action) => ({
+  ...state,
+  sidebar: {
+    ...state.sidebar,
+    activeTab: action.id,
+  },
+});

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

@@ -38,4 +38,7 @@ export default {
   getFormErrors(state) {
     return state.formErrors;
   },
+  getSidebarActiveTab(state) {
+    return state.sidebar.activeTab;
+  },
 };

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

@@ -18,6 +18,9 @@ const defaultState = {
   pages: window.mailpoet_form_pages,
   isFormSaving: false,
   notices: [],
+  sidebar: {
+    activeTab: 'form',
+  },
 };
 
 const config = {