Save active tab in email editor store

[MAILPOET-5638]

mailpoet/assets/js/src/email-editor/engine/components/sidebar/header.tsx

@@ -1,32 +1,35 @@
-import classnames from 'classnames';
-import { __ } from '@wordpress/i18n';
-import { useEffect } from '@wordpress/element';
-import { useDispatch, useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import classnames from 'classnames';
 import {
-  mainSidebarEmailKey,
+  mainSidebarBlockTab,
-  mainSidebarBlockKey,
+  mainSidebarEmailTab,
   storeName,
 } from '../../store';
 
-type Props = {
+export function Header() {
-  sidebarKey: string;
+  const { toggleSettingsSidebarActiveTab } = useDispatch(storeName);
-};
-
-export function Header({ sidebarKey }: Props) {
-  const { openSidebar } = useDispatch(storeName);
 
   const selectedBlockId = useSelect(
     (select) => select(blockEditorStore).getSelectedBlockClientId(),
     [],
   );
 
+  const activeTab = useSelect(
+    (select) => select(storeName).getSettingsSidebarActiveTab(),
+    [],
+  );
+
   // Switch tab based on selected block.
   useEffect(() => {
-    void openSidebar(
+    if (selectedBlockId) {
-      selectedBlockId ? mainSidebarBlockKey : mainSidebarEmailKey,
+      void toggleSettingsSidebarActiveTab(mainSidebarBlockTab);
-    );
+    } else {
-  }, [selectedBlockId, openSidebar]);
+      void toggleSettingsSidebarActiveTab(mainSidebarEmailTab);
+    }
+  }, [selectedBlockId, toggleSettingsSidebarActiveTab]);
 
   return (
     <div className="components-panel__header interface-complementary-area-header edit-post-sidebar__panel-tabs">
@@ -34,11 +37,11 @@ export function Header({ sidebarKey }: Props) {
         <li>
           <button
             onClick={() => {
-              void openSidebar(mainSidebarEmailKey);
+              void toggleSettingsSidebarActiveTab(mainSidebarEmailTab);
             }}
             className={classnames(
               'components-button edit-post-sidebar__panel-tab',
-              { 'is-active': sidebarKey === mainSidebarEmailKey },
+              { 'is-active': activeTab === mainSidebarEmailTab },
             )}
             data-automation-id="email_settings_tab"
             type="button"
@@ -49,11 +52,11 @@ export function Header({ sidebarKey }: Props) {
         <li>
           <button
             onClick={() => {
-              void openSidebar(mainSidebarBlockKey);
+              void toggleSettingsSidebarActiveTab(mainSidebarBlockTab);
             }}
             className={classnames(
               'components-button edit-post-sidebar__panel-tab',
-              { 'is-active': sidebarKey === mainSidebarBlockKey },
+              { 'is-active': activeTab === mainSidebarBlockTab },
             )}
             data-automation-id="mailpoet_block_settings_tab"
             type="button"

mailpoet/assets/js/src/email-editor/engine/components/sidebar/sidebar.tsx

@@ -2,16 +2,14 @@ import { Panel } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { BlockInspector } from '@wordpress/block-editor';
-import {
+import { ComplementaryArea } from '@wordpress/interface';
-  ComplementaryArea,
-  store as interfaceStore,
-} from '@wordpress/interface';
 import { ComponentProps } from 'react';
 import { drawerRight } from '@wordpress/icons';
 import {
   storeName,
-  mainSidebarEmailKey,
+  mainSidebarEmailTab,
-  mainSidebarBlockKey,
+  mainSidebarBlockTab,
+  mainSidebarId,
 } from '../../store';
 import { Header } from './header';
 import { EmailSettings } from './email-settings';
@@ -19,25 +17,24 @@ import { EmailSettings } from './email-settings';
 type Props = ComponentProps<typeof ComplementaryArea>;
 
 export function Sidebar(props: Props): JSX.Element {
-  const { sidebarKey } = useSelect((select) => ({
+  const activeTab = useSelect(
-    sidebarKey:
+    (select) => select(storeName).getSettingsSidebarActiveTab(),
-      select(interfaceStore).getActiveComplementaryArea(storeName) ??
+    [],
-      mainSidebarEmailKey,
+  );
-  }));
 
   return (
     <ComplementaryArea
-      identifier={sidebarKey}
+      identifier={mainSidebarId}
       className="edit-post-sidebar"
-      header={<Header sidebarKey={sidebarKey} />}
+      header={<Header />}
       icon={drawerRight}
       scope={storeName}
       smallScreenTitle={__('No title', 'mailpoet')}
       isActiveByDefault
       {...props}
     >
-      {sidebarKey === mainSidebarEmailKey && <EmailSettings />}
+      {activeTab === mainSidebarEmailTab && <EmailSettings />}
-      {sidebarKey === mainSidebarBlockKey && (
+      {activeTab === mainSidebarBlockTab && (
         <Panel>
           <BlockInspector />
         </Panel>

mailpoet/assets/js/src/email-editor/engine/store/actions.ts

@@ -5,7 +5,7 @@ import { store as preferencesStore } from '@wordpress/preferences';
 import { store as noticesStore } from '@wordpress/notices';
 import { __ } from '@wordpress/i18n';
 import { apiFetch } from '@wordpress/data-controls';
-import { storeName, mainSidebarEmailKey } from './constants';
+import { storeName, mainSidebarEmailTab } from './constants';
 import { SendingPreviewStatus, State, Feature } from './types';
 
 export const toggleFeature =
@@ -47,7 +47,7 @@ export function updateSendPreviewEmail(toEmail: string) {
 }
 
 export const openSidebar =
-  (key = mainSidebarEmailKey) =>
+  (key = mainSidebarEmailTab) =>
   ({ registry }): unknown =>
     registry.dispatch(interfaceStore).enableComplementaryArea(storeName, key);
 
@@ -56,6 +56,13 @@ export const closeSidebar =
   ({ registry }): unknown =>
     registry.dispatch(interfaceStore).disableComplementaryArea(storeName);
 
+export function toggleSettingsSidebarActiveTab(activeTab: string) {
+  return {
+    type: 'TOGGLE_SETTINGS_SIDEBAR_ACTIVE_TAB',
+    state: { activeTab } as Partial<State['settingsSidebar']>,
+  } as const;
+}
+
 export function* saveEditedEmail() {
   const postId = select(storeName).getEmailPostId();
   // This returns a promise

mailpoet/assets/js/src/email-editor/engine/store/constants.ts

@@ -1,5 +1,5 @@
 export const storeName = 'email-editor/editor';
 
 export const mainSidebarId = 'email-editor/editor/main';
-export const mainSidebarEmailKey = 'email-editor/editor/main/email';
+export const mainSidebarEmailTab = 'email';
-export const mainSidebarBlockKey = 'email-editor/editor/main/block';
+export const mainSidebarBlockTab = 'block';

mailpoet/assets/js/src/email-editor/engine/store/initial-state.ts

@@ -1,3 +1,4 @@
+import { mainSidebarEmailTab } from './constants';
 import { State } from './types';
 import {
   getEditorLayout,
@@ -15,6 +16,9 @@ export function getInitialState(): State {
     listviewSidebar: {
       isOpened: false,
     },
+    settingsSidebar: {
+      activeTab: mainSidebarEmailTab,
+    },
     postId,
     editorSettings: getEditorSettings(),
     layoutStyles: getEmailLayoutStyles(),

mailpoet/assets/js/src/email-editor/engine/store/reducer.ts

@@ -31,6 +31,14 @@ export function reducer(state: State, action): State {
         ...state,
         preview: { ...state.preview, ...action.state },
       };
+    case 'TOGGLE_SETTINGS_SIDEBAR_ACTIVE_TAB':
+      return {
+        ...state,
+        settingsSidebar: {
+          ...state.settingsSidebar,
+          activeTab: action.state.activeTab,
+        },
+      };
     default:
       return state;
   }

mailpoet/assets/js/src/email-editor/engine/store/selectors.ts

@@ -111,6 +111,10 @@ export function isListviewSidebarOpened(state: State): boolean {
   return state.listviewSidebar.isOpened;
 }
 
+export function getSettingsSidebarActiveTab(state: State): string {
+  return state.settingsSidebar.activeTab;
+}
+
 export function getInitialEditorSettings(
   state: State,
 ): State['editorSettings'] {

mailpoet/assets/js/src/email-editor/engine/store/types.ts

@@ -48,6 +48,9 @@ export type State = {
   listviewSidebar: {
     isOpened: boolean;
   };
+  settingsSidebar: {
+    activeTab: string;
+  };
   postId: number;
   editorSettings: EmailEditorSettings;
   layoutStyles: EmailLayoutStyles;