Refactor form data validation to extra function and run on every change

[MAILPOET-2455]

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

@@ -7,11 +7,12 @@ export default {
       return;
     }
     dispatch('mailpoet-form-editor').removeNotice('save-form');
-    const formData = select('mailpoet-form-editor').getFormData();
+    const formErrors = select('mailpoet-form-editor').getFormErrors();
-    if (!formData.settings.segments || formData.settings.segments.length === 0) {
+    if (formErrors.includes('missing-lists')) {
       dispatch('mailpoet-form-editor').addDismissibleNotice(MailPoet.I18n.t('settingsPleaseSelectList'), 'error', 'missing-lists');
       return;
     }
+    const formData = select('mailpoet-form-editor').getFormData();
     dispatch('mailpoet-form-editor').saveFormStarted();
     dispatch('mailpoet-form-editor').removeNotice('missing-lists');
     MailPoet.Ajax.post({

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

@@ -0,0 +1,7 @@
+export default (formData) => {
+  const errors = [];
+  if (!formData.settings.segments || formData.settings.segments.length === 0) {
+    errors.push('missing-lists');
+  }
+  return errors;
+};

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

@@ -1,7 +1,15 @@
-export default (state, action) => ({
+import validateForm from '../form_validator.jsx';
-  ...state,
+
-  formData: {
+export default (state, action) => {
-    ...state.formData,
+  const newState = {
-    settings: action.settings,
+    ...state,
-  },
+    formData: {
-});
+      ...state.formData,
+      settings: action.settings,
+    },
+  };
+  return {
+    ...newState,
+    formErrors: validateForm(newState.formData),
+  };
+};

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

@@ -35,4 +35,7 @@ export default {
   getNotice(state, id) {
     return state.notices.find((notice) => notice.id === id);
   },
+  getFormErrors(state) {
+    return state.formErrors;
+  },
 };

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

@@ -7,11 +7,13 @@ import * as actions from './actions.jsx';
 import createReducer from './reducer.jsx';
 import selectors from './selectors.jsx';
 import controls from './controls.jsx';
+import validateForm from './form_validator.jsx';
 
 const defaultState = {
   sidebarOpened: true,
   formData: window.mailpoet_form_data,
   formExports: window.mailpoet_form_exports,
+  formErrors: validateForm(window.mailpoet_form_data),
   segments: window.mailpoet_form_segments,
   pages: window.mailpoet_form_pages,
   isFormSaving: false,