Convert form editor store to TypeScript

[MAILPOET-4323]
This commit is contained in:
Jan Jakes
2022-05-09 17:41:59 +02:00
committed by Veljko V
parent ce5b6bd38d
commit ab828b2708
3 changed files with 139 additions and 2 deletions

View File

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

View File

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

View File

@ -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<typeof selectors>;
}
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<State>('mailpoet-form-editor', config);
};