Move error messages from editor to form component

[MAILPOET-3649]

assets/js/src/segments/dynamic/editor.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
 import { useRouteMatch, Link } from 'react-router-dom';
 
 import MailPoet from 'mailpoet';
@@ -8,7 +8,6 @@ import Heading from 'common/typography/heading/heading';
 import HideScreenOptions from 'common/hide_screen_options/hide_screen_options';
 import { Form } from './form';
 
-import APIErrorsNotice from '../../notices/api_errors_notice';
 import { createStore } from './store/store';
 
 const Editor: React.FunctionComponent = () => {
@@ -16,11 +15,6 @@ const Editor: React.FunctionComponent = () => {
 
   createStore();
 
-  const errors: string[] = useSelect(
-    (select) => select('mailpoet-dynamic-segments-form').getErrors(),
-    []
-  );
-
   const { pageLoaded } = useDispatch('mailpoet-dynamic-segments-form');
 
   useEffect(() => {
@@ -31,9 +25,6 @@ const Editor: React.FunctionComponent = () => {
     <>
       <Background color="#fff" />
       <HideScreenOptions />
-      {(errors.length > 0 && (
-        <APIErrorsNotice errors={errors.map((error) => ({ message: error }))} />
-      ))}
 
       <Heading level={1} className="mailpoet-title">
         <span>{MailPoet.I18n.t('formPageTitle')}</span>

assets/js/src/segments/dynamic/form.tsx

@@ -15,6 +15,7 @@ import { FormFilterFields } from './form_filter_fields';
 import { isFormValid } from './validator';
 import { MinusIcon } from '../../common/button/icon/minus';
 import plusIcon from '../../common/button/icon/plus';
+import APIErrorsNotice from '../../notices/api_errors_notice';
 
 import {
   FilterRow,
@@ -53,6 +54,11 @@ export const Form: React.FunctionComponent<Props> = ({
     []
   );
 
+  const errors: string[] = useSelect(
+    (select) => select('mailpoet-dynamic-segments-form').getErrors(),
+    []
+  );
+
   const { updateSegment, updateSegmentFilter, handleSave } = useDispatch('mailpoet-dynamic-segments-form');
 
   return (
@@ -64,6 +70,9 @@ export const Form: React.FunctionComponent<Props> = ({
               {MailPoet.I18n.t('name')}
             </label>
           </Heading>
+          {(errors.length > 0 && (
+            <APIErrorsNotice errors={errors.map((error) => ({ message: error }))} />
+          ))}
           <div className="mailpoet-form-field">
             <Input
               isFullWidth