Refactor saving form preview data from component to store

[MAILPOET-2743]]

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

@@ -33,7 +33,6 @@ function getFormType(settings) {
 const getPreviewType = () => (window.localStorage.getItem('mailpoet_form_preview_last_preview_type') || 'desktop');
 
 const FormPreview = () => {
-  const [formPersisted, setFormPersisted] = useState(false);
   const [iframeLoaded, setIframeLoaded] = useState(false);
 
   const formBlocks = useSelect(
@@ -48,11 +47,15 @@ const FormPreview = () => {
     (select) => select('mailpoet-form-editor').getFormData(),
     []
   );
-  const { hidePreview } = useDispatch('mailpoet-form-editor');
+  const { hidePreview, savePreviewData } = useDispatch('mailpoet-form-editor');
   const isPreview = useSelect(
     (select) => select('mailpoet-form-editor').getIsPreviewShown(),
     []
   );
+  const previewDataSaved = useSelect(
+    (select) => select('mailpoet-form-editor').getPreviewDataSaved(),
+    []
+  );
 
   const editorSettings = useSelect(
     (select) => select('core/block-editor').getSettings(),
@@ -65,18 +68,11 @@ const FormPreview = () => {
       editorSettings.fontSizes,
       customFields
     );
-    MailPoet.Ajax.post({
+    savePreviewData({
-      api_version: window.mailpoet_api_version,
-      endpoint: 'forms',
-      action: 'previewEditor',
-      data: {
       ...mapFormDataBeforeSaving(formData),
       body: blocksToFormBody(formBlocks),
-      },
-    }).done(() => {
-      setFormPersisted(true);
     });
-  }, [formBlocks, customFields, formData, editorSettings.colors, editorSettings.fontSizes]);
+  }, [formBlocks, customFields, formData, editorSettings, savePreviewData]);
 
   useEffect(() => {
     if (isPreview) {
@@ -87,11 +83,6 @@ const FormPreview = () => {
 
   if (!isPreview) return null;
 
-  function onClose() {
-    setFormPersisted(false);
-    hidePreview();
-  }
-
   function setFormType(type) {
     setIframeLoaded(false);
     window.localStorage.setItem('mailpoet_form_preview_last_form_type', type);
@@ -114,16 +105,16 @@ const FormPreview = () => {
   }
   return (
     <Modal
-      onRequestClose={onClose}
+      onRequestClose={hidePreview}
       fullScreen
       contentClassName="mailpoet_form_preview_modal"
     >
-      {!formPersisted && (
+      {!previewDataSaved && (
         <div className="mailpoet_spinner_wrapper">
           <Spinner />
         </div>
       )}
-      {formPersisted && (
+      {previewDataSaved && (
         <>
           <div className="mailpoet_form_preview_type_select">
             <label>

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

@@ -204,3 +204,16 @@ 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/controls.jsx

@@ -3,6 +3,7 @@ import MailPoet from 'mailpoet';
 import { merge } from 'lodash';
 import Cookies from 'js-cookie';
 import { createBlock, unregisterBlockType } from '@wordpress/blocks';
+import CALL_API from 'common/controls/call_api';
 import { blocksToFormBodyFactory } from './blocks_to_form_body.jsx';
 import formatCustomFieldBlockName from '../blocks/format_custom_field_block_name.jsx';
 import getCustomFieldBlockSettings from '../blocks/custom_fields_blocks.jsx';
@@ -196,4 +197,6 @@ export default {
     }
     dispatch('core/block-editor').resetBlocks(fixedBlocks);
   },
+
+  CALL_API,
 };

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

@@ -7,7 +7,12 @@ import changeFormName from './reducers/change_form_name.jsx';
 import changeFormSettings from './reducers/change_form_settings.jsx';
 import changeFormStyles from './reducers/change_form_styles.jsx';
 import removeNotice from './reducers/remove_notice.jsx';
-import { showPreview, hidePreview } from './reducers/preview.jsx';
+import {
+  showPreview,
+  hidePreview,
+  previewDataSaved,
+  previewDataNotSaved,
+} from './reducers/preview.jsx';
 import saveFormDone from './reducers/save_form_done.jsx';
 import saveFormFailed from './reducers/save_form_failed.jsx';
 import saveFormStartedFactory from './reducers/save_form_started.jsx';
@@ -40,6 +45,8 @@ export default (defaultState) => (state = defaultState, action) => {
     case 'REMOVE_NOTICE': return removeNotice(state, action);
     case 'SHOW_PREVIEW': return showPreview(state, action);
     case 'HIDE_PREVIEW': return hidePreview(state, action);
+    case 'PREVIEW_DATA_NOT_SAVED': return previewDataNotSaved(state, action);
+    case 'PREVIEW_DATA_SAVED': return previewDataSaved(state, action);
     case 'SAVE_FORM_DONE': return saveFormDone(state);
     case 'SAVE_FORM_FAILED': return saveFormFailed(state, action);
     case 'SAVE_FORM_STARTED': return saveFormStarted(state);

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

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

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

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