Refactor settings store init to use new api

[MAILPOET-5102]

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(<Entry />, container);
 }

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<Key extends keyof Selectors>(
   deps: any[] = [], // eslint-disable-line @typescript-eslint/no-explicit-any
 ): ExcludeFirstParam<Selectors[Key]> {
   return useSelect((select) => {
-    const selects = select(STORE_NAME);
+    const selects = select(store);
     return selects[key].bind(selects);
   }, deps);
 }

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) =>
+export const initStore = () => {
-  registerStore(STORE_NAME, {
+  const store = createReduxStore(STORE_NAME, {
-    reducer: createReducer(makeDefaultState(window)),
+    reducer: createReducer(makeDefaultState()),
     actions,
     selectors,
     controls,
     resolvers: {},
   });
+  register(store);
+  return store;
+};
+
+export const store: ReturnType<typeof initStore> = {
+  name: STORE_NAME,
+  instantiate: (registry) => initStore().instantiate(registry),
+};

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(
+  const data = normalizeSettings(window.mailpoet_settings);
-    window.mailpoet_settings as Record<string, unknown>,
-  );
   const originalData = data;
   const flags = {
     error: false,

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<string, unknown>;
+  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[] }

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(<App />, container);
 }