From ddb43a3d76651e4986c1f249ab5b32a533ebfbdd Mon Sep 17 00:00:00 2001 From: Rostislav Wolny Date: Thu, 9 Mar 2023 13:54:08 +0100 Subject: [PATCH] Refactor settings store init to use new api [MAILPOET-5102] --- mailpoet/assets/js/src/settings/index.tsx | 2 +- .../src/settings/store/hooks/useSelector.ts | 4 ++-- .../assets/js/src/settings/store/index.ts | 16 +++++++++++---- .../src/settings/store/make_default_state.ts | 16 ++++++++++----- .../assets/js/src/settings/store/types.ts | 20 +++++++++++++++++++ mailpoet/assets/js/src/wizard/wizard.tsx | 2 +- 6 files changed, 47 insertions(+), 13 deletions(-) diff --git a/mailpoet/assets/js/src/settings/index.tsx b/mailpoet/assets/js/src/settings/index.tsx index 677b60cfb9..c653569a2e 100644 --- a/mailpoet/assets/js/src/settings/index.tsx +++ b/mailpoet/assets/js/src/settings/index.tsx @@ -14,6 +14,6 @@ function Entry() { const container = document.getElementById('settings_container'); if (container) { - initStore(window); + initStore(); ReactDOM.render(, container); } diff --git a/mailpoet/assets/js/src/settings/store/hooks/useSelector.ts b/mailpoet/assets/js/src/settings/store/hooks/useSelector.ts index 96116bffde..6109a29b14 100644 --- a/mailpoet/assets/js/src/settings/store/hooks/useSelector.ts +++ b/mailpoet/assets/js/src/settings/store/hooks/useSelector.ts @@ -1,7 +1,7 @@ import { useSelect } from '@wordpress/data'; -import { STORE_NAME } from '../store_name'; import * as selectors from '../selectors'; import { ExcludeFirstParam } from './types'; +import { store } from '../index'; type Selectors = typeof selectors; @@ -10,7 +10,7 @@ export function useSelector( deps: any[] = [], // eslint-disable-line @typescript-eslint/no-explicit-any ): ExcludeFirstParam { return useSelect((select) => { - const selects = select(STORE_NAME); + const selects = select(store); return selects[key].bind(selects); }, deps); } diff --git a/mailpoet/assets/js/src/settings/store/index.ts b/mailpoet/assets/js/src/settings/store/index.ts index 46c65a8dff..89071c03ba 100644 --- a/mailpoet/assets/js/src/settings/store/index.ts +++ b/mailpoet/assets/js/src/settings/store/index.ts @@ -1,4 +1,4 @@ -import { registerStore } from '@wordpress/data'; +import { createReduxStore, register } from '@wordpress/data'; import * as actions from './actions'; import * as selectors from './selectors'; import * as controls from './controls'; @@ -13,11 +13,19 @@ declare module '@wordpress/data' { } // eslint-disable-next-line @typescript-eslint/no-explicit-any -export const initStore = (window: any) => - registerStore(STORE_NAME, { - reducer: createReducer(makeDefaultState(window)), +export const initStore = () => { + const store = createReduxStore(STORE_NAME, { + reducer: createReducer(makeDefaultState()), actions, selectors, controls, resolvers: {}, }); + register(store); + return store; +}; + +export const store: ReturnType = { + name: STORE_NAME, + instantiate: (registry) => initStore().instantiate(registry), +}; diff --git a/mailpoet/assets/js/src/settings/store/make_default_state.ts b/mailpoet/assets/js/src/settings/store/make_default_state.ts index 03ec1097fe..2f9ecba4ec 100644 --- a/mailpoet/assets/js/src/settings/store/make_default_state.ts +++ b/mailpoet/assets/js/src/settings/store/make_default_state.ts @@ -1,7 +1,15 @@ import { MailPoet } from 'mailpoet'; -import { MssStatus, PremiumStatus, State, TestEmailState } from './types'; +import { + MssStatus, + PremiumStatus, + State, + TestEmailState, + SettingsWindow, +} from './types'; import { normalizeSettings } from './normalize_settings'; +declare let window: SettingsWindow; + function getPremiumStatus(keyValid, premiumInstalled): PremiumStatus { const pluginActive = !!MailPoet.premiumVersion; if (!keyValid) { @@ -28,15 +36,13 @@ export function getMssStatus(keyValid, data): MssStatus { } // eslint-disable-next-line @typescript-eslint/no-explicit-any -export function makeDefaultState(window: any): State { +export function makeDefaultState(): State { const pages = window.mailpoet_pages; const paths = window.mailpoet_paths; const segments = window.mailpoet_segments; const hosts = window.mailpoet_hosts; const save = { inProgress: false, error: null, hasUnsavedChanges: false }; - const data = normalizeSettings( - window.mailpoet_settings as Record, - ); + const data = normalizeSettings(window.mailpoet_settings); const originalData = data; const flags = { error: false, diff --git a/mailpoet/assets/js/src/settings/store/types.ts b/mailpoet/assets/js/src/settings/store/types.ts index cb3ce8aa99..6c46bcc675 100644 --- a/mailpoet/assets/js/src/settings/store/types.ts +++ b/mailpoet/assets/js/src/settings/store/types.ts @@ -270,6 +270,26 @@ export type State = { reEngagement: ReEngagement; }; +export type SettingsWindow = { + mailpoet_pages: Page[]; + mailpoet_paths: { + root: string; + plugin: string; + }; + mailpoet_segments: Segment[]; + mailpoet_hosts: Hosts; + mailpoet_settings: Record; + mailpoet_is_new_user: string; + mailpoet_woocommerce_active: string; + mailpoet_members_plugin_active: string; + mailpoet_built_in_captcha_supported: boolean; + mailpoet_mss_key_valid: string; + mailpoet_premium_key_valid: string; + mailpoet_premium_plugin_installed: string; + mailpoet_premium_plugin_download_url: string; + mailpoet_premium_plugin_activation_url: string; +}; + export type Action = // eslint-disable-next-line @typescript-eslint/no-explicit-any | { type: 'SET_SETTING'; value: any; path: string[] } diff --git a/mailpoet/assets/js/src/wizard/wizard.tsx b/mailpoet/assets/js/src/wizard/wizard.tsx index 0112236218..12ed302c51 100644 --- a/mailpoet/assets/js/src/wizard/wizard.tsx +++ b/mailpoet/assets/js/src/wizard/wizard.tsx @@ -36,6 +36,6 @@ function App(): JSX.Element { const container = document.getElementById('mailpoet-wizard-container'); if (container) { - initSettingsStore(window); + initSettingsStore(); ReactDOM.render(, container); }