Add form name change handling

[MAILPOET-2450]

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

@@ -1,11 +1,18 @@
 import React, { useState } from 'react';
+import { useDispatch, useSelect } from '@wordpress/data';
 import classnames from 'classnames';
 
 export default () => {
   const [isSelected, setIsSelected] = useState(false);
+  const title = useSelect(
+    (select) => select('mailpoet-form-editor').getFormName(),
+    []
+  );
   const titleClass = classnames('wp-block editor-post-title__block', {
     'is-selected': isSelected,
   });
+  const { changeFormName } = useDispatch('mailpoet-form-editor');
+
   return (
     <div className="editor-post-title">
       <div className={titleClass}>
@@ -26,6 +33,8 @@ export default () => {
             spellCheck="false"
             onFocus={() => setIsSelected(true)}
             onKeyPress={() => setIsSelected(false)}
+            onChange={(e) => changeFormName(e.target.value)}
+            value={title}
           />
         </div>
       </div>

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

@@ -5,4 +5,10 @@ export default {
       toggleTo,
     };
   },
+  changeFormName(name) {
+    return {
+      type: 'CHANGE_FORM_NAME',
+      name,
+    };
+  },
 };

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

@@ -5,6 +5,7 @@ import selectors from './selectors.jsx';
 
 const defaultState = {
   sidebarOpened: true,
+  formData: window.mailpoet_form_data,
 };
 
 const config = {

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

@@ -5,6 +5,14 @@ export default (defaultState) => (state = defaultState, action) => {
         ...state,
         sidebarOpened: action.toggleTo,
       };
+    case 'CHANGE_FORM_NAME':
+      return {
+        ...state,
+        formData: {
+          ...state.formData,
+          name: action.name,
+        },
+      };
     default:
       return state;
   }

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

@@ -2,4 +2,7 @@ export default {
   getSidebarOpened(state) {
     return state.sidebarOpened;
   },
+  getFormName(state) {
+    return state.formData.name;
+  },
 };