From 1b0497bad32c8a6be6d1b29aa6cb6294e722ae30 Mon Sep 17 00:00:00 2001
From: Rostislav Wolny <rosta@mailpoet.com>
Date: Tue, 26 Nov 2019 12:23:01 +0100
Subject: [PATCH] Refactor sidebar tabs from local state to store

[MAILPOET-2455]
---
 assets/js/src/form_editor/components/sidebar.jsx  | 15 +++++++++------
 assets/js/src/form_editor/store/actions.jsx       |  7 +++++++
 assets/js/src/form_editor/store/reducer.jsx       |  2 ++
 .../store/reducers/switchSidebarTab.jsx           |  7 +++++++
 assets/js/src/form_editor/store/selectors.jsx     |  3 +++
 assets/js/src/form_editor/store/store.jsx         |  3 +++
 6 files changed, 31 insertions(+), 6 deletions(-)
 create mode 100644 assets/js/src/form_editor/store/reducers/switchSidebarTab.jsx

diff --git a/assets/js/src/form_editor/components/sidebar.jsx b/assets/js/src/form_editor/components/sidebar.jsx
index 45f88a051d..abb6fd7fd8 100644
--- a/assets/js/src/form_editor/components/sidebar.jsx
+++ b/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"
             >
diff --git a/assets/js/src/form_editor/store/actions.jsx b/assets/js/src/form_editor/store/actions.jsx
index 506dc82b73..d06a944751 100644
--- a/assets/js/src/form_editor/store/actions.jsx
+++ b/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',
diff --git a/assets/js/src/form_editor/store/reducer.jsx b/assets/js/src/form_editor/store/reducer.jsx
index 861eab9db5..add0e00b4c 100644
--- a/assets/js/src/form_editor/store/reducer.jsx
+++ b/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;
   }
diff --git a/assets/js/src/form_editor/store/reducers/switchSidebarTab.jsx b/assets/js/src/form_editor/store/reducers/switchSidebarTab.jsx
new file mode 100644
index 0000000000..a9bd9483c2
--- /dev/null
+++ b/assets/js/src/form_editor/store/reducers/switchSidebarTab.jsx
@@ -0,0 +1,7 @@
+export default (state, action) => ({
+  ...state,
+  sidebar: {
+    ...state.sidebar,
+    activeTab: action.id,
+  },
+});
diff --git a/assets/js/src/form_editor/store/selectors.jsx b/assets/js/src/form_editor/store/selectors.jsx
index bff4be5946..e35a262b4d 100644
--- a/assets/js/src/form_editor/store/selectors.jsx
+++ b/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;
+  },
 };
diff --git a/assets/js/src/form_editor/store/store.jsx b/assets/js/src/form_editor/store/store.jsx
index a8a6df0854..997b9fc070 100644
--- a/assets/js/src/form_editor/store/store.jsx
+++ b/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 = {