CLEANUP Refactored note upsert to use redux modals.

client/src/components/note-upsert-modal/note-upsert-modal.component.jsx

@@ -1,58 +1,41 @@
-import { Input, Modal, Switch } from "antd";
+import { Form, Input, Switch } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 
-export default function NoteUpsertModalComponent({
-  visible,
-  changeVisibility,
-  noteState,
-  setNoteState,
-  updateExistingNote,
-  insertNewNote
-}) {
+export default function NoteUpsertModalComponent() {
   const { t } = useTranslation();
 
   return (
-    <Modal
-      title={noteState.id ? t("notes.actions.edit") : t("notes.actions.new")}
-      visible={visible}
-      okText={t("general.actions.save")}
-      onOk={() => {
-        noteState.id ? updateExistingNote() : insertNewNote();
-      }}
-      onCancel={() => {
-        changeVisibility(false);
-      }}
-    >
-      <div>
-        {t("notes.fields.critical")}
-        <Switch
-          title={t("notes.fields.critical")}
-          checked={noteState.critical}
-          onChange={checked => {
-            setNoteState({ ...noteState, critical: checked });
-          }}
+    <div>
+      <Form.Item
+        label={t("notes.fields.critical")}
+        name="critical"
+        valuePropName="checked"
+      >
+        <Switch />
+      </Form.Item>
+      <Form.Item
+        label={t("notes.fields.private")}
+        name="private"
+        valuePropName="checked"
+      >
+        <Switch />
+      </Form.Item>
+      <Form.Item
+        label={t("notes.fields.text")}
+        name="text"
+        rules={[
+          {
+            required: true,
+            message: t("general.validation.required")
+          }
+        ]}
+      >
+        <Input.TextArea
+          rows={8}
+          placeholder={t("notes.labels.newnoteplaceholder")}
         />
-      </div>
-      <div>
-        {t("notes.fields.private")}
-        <Switch
-          title={t("notes.fields.private")}
-          checked={noteState.private}
-          onChange={checked => {
-            setNoteState({ ...noteState, private: checked });
-          }}
-        />
-      </div>
-
-      <Input.TextArea
-        rows={8}
-        value={noteState.text}
-        placeholder={t("notes.labels.newnoteplaceholder")}
-        onChange={e => {
-          setNoteState({ ...noteState, text: e.target.value });
-        }}
-      />
-    </Modal>
+      </Form.Item>
+    </div>
   );
 }

client/src/components/note-upsert-modal/note-upsert-modal.container.jsx

@@ -1,84 +1,97 @@
-import { notification } from "antd";
-import React, { useEffect, useState } from "react";
 import { useMutation } from "@apollo/react-hooks";
+import { Form, Modal, notification } from "antd";
+import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { INSERT_NEW_NOTE, UPDATE_NOTE } from "../../graphql/notes.queries";
-import NoteUpsertModalComponent from "./note-upsert-modal.component";
-
-
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { INSERT_NEW_NOTE, UPDATE_NOTE } from "../../graphql/notes.queries";
+import { toggleModalVisible } from "../../redux/modals/modals.actions";
+import { selectNoteUpsert } from "../../redux/modals/modals.selectors";
 import { selectCurrentUser } from "../../redux/user/user.selectors";
+import NoteUpsertModalComponent from "./note-upsert-modal.component";
+
 const mapStateToProps = createStructuredSelector({
-  currentUser: selectCurrentUser
+  currentUser: selectCurrentUser,
+  noteUpsertModal: selectNoteUpsert
+});
+const mapDispatchToProps = dispatch => ({
+  toggleModalVisible: () => dispatch(toggleModalVisible("noteUpsert"))
 });
 
-export default connect (mapStateToProps,null)( function NoteUpsertModalContainer({
-  jobId,
-  visible,
-  changeVisibility,
-  refetch,
-  existingNote,currentUser
+export function NoteUpsertModalContainer({
+  currentUser,
+  noteUpsertModal,
+  toggleModalVisible
 }) {
   const { t } = useTranslation();
   const [insertNote] = useMutation(INSERT_NEW_NOTE);
   const [updateNote] = useMutation(UPDATE_NOTE);
 
-  const [noteState, setNoteState] = useState({
-    private: false,
-    critical: false,
-    text: ""
-  });
+  const { visible, context, actions } = noteUpsertModal;
+  const { jobId, existingNote } = context;
+  const { refetch } = actions;
+
+  const [form] = Form.useForm();
 
   useEffect(() => {
     //Required to prevent infinite looping.
     if (existingNote) {
-      setNoteState(existingNote);
+      form.resetFields();
     }
-  }, [existingNote]);
+  }, [existingNote, form]);
 
-  const insertNewNote = () => {
-    insertNote({
-      variables: {
-        noteInput: [
-          { ...noteState, jobid: jobId, created_by: currentUser.email } 
-        ]
-      }
-    }).then(r => {
-      refetch();
-      changeVisibility(!visible);
-      notification["success"]({
-        message: t("notes.successes.create")
+  const handleFinish = values => {
+    if (existingNote) {
+      updateNote({
+        variables: {
+          noteId: existingNote.id,
+          note: values
+        }
+      }).then(r => {
+        notification["success"]({
+          message: t("notes.successes.updated")
+        });
       });
-    });
-  };
-
-  const updateExistingNote = () => {
-    //Required, otherwise unable to spread in new note prop.
-    delete noteState.__typename;
-    updateNote({
-      variables: {
-        noteId: noteState.id,
-        note: noteState
-      }
-    }).then(r => {
-      notification["success"]({
-        message: t("notes.successes.updated")
+      if (refetch) refetch();
+      toggleModalVisible();
+    } else {
+      insertNote({
+        variables: {
+          noteInput: [
+            { ...values, jobid: jobId, created_by: currentUser.email }
+          ]
+        }
+      }).then(r => {
+        if (refetch) refetch();
+        toggleModalVisible();
+        notification["success"]({
+          message: t("notes.successes.create")
+        });
       });
-    });
-    refetch();
-    changeVisibility(!visible);
+    }
   };
 
   return (
-    <NoteUpsertModalComponent
+    <Modal
+      title={existingNote ? t("notes.actions.edit") : t("notes.actions.new")}
       visible={visible}
-      changeVisibility={changeVisibility}
-      updateExistingNote={updateExistingNote}
-      insertNewNote={insertNewNote}
-      noteState={noteState}
-      setNoteState={setNoteState}
-    />
+      okText={t("general.actions.save")}
+      onOk={() => {
+        form.submit();
+      }}
+      onCancel={() => {
+        toggleModalVisible();
+      }}
+      destroyOnClose
+    >
+      <Form form={form} onFinish={handleFinish} initialValues={existingNote}>
+        <NoteUpsertModalComponent />
+      </Form>
+    </Modal>
   );
 }
-);
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(NoteUpsertModalContainer);