Refactored job line edit modal to use redux so that it can be an independent form. Created general modals reducer to manage all modals.

client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.component.jsx

@@ -1,31 +1,33 @@
-import { Input, Modal } from "antd";
+import { Modal, Form } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 
 export default function JobLinesUpsertModalComponent({
   visible,
-  changeVisibility,
-  lineState,
-  setLineState,
-  updateExistingLine,
-  insertNewLine
+  jobLine,
+  handleOk,
+  handleCancel,
+  handleSubmit,
+  form
 }) {
   const { t } = useTranslation();
-  const handleChange = e => {
-    setLineState({ ...lineState, [e.target.name]: e.target.value });
-  };
+  //const { getFieldDecorator, isFieldsTouched, resetFields } = form;
+  console.log("jobLine", jobLine);
   return (
     <Modal
-      title={lineState.id ? t("joblines.label.edit") : t("joblines.label.new")}
+      title={
+        jobLine && jobLine.id
+          ? t("joblines.labels.edit")
+          : t("joblines.labels.new")
+      }
       visible={visible}
       okText={t("general.labels.save")}
-      onOk={() => {
-        lineState.id ? updateExistingLine() : insertNewLine();
-      }}
-      onCancel={() => {
-        changeVisibility(false);
-      }}>
-      <Input.TextArea rows={8} value={lineState.text} onChange={handleChange} />
+      onOk={handleOk}
+      onCancel={handleCancel}
+    >
+      <Form onSubmit={handleSubmit} autoComplete={"off"}>
+        {JSON.stringify(jobLine)}
+      </Form>
     </Modal>
   );
 }

client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.container.jsx

@@ -1,71 +1,102 @@
-import { notification } from "antd";
-import React, { useEffect, useState } from "react";
+import { Form, notification } from "antd";
+import React from "react";
 import { useMutation } from "react-apollo";
 import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
 import {
   INSERT_NEW_JOB_LINE,
   UPDATE_JOB_LINE
 } from "../../graphql/jobs-lines.queries";
+import { toggleModalVisible } from "../../redux/modals/modals.actions";
+import { selectJobLineEditModal } from "../../redux/modals/modals.selectors";
 import JobLinesUpdsertModal from "./job-lines-upsert-modal.component";
 
-export default function JobLinesUpsertModalContainer({
-  jobId,
-  visible,
-  changeVisibility,
-  refetch,
-  existingLine
+const mapStateToProps = createStructuredSelector({
+  jobLineEditModal: selectJobLineEditModal
+});
+const mapDispatchToProps = dispatch => ({
+  toggleModalVisible: () => dispatch(toggleModalVisible("jobLineEdit"))
+});
+
+function JobLinesUpsertModalContainer({
+  jobLineEditModal,
+  toggleModalVisible,
+  form
 }) {
   const { t } = useTranslation();
   const [insertJobLine] = useMutation(INSERT_NEW_JOB_LINE);
   const [updateJobLine] = useMutation(UPDATE_JOB_LINE);
 
-  const [lineState, setLineState] = useState({});
+  const handleSubmit = e => {
+    e.preventDefault();
 
-  useEffect(() => {
-    //Required to prevent infinite looping.
-    if (existingLine) {
-      setLineState(existingLine);
-    }
-  }, [existingLine]);
-
-  const insertNewLine = () => {
-    insertJobLine({
-      variables: {
-        lineInput: [{ ...lineState, jobid: jobId }]
+    form.validateFieldsAndScroll((err, values) => {
+      if (err) {
+        notification["error"]({
+          message: t("jobs.errors.validationtitle"),
+          description: t("jobs.errors.validation")
+        });
+      }
+      if (!err) {
+        if (true) {
+          insertJobLine({
+            variables: {
+              //lineInput: [{ ...lineState, jobid: jobId }]
+            }
+          }).then(r => {
+            if (jobLineEditModal.actions.refetch)
+              jobLineEditModal.actions.refetch();
+            toggleModalVisible();
+            notification["success"]({
+              message: t("joblines.successes.create")
+            });
+          });
+        }
+
+        if (false) {
+          //Required, otherwise unable to spread in new note prop.
+          //delete lineState.__typename;
+          updateJobLine({
+            variables: {
+              //lineId: lineState.id,
+              //line: lineState
+            }
+          }).then(r => {
+            notification["success"]({
+              message: t("joblines.successes.updated")
+            });
+          });
+          if (jobLineEditModal.actions.refetch)
+            jobLineEditModal.actions.refetch();
+          toggleModalVisible();
+        }
       }
-    }).then(r => {
-      refetch();
-      changeVisibility(!visible);
-      notification["success"]({
-        message: t("joblines.successes.create")
-      });
     });
   };
 
-  const updateExistingLine = () => {
-    //Required, otherwise unable to spread in new note prop.
-    delete lineState.__typename;
-    updateJobLine({
-      variables: {
-        lineId: lineState.id,
-        line: lineState
-      }
-    }).then(r => {
-      notification["success"]({
-        message: t("joblines.successes.updated")
-      });
-    });
-    refetch();
-    changeVisibility(!visible);
+  const handleOk = () => {
+    //lineState.id ? updateExistingLine() : insertNewLine();
   };
+  const handleCancel = () => {
+    toggleModalVisible();
+  };
+
   return (
     <JobLinesUpdsertModal
-      visible={visible}
-      changeVisibility={changeVisibility}
-      updateExistingLine={updateExistingLine}
-      insertNewLine={insertNewLine}
-      lineState={lineState}
-      setLineState={setLineState}
+      visible={jobLineEditModal.visible}
+      jobLine={jobLineEditModal.context}
+      handleSubmit={handleSubmit}
+      handleOk={handleOk}
+      handleCancel={handleCancel}
+      form={form}
     />
   );
 }
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(
+  Form.create({ name: "JobsDetailPageContainer" })(JobLinesUpsertModalContainer)
+);