From ab828b27087abbd0843fce1d07787eb6b0fa75f1 Mon Sep 17 00:00:00 2001 From: Jan Jakes Date: Mon, 9 May 2022 17:41:59 +0200 Subject: [PATCH] Convert form editor store to TypeScript [MAILPOET-4323] --- .../assets/js/src/form_editor/form_editor.jsx | 2 +- .../js/src/form_editor/store/state_types.ts | 124 ++++++++++++++++++ .../form_editor/store/{store.jsx => store.ts} | 15 ++- 3 files changed, 139 insertions(+), 2 deletions(-) rename mailpoet/assets/js/src/form_editor/store/{store.jsx => store.ts} (88%) diff --git a/mailpoet/assets/js/src/form_editor/form_editor.jsx b/mailpoet/assets/js/src/form_editor/form_editor.jsx index 52c51d0b88..dfab65eedf 100644 --- a/mailpoet/assets/js/src/form_editor/form_editor.jsx +++ b/mailpoet/assets/js/src/form_editor/form_editor.jsx @@ -4,7 +4,7 @@ import apiFetch from '@wordpress/api-fetch'; import { GlobalContext, useGlobalContextValue } from 'context/index.jsx'; import { Notices } from 'notices/notices.jsx'; import { Editor } from './components/editor.jsx'; -import { initStore } from './store/store.jsx'; +import { initStore } from './store/store'; import { initBlocks } from './blocks/blocks.jsx'; import { initHooks } from './hooks'; import { initTranslations } from './translations'; diff --git a/mailpoet/assets/js/src/form_editor/store/state_types.ts b/mailpoet/assets/js/src/form_editor/store/state_types.ts index 3286ebf22c..0b14ba2681 100644 --- a/mailpoet/assets/js/src/form_editor/store/state_types.ts +++ b/mailpoet/assets/js/src/form_editor/store/state_types.ts @@ -1,4 +1,128 @@ +import { FormSettingsType } from './form_data_types'; + export type BlockInsertionPoint = { rootClientId: string | undefined; insertionIndex: number | undefined; }; + +export interface FormEditorWindow extends Window { + mailpoet_custom_fields: { + id: number; + name: string; + type: string; + params: unknown; + created_at: string; + updated_at: string; + }[]; + mailpoet_form_data: { + id: number | null; + name: string; + body: unknown[] | null; + settings: FormSettingsType | null; + styles: string | null; + status: 'enabled' | 'disabled'; + created_at: { date: string; timezone_type: number; timezone: string }; + updated_at: { date: string; timezone_type: number; timezone: string }; + deleted_at: { + date: string; + timezone_type: number; + timezone: string; + } | null; + }; + mailpoet_date_types: { + label: string; + value: string; + }[]; + mailpoet_date_formats: { + year_month_day: string[]; + year_month: string[]; + year: string[]; + month: string[]; + }; + mailpoet_month_names: string[]; + mailpoet_form_edit_url: string; + mailpoet_form_exports: { + php: string; + iframe: string; + shortcode: string; + }; + mailpoet_form_preview_page: string; + mailpoet_form_segments: { + id: string; + name: string; + type: string; + subscribers: number; + }[]; + mailpoet_close_icons_url: string; + mailpoet_custom_fonts: string[]; + mailpoet_all_wp_posts: { id: string; name: string }[]; + mailpoet_all_wp_pages: { id: string; name: string }[]; + mailpoet_all_wp_categories: { id: string; name: string }[]; + mailpoet_all_wp_tags: { id: string; name: string }[]; + mailpoet_woocommerce_products: { id: string; name: string }[]; + mailpoet_woocommerce_categories: { id: string; name: string }[]; + mailpoet_woocommerce_tags: { id: string; name: string }[]; + mailpoet_tutorial_seen: '0' | '1'; + mailpoet_tutorial_url: string; + mailpoet_is_administrator: boolean; +} + +declare let window: FormEditorWindow; + +export type State = { + editorHistory: unknown[]; + editorHistoryOffset: number; + formBlocks: unknown[]; + formData: typeof window.mailpoet_form_data; + dateSettingData: { + dateTypes: typeof window.mailpoet_date_types; + dateFormats: typeof window.mailpoet_date_formats; + months: typeof window.mailpoet_month_names; + }; + sidebarOpened: boolean; + formExports: typeof window.mailpoet_form_exports; + formErrors: string[]; + segments: typeof window.mailpoet_form_segments; + customFields: typeof window.mailpoet_custom_fields; + isFormSaving: boolean; + isCustomFieldSaving: boolean; + isCustomFieldCreating: boolean; + isPreviewShown: boolean; + isPreviewReady: boolean; + isCustomFieldDeleting: boolean; + inserterPanel: BlockInsertionPoint; + notices: { + id: string; + content: string; + isDismissible: boolean; + status: string; + }[]; + hasUnsavedChanges: boolean; + sidebar: { + activeSidebar: string; + activeTab: string; + openedPanels: string[]; + }; + previewSettings: { + displayType: 'desktop' | 'mobile'; + formType: 'below_post' | 'fixed_bar' | 'popup' | 'slide_in' | 'others'; + }; + fullscreenStatus: boolean; + editorUrl: string; + formEditorUrl: string; + previewPageUrl: string; + closeIconsUrl: string; + customFonts: string[]; + allWpPosts: typeof window.mailpoet_all_wp_posts; + allWpPages: typeof window.mailpoet_all_wp_pages; + allWpCategories: typeof window.mailpoet_all_wp_categories; + allWpTags: typeof window.mailpoet_all_wp_tags; + allWooCommerceProducts: typeof window.mailpoet_woocommerce_products; + allWooCommerceCategories: typeof window.mailpoet_woocommerce_categories; + allWooCommerceTags: typeof window.mailpoet_woocommerce_tags; + tutorialSeen: boolean; + tutorialUrl: string; + user: { + isAdministrator: boolean; + }; +}; diff --git a/mailpoet/assets/js/src/form_editor/store/store.jsx b/mailpoet/assets/js/src/form_editor/store/store.ts similarity index 88% rename from mailpoet/assets/js/src/form_editor/store/store.jsx rename to mailpoet/assets/js/src/form_editor/store/store.ts index 8b8540655e..3ce29ff9c4 100644 --- a/mailpoet/assets/js/src/form_editor/store/store.jsx +++ b/mailpoet/assets/js/src/form_editor/store/store.ts @@ -12,6 +12,16 @@ import { controls } from './controls.jsx'; import { validateForm } from './form_validator.jsx'; import { formBodyToBlocksFactory } from './form_body_to_blocks.jsx'; import { mapFormDataAfterLoading } from './map_form_data_after_loading.jsx'; +import { FormEditorWindow, State } from './state_types'; +import { OmitFirstArgs } from '../../types'; + +const storeName = 'mailpoet-form-editor'; + +declare let window: FormEditorWindow; + +declare module '@wordpress/data' { + function select(key: typeof storeName): OmitFirstArgs; +} export const initStore = () => { const customFields = window.mailpoet_custom_fields.map((field) => ({ @@ -75,6 +85,9 @@ export const initStore = () => { isFormSaving: false, isCustomFieldSaving: false, isCustomFieldCreating: false, + isPreviewShown: false, + isPreviewReady: false, + isCustomFieldDeleting: false, inserterPanel: null, notices: [], hasUnsavedChanges: false, @@ -112,5 +125,5 @@ export const initStore = () => { resolvers: {}, }; - registerStore('mailpoet-form-editor', config); + registerStore('mailpoet-form-editor', config); };