Save active tab in email editor store

[MAILPOET-5638]
This commit is contained in:
Jan Lysý
2024-02-22 17:08:32 +01:00
committed by Jan Lysý
parent a7b67aa23b
commit b32922dfc8
8 changed files with 65 additions and 39 deletions

View File

@ -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,
mainSidebarBlockKey,
mainSidebarBlockTab,
mainSidebarEmailTab,
storeName,
} from '../../store';
type Props = {
sidebarKey: string;
};
export function Header({ sidebarKey }: Props) {
const { openSidebar } = useDispatch(storeName);
export function Header() {
const { toggleSettingsSidebarActiveTab } = 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(
selectedBlockId ? mainSidebarBlockKey : mainSidebarEmailKey,
);
}, [selectedBlockId, openSidebar]);
if (selectedBlockId) {
void toggleSettingsSidebarActiveTab(mainSidebarBlockTab);
} else {
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"

View File

@ -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 {
ComplementaryArea,
store as interfaceStore,
} from '@wordpress/interface';
import { ComplementaryArea } from '@wordpress/interface';
import { ComponentProps } from 'react';
import { drawerRight } from '@wordpress/icons';
import {
storeName,
mainSidebarEmailKey,
mainSidebarBlockKey,
mainSidebarEmailTab,
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) => ({
sidebarKey:
select(interfaceStore).getActiveComplementaryArea(storeName) ??
mainSidebarEmailKey,
}));
const activeTab = useSelect(
(select) => select(storeName).getSettingsSidebarActiveTab(),
[],
);
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 />}
{sidebarKey === mainSidebarBlockKey && (
{activeTab === mainSidebarEmailTab && <EmailSettings />}
{activeTab === mainSidebarBlockTab && (
<Panel>
<BlockInspector />
</Panel>

View File

@ -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

View File

@ -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 mainSidebarBlockKey = 'email-editor/editor/main/block';
export const mainSidebarEmailTab = 'email';
export const mainSidebarBlockTab = 'block';

View File

@ -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(),

View File

@ -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;
}

View File

@ -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'] {

View File

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