Refactor inserter sidebar open state to form editor store

[MAILPOET-3654]

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import '@wordpress/core-data';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
@@ -39,11 +39,16 @@ import Fullscreen from './fullscreen';
  * https://developer.wordpress.org/block-editor/packages/packages-block-editor/
  */
 export default () => {
-  const [isInserterOpen, setIsInserterOpen] = useState(false);
   const sidebarOpened = useSelect(
     (sel) => sel('mailpoet-form-editor').getSidebarOpened(),
     []
   );
+
+  const isInserterOpened = useSelect(
+    (sel) => sel('mailpoet-form-editor').isInserterOpened(),
+    []
+  );
+
   const formBlocks = useSelect(
     (sel) => sel('mailpoet-form-editor').getFormBlocks(),
     []
@@ -67,7 +72,7 @@ export default () => {
     }
   );
 
-  const { blocksChangedInBlockEditor } = useDispatch('mailpoet-form-editor');
+  const { blocksChangedInBlockEditor, toggleInserter } = useDispatch('mailpoet-form-editor');
 
   // Editor settings - see @wordpress/block-editor/src/store/defaults.js
   const editorSettings = {
@@ -82,7 +87,7 @@ export default () => {
     __experimentalFetchLinkSuggestions: fetchLinkSuggestions,
     __experimentalBlockPatterns: [], // we don't want patterns in our inserter
     __experimentalBlockPatternCategories: [],
-    __experimentalSetIsInserterOpened: setIsInserterOpen,
+    __experimentalSetIsInserterOpened: toggleInserter,
   };
 
   return (
@@ -93,8 +98,8 @@ export default () => {
           <div className="interface-interface-skeleton__editor">
             <div className="interface-interface-skeleton__header">
               <Header
-                isInserterOpened={isInserterOpen}
-                setIsInserterOpened={setIsInserterOpen}
+                isInserterOpened={isInserterOpened}
+                setIsInserterOpened={toggleInserter}
               />
             </div>
             <div className="interface-interface-skeleton__body">
@@ -105,9 +110,9 @@ export default () => {
                 settings={editorSettings}
                 useSubRegistry={false}
               >
-                {(isInserterOpen) && (
+                {(isInserterOpened) && (
                   <div className="interface-interface-skeleton__secondary-sidebar">
-                    <Inserter setIsInserterOpened={setIsInserterOpen} />
+                    <Inserter setIsInserterOpened={toggleInserter} />
                   </div>
                 )}
                 <div className="interface-interface-skeleton__content">

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

@@ -10,6 +10,13 @@ export function toggleSidebar(toggleTo) {
   };
 }
 
+export function toggleInserter(toggleTo) {
+  return {
+    type: 'TOGGLE_INSERTER_SIDEBAR',
+    toggleTo: !!toggleTo,
+  };
+}
+
 export function toggleForm(enabled) {
   if (enabled) {
     return {

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

@@ -19,7 +19,7 @@ import saveFormDone from './reducers/save_form_done.jsx';
 import saveFormFailed from './reducers/save_form_failed.jsx';
 import saveFormStartedFactory from './reducers/save_form_started.jsx';
 import switchDefaultSidebarTab from './reducers/switch_sidebar_tab.jsx';
-import toggleSidebar from './reducers/toggle_sidebar.jsx';
+import { toggleSidebar, toggleInserterSidebar } from './reducers/toggle_sidebar.ts';
 import toggleSidebarPanel from './reducers/toggle_sidebar_panel.jsx';
 import changeFormBlocks from './reducers/change_form_blocks.jsx';
 import saveCustomFieldDone from './reducers/save_custom_field_done.jsx';
@@ -72,6 +72,7 @@ const mainReducer = (state, action) => {
     case 'SAVE_CUSTOM_FIELD_STARTED': return saveCustomFieldStarted(state);
     case 'SWITCH_DEFAULT_SIDEBAR_TAB': return switchDefaultSidebarTab(state, action);
     case 'TOGGLE_SIDEBAR': return toggleSidebar(state, action);
+    case 'TOGGLE_INSERTER_SIDEBAR': return toggleInserterSidebar(state, action);
     case 'TOGGLE_SIDEBAR_PANEL': return toggleSidebarPanel(state, action);
     case 'DELETE_CUSTOM_FIELD_STARTED': return customFieldDeleteStart(state, action);
     case 'DELETE_CUSTOM_FIELD_DONE': return customFieldDeleteDone(state, action);

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

@@ -1,4 +0,0 @@
-export default (state, action) => ({
-  ...state,
-  sidebarOpened: action.toggleTo,
-});

assets/js/src/form_editor/store/reducers/toggle_sidebar.ts

@@ -0,0 +1,14 @@
+type ToggleAction = {
+  type: string;
+  toggleTo: boolean;
+}
+
+export const toggleSidebar = (state, action: ToggleAction) => ({
+  ...state,
+  sidebarOpened: action.toggleTo,
+});
+
+export const toggleInserterSidebar = (state, action: ToggleAction) => ({
+  ...state,
+  isInserterOpened: action.toggleTo,
+});

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

@@ -22,6 +22,9 @@ export default {
   isFullscreenEnabled(state) {
     return state.fullscreenStatus;
   },
+  isInserterOpened(state) {
+    return state.isInserterOpened;
+  },
   getSidebarOpened(state) {
     return state.sidebarOpened;
   },

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

@@ -64,6 +64,7 @@ export default () => {
     isFormSaving: false,
     isCustomFieldSaving: false,
     isCustomFieldCreating: false,
+    isInserterOpened: false,
     notices: [],
     hasUnsavedChanges: false,
     sidebar: {