Refactor saving form notices end error processing from control to reducer

[MAILPOET-2455]

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

@@ -40,20 +40,11 @@ export function saveFormStarted() {
   };
 }
 
-const createAddNoticeAction = (content, status, isDismissible, id) => ({
-  type: 'ADD_NOTICE',
-  content,
-  status,
-  isDismissible,
-  id,
-});
-
-export function addNonDismissibleNotice(content, status, id) {
-  return createAddNoticeAction(content, status, false, id);
-}
-
-export function addDismissibleNotice(content, status, id) {
-  return createAddNoticeAction(content, status, true, id);
+export function saveFormFailed(message = undefined) {
+  return {
+    type: 'SAVE_FORM_FAILED',
+    message,
+  };
 }
 
 export function removeNotice(id) {

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

@@ -6,15 +6,12 @@ export default {
     if (select('mailpoet-form-editor').getIsFormSaving()) {
       return;
     }
-    dispatch('mailpoet-form-editor').removeNotice('save-form');
+    dispatch('mailpoet-form-editor').saveFormStarted();
     const formErrors = select('mailpoet-form-editor').getFormErrors();
-    if (formErrors.includes('missing-lists')) {
-      dispatch('mailpoet-form-editor').addDismissibleNotice(MailPoet.I18n.t('settingsPleaseSelectList'), 'error', 'missing-lists');
+    if (formErrors.length) {
       return;
     }
     const formData = select('mailpoet-form-editor').getFormData();
-    dispatch('mailpoet-form-editor').saveFormStarted();
-    dispatch('mailpoet-form-editor').removeNotice('missing-lists');
     MailPoet.Ajax.post({
       api_version: window.mailpoet_api_version,
       endpoint: 'forms',
@@ -22,14 +19,12 @@ export default {
       data: formData,
     }).done(() => {
       dispatch('mailpoet-form-editor').saveFormDone();
-      dispatch('mailpoet-form-editor').addDismissibleNotice(MailPoet.I18n.t('formSaved'), 'success', 'save-form');
     }).fail((response) => {
       let errorMessage = null;
       if (response.errors.length > 0) {
         errorMessage = response.errors.map((error) => (error.message));
       }
-      dispatch('mailpoet-form-editor').saveFormDone();
-      dispatch('mailpoet-form-editor').addDismissibleNotice(errorMessage, 'error', 'save-form');
+      dispatch('mailpoet-form-editor').saveFormFailed(errorMessage);
     });
   },
 };

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

@@ -1,22 +1,22 @@
-import addNotice from './reducers/add_notice.jsx';
 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 saveFormStarted from './reducers/save_form_started.jsx';
 import saveFormDone from './reducers/save_form_done.jsx';
+import saveFormFailed from './reducers/save_form_failed.jsx';
+import saveFormStarted from './reducers/save_form_started.jsx';
 import switchSidebarTab from './reducers/switch_sidebar_tab.jsx';
 import toggleSidebar from './reducers/toggle_sidebar.jsx';
 import toggleSidebarPanel from './reducers/toggle_sidebar_panel.jsx';
 
 export default (defaultState) => (state = defaultState, action) => {
   switch (action.type) {
-    case 'ADD_NOTICE': return addNotice(state, action);
     case 'CHANGE_FORM_NAME': return changeFormName(state, action);
     case 'CHANGE_FORM_SETTINGS': return changeFormSettings(state, action);
     case 'CHANGE_FORM_STYLES': return changeFormStyles(state, action);
     case 'REMOVE_NOTICE': return removeNotice(state, action);
     case 'SAVE_FORM_DONE': return saveFormDone(state);
+    case 'SAVE_FORM_FAILED': return saveFormFailed(state, action);
     case 'SAVE_FORM_STARTED': return saveFormStarted(state);
     case 'SWITCH_SIDEBAR_TAB': return switchSidebarTab(state, action);
     case 'TOGGLE_SIDEBAR': return toggleSidebar(state, action);

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

@@ -1,13 +0,0 @@
-export default (state, action) => {
-  const notices = state.notices.filter((item) => item.id !== action.id);
-  const notice = {
-    id: action.id,
-    content: action.content,
-    isDismissible: action.isDismissible,
-    status: action.status,
-  };
-  return {
-    ...state,
-    notices: [...notices, notice],
-  };
-};

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

@@ -1,4 +1,16 @@
-export default (state) => ({
-  ...state,
-  isFormSaving: false,
-});
+import MailPoet from 'mailpoet';
+
+export default (state) => {
+  const notices = state.notices.filter((notice) => notice.id !== 'save-form');
+  notices.push({
+    id: 'save-form',
+    content: MailPoet.I18n.t('formSaved'),
+    isDismissible: true,
+    status: 'success',
+  });
+  return {
+    ...state,
+    isFormSaving: false,
+    notices,
+  };
+};

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

@@ -0,0 +1,14 @@
+export default (state, action) => {
+  const notices = state.notices.filter((notice) => notice.id !== 'save-form');
+  notices.push({
+    id: 'save-form',
+    content: action.message,
+    isDismissible: true,
+    status: 'error',
+  });
+  return {
+    ...state,
+    isFormSaving: false,
+    notices,
+  };
+};

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

@@ -1,4 +1,20 @@
-export default (state) => ({
-  ...state,
-  isFormSaving: true,
-});
+import MailPoet from 'mailpoet';
+
+export default (state) => {
+  // remove all form saving related notices
+  const notices = state.notices.filter((notice) => !['save-form', 'missing-lists'].includes(notice.id));
+  const hasMissingLists = state.formErrors.includes('missing-lists');
+  if (hasMissingLists) {
+    notices.push({
+      id: 'missing-lists',
+      content: MailPoet.I18n.t('settingsPleaseSelectList'),
+      isDismissible: true,
+      status: 'error',
+    });
+  }
+  return {
+    ...state,
+    isFormSaving: !hasMissingLists,
+    notices,
+  };
+};