From a94cf7e1623e8275e3d3cd3b2bc4a4ac70cabbc2 Mon Sep 17 00:00:00 2001
From: Rostislav Wolny <rosta@mailpoet.com>
Date: Thu, 24 Oct 2019 13:25:43 +0200
Subject: [PATCH] Add simple store with sidebar toggle action

[MAILPOET-2450]
---
 .../js/src/form_editor/components/editor.jsx  | 35 ++++++++++-----
 .../js/src/form_editor/components/header.jsx  | 45 +++++++++++--------
 .../js/src/form_editor/components/sidebar.jsx |  6 ++-
 assets/js/src/form_editor/index.jsx           |  2 +
 assets/js/src/form_editor/store/actions.jsx   |  8 ++++
 assets/js/src/form_editor/store/index.jsx     | 14 ++++++
 assets/js/src/form_editor/store/reducer.jsx   | 15 +++++++
 assets/js/src/form_editor/store/selectors.jsx |  5 +++
 8 files changed, 99 insertions(+), 31 deletions(-)
 create mode 100644 assets/js/src/form_editor/store/actions.jsx
 create mode 100644 assets/js/src/form_editor/store/index.jsx
 create mode 100644 assets/js/src/form_editor/store/reducer.jsx
 create mode 100644 assets/js/src/form_editor/store/selectors.jsx

diff --git a/assets/js/src/form_editor/components/editor.jsx b/assets/js/src/form_editor/components/editor.jsx
index 9642d413d4..b0010cee88 100644
--- a/assets/js/src/form_editor/components/editor.jsx
+++ b/assets/js/src/form_editor/components/editor.jsx
@@ -1,20 +1,31 @@
 import React from 'react';
+import { useSelect } from '@wordpress/data';
+import classnames from 'classnames';
 import Header from './header.jsx';
 import Sidebar from './sidebar.jsx';
 import FormTitle from './form_title.jsx';
 
-export default () => (
-  <div className="edit-post-layout is-sidebar-opened">
-    <Header />
-    <div className="edit-post-layout__content">
-      <div className="edit-post-visual-editor editor-styles-wrapper">
-        <div className="editor-writing-flow block-editor-writing-flow">
-          <FormTitle />
+export default () => {
+  const sidebarOpened = useSelect(
+    (select) => select('mailpoet-form-editor').getSidebarOpened(),
+    []
+  );
+  const layoutClass = classnames('edit-post-layout', {
+    'is-sidebar-opened': sidebarOpened,
+  });
+  return (
+    <div className={layoutClass}>
+      <Header />
+      <div className="edit-post-layout__content">
+        <div className="edit-post-visual-editor editor-styles-wrapper">
+          <div className="editor-writing-flow block-editor-writing-flow">
+            <FormTitle />
+          </div>
         </div>
       </div>
+      <div>
+        { sidebarOpened ? <Sidebar /> : '' }
+      </div>
     </div>
-    <div>
-      <Sidebar />
-    </div>
-  </div>
-);
+  );
+};
diff --git a/assets/js/src/form_editor/components/header.jsx b/assets/js/src/form_editor/components/header.jsx
index 13d08d856f..e6b6e509e1 100644
--- a/assets/js/src/form_editor/components/header.jsx
+++ b/assets/js/src/form_editor/components/header.jsx
@@ -1,22 +1,31 @@
 import React from 'react';
 import { IconButton } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
 
