Refactor saving preview data completely to store

[MAILPOET-2743]

assets/js/src/form_editor/components/preview.jsx

@@ -1,7 +1,6 @@
 import React, {
   useEffect,
   useState,
-  useCallback,
 } from 'react';
 import MailPoet from 'mailpoet';
 import { Spinner } from '@wordpress/components';
@@ -9,8 +8,6 @@ import { useDispatch, useSelect } from '@wordpress/data';
 
 import Preview from '../../common/preview/preview.jsx';
 import Modal from '../../common/modal/modal.jsx';
-import { blocksToFormBodyFactory } from '../store/blocks_to_form_body.jsx';
-import mapFormDataBeforeSaving from '../store/map_form_data_before_saving.jsx';
 import { onChange } from '../../common/functions';
 
 function getFormType(settings) {
@@ -36,51 +33,24 @@ const FormPreview = () => {
   const [iframeLoaded, setIframeLoaded] = useState(false);
   const [previewType, setPreviewType] = useState(getPreviewType());
 
-  const formBlocks = useSelect(
-    (select) => select('mailpoet-form-editor').getFormBlocks(),
-    []
-  );
-  const customFields = useSelect(
-    (select) => select('mailpoet-form-editor').getAllAvailableCustomFields(),
-    []
-  );
-  const formData = useSelect(
-    (select) => select('mailpoet-form-editor').getFormData(),
-    []
-  );
-  const { hidePreview, savePreviewData } = useDispatch('mailpoet-form-editor');
+  const { hidePreview } = useDispatch('mailpoet-form-editor');
   const isPreview = useSelect(
     (select) => select('mailpoet-form-editor').getIsPreviewShown(),
     []
   );
-  const previewDataSaved = useSelect(
-    (select) => select('mailpoet-form-editor').getPreviewDataSaved(),
+  const isPreviewReady = useSelect(
+    (select) => select('mailpoet-form-editor').getIsPreviewReady(),
     []
   );
 
-  const editorSettings = useSelect(
-    (select) => select('core/block-editor').getSettings(),
+  const formData = useSelect(
+    (select) => select('mailpoet-form-editor').getFormData(),
     []
   );
 
-  const saveFormDataForPreview = useCallback(() => {
-    const blocksToFormBody = blocksToFormBodyFactory(
-      editorSettings.colors,
-      editorSettings.fontSizes,
-      customFields
-    );
-    savePreviewData({
-      ...mapFormDataBeforeSaving(formData),
-      body: blocksToFormBody(formBlocks),
-    });
-  }, [formBlocks, customFields, formData, editorSettings, savePreviewData]);
-
   useEffect(() => {
-    if (isPreview) {
-      saveFormDataForPreview();
-    }
     setIframeLoaded(false);
-  }, [isPreview, saveFormDataForPreview]);
+  }, [isPreview]);
 
   if (!isPreview) return null;
 
@@ -111,12 +81,12 @@ const FormPreview = () => {
       contentClassName="mailpoet_form_preview_modal"
       overlayClassName="mailpoet_form_preview_modal_overlay"
     >
-      {!previewDataSaved && (
+      {!isPreviewReady && (
         <div className="mailpoet_spinner_wrapper">
           <Spinner />
         </div>
       )}
-      {previewDataSaved && (
+      {isPreviewReady && (
         <>
           <div className="mailpoet_form_preview_type_select">
             <label>

assets/js/src/form_editor/store/actions.jsx

@@ -1,3 +1,6 @@
+import { select } from '@wordpress/data';
+import { blocksToFormBodyFactory } from './blocks_to_form_body';
+import mapFormDataBeforeSaving from './map_form_data_before_saving';
 
 export function toggleSidebar(toggleTo) {
   return {
@@ -122,10 +125,32 @@ export function saveFormFailed(message = undefined) {
   };
 }
 
-export function showPreview() {
-  return {
+export function* showPreview() {
+  yield {
     type: 'SHOW_PREVIEW',
   };
+  const editorSettings = select('core/block-editor').getSettings();
+  const customFields = select('mailpoet-form-editor').getAllAvailableCustomFields();
+  const formData = select('mailpoet-form-editor').getFormData();
+  const formBlocks = select('mailpoet-form-editor').getFormBlocks();
+  const blocksToFormBody = blocksToFormBodyFactory(
+    editorSettings.colors,
+    editorSettings.fontSizes,
+    customFields
+  );
+  const { success, error } = yield {
+    type: 'CALL_API',
+    endpoint: 'forms',
+    action: 'previewEditor',
+    data: {
+      ...mapFormDataBeforeSaving(formData),
+      body: blocksToFormBody(formBlocks),
+    },
+  };
+  if (!success) {
+    return { type: 'PREVIEW_DATA_NOT_SAVED', error };
+  }
+  return { type: 'PREVIEW_DATA_SAVED' };
 }
 
 export function hidePreview() {
@@ -204,16 +229,3 @@ export function* applyStylesToAllTextInputs(styles) {
     styles,
   };
 }
-
-export function* savePreviewData(data) {
-  const { success, error } = yield {
-    type: 'CALL_API',
-    endpoint: 'forms',
-    action: 'previewEditor',
-    data,
-  };
-  if (!success) {
-    return { type: 'PREVIEW_DATA_NOT_SAVED', error };
-  }
-  return { type: 'PREVIEW_DATA_SAVED' };
-}

assets/js/src/form_editor/store/reducers/preview.jsx

@@ -6,15 +6,15 @@ export const showPreview = (state) => ({
 export const hidePreview = (state) => ({
   ...state,
   isPreviewShown: false,
-  previewDataSaved: false,
+  isPreviewReady: false,
 });
 
 export const previewDataSaved = (state) => ({
   ...state,
-  previewDataSaved: true,
+  isPreviewReady: true,
 });
 
 export const previewDataNotSaved = (state) => ({
   ...state,
-  previewDataSaved: false,
+  isPreviewReady: false,
 });

assets/js/src/form_editor/store/selectors.jsx

@@ -49,8 +49,8 @@ export default {
   getIsPreviewShown(state) {
     return state.isPreviewShown;
   },
-  getPreviewDataSaved(state) {
-    return state.previewDataSaved;
+  getIsPreviewReady(state) {
+    return state.isPreviewReady;
   },
   getIsCustomFieldSaving(state) {
     return state.isCustomFieldSaving;