-export default () => (
-  <div className="edit-post-header">
-    <div className="edit-post-header-toolbar" />
-    <div className="edit-post-header__settings">
-      <button
-        type="button"
-        className="components-button editor-post-publish-panel__toggle is-button is-primary"
-      >
-        Save
-      </button>
-      <IconButton
-        icon="admin-generic"
-        label="Settings"
-        onClick={() => null}
-        isToggled
-      />
+export default () => {
+  const sidebarOpened = useSelect(
+    (select) => select('mailpoet-form-editor').getSidebarOpened(),
+    []
+  );
+  const { toggleSidebar } = useDispatch('mailpoet-form-editor');
+  return (
+    <div className="edit-post-header">
+      <div className="edit-post-header-toolbar" />
+      <div className="edit-post-header__settings">
+        <button
+          type="button"
+          className="components-button editor-post-publish-panel__toggle is-button is-primary"
+        >
+          Save
+        </button>
+        <IconButton
+          icon="admin-generic"
+          label="Settings"
+          labelPosition="down"
+          onClick={() => toggleSidebar(!sidebarOpened)}
+          isToggled={sidebarOpened}
+        />
+      </div>
     </div>
-  </div>
-);
+  );
+};
diff --git a/assets/js/src/form_editor/components/sidebar.jsx b/assets/js/src/form_editor/components/sidebar.jsx
index d2a08175fe..dc6267eff4 100644
--- a/assets/js/src/form_editor/components/sidebar.jsx
+++ b/assets/js/src/form_editor/components/sidebar.jsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { IconButton } from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
 import PropTypes from 'prop-types';
 import BlockSettings from './block_settings.jsx';
 import FormSettings from './form_settings.jsx';
@@ -26,9 +27,12 @@ SidebarHeader.propTypes = {
 
 export default () => {
   const [activeTab, setActiveTab] = useState('form');
+
+  const { toggleSidebar } = useDispatch('mailpoet-form-editor');
+
   return (
     <div className="edit-post-sidebar">
-      <SidebarHeader>
+      <SidebarHeader closeSidebar={() => toggleSidebar(false)}>
         <ul>
           <li>
             <button
diff --git a/assets/js/src/form_editor/index.jsx b/assets/js/src/form_editor/index.jsx
index a71fd09492..f18acc9b2d 100644
--- a/assets/js/src/form_editor/index.jsx
+++ b/assets/js/src/form_editor/index.jsx
@@ -1,10 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Editor from './components/editor.jsx';
+import initStore from './store/index.jsx';
 
 const appElement = document.querySelector('#mailpoet_form_edit');
 
 if (appElement) {
+  initStore();
   ReactDOM.render(
     <Editor />,
     appElement
diff --git a/assets/js/src/form_editor/store/actions.jsx b/assets/js/src/form_editor/store/actions.jsx
new file mode 100644
index 0000000000..41f90b0385
--- /dev/null
+++ b/assets/js/src/form_editor/store/actions.jsx
@@ -0,0 +1,8 @@
+export default {
+  toggleSidebar(toggleTo) {
+    return {
+      type: 'TOGGLE_SIDEBAR',
+      toggleTo,
+    };
+  },
+};
diff --git a/assets/js/src/form_editor/store/index.jsx b/assets/js/src/form_editor/store/index.jsx
new file mode 100644
index 0000000000..6216dd69f2
--- /dev/null
+++ b/assets/js/src/form_editor/store/index.jsx
@@ -0,0 +1,14 @@
+import { registerStore } from '@wordpress/data';
+import actions from './actions.jsx';
+import reducer from './reducer.jsx';
+import selectors from './selectors.jsx';
+
+const config = {
+  reducer,
+  actions,
+  selectors,
+  controls: {},
+  resolvers: {},
+};
+
+export default () => (registerStore('mailpoet-form-editor', config));
diff --git a/assets/js/src/form_editor/store/reducer.jsx b/assets/js/src/form_editor/store/reducer.jsx
new file mode 100644
index 0000000000..c3507f211a
--- /dev/null
+++ b/assets/js/src/form_editor/store/reducer.jsx
@@ -0,0 +1,15 @@
+const DEFAULT_STATE = {
+  sidebarOpened: true,
+};
+
+export default (state = DEFAULT_STATE, action) => {
+  switch (action.type) {
+    case 'TOGGLE_SIDEBAR':
+      return {
+        ...state,
+        sidebarOpened: action.toggleTo,
+      };
+    default:
+      return state;
+  }
+};
diff --git a/assets/js/src/form_editor/store/selectors.jsx b/assets/js/src/form_editor/store/selectors.jsx
new file mode 100644
index 0000000000..fff2b1f327
--- /dev/null
+++ b/assets/js/src/form_editor/store/selectors.jsx
@@ -0,0 +1,5 @@
+export default {
+  getSidebarOpened(state) {
+    return state.sidebarOpened;
+  },
+};