STILL BROKEN: Refactored some forms to have bare functionality. Appears that v4 antd has extensive issues.

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

@@ -1,19 +1,20 @@
-import { Modal, Form, Input, InputNumber } from "antd";
-import React from "react";
+import { Form, Input, InputNumber, Modal } from "antd";
+import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import ResetForm from "../form-items-formatted/reset-form-item.component";
 
 export default function JobLinesUpsertModalComponent({
   visible,
   jobLine,
-  handleOk,
   handleCancel,
-  handleSubmit,
-  form
+  handleFinish
 }) {
   const { t } = useTranslation();
-  const { getFieldDecorator, isFieldsTouched, resetFields } = form;
+  const [form] = Form.useForm();
 
+  useEffect(() => {
+    form.resetFields();
+  }, [visible, form]);
+  console.log("jobLine", jobLine);
   return (
     <Modal
       title={
@@ -23,45 +24,39 @@ export default function JobLinesUpsertModalComponent({
       }
       visible={visible}
       okText={t("general.labels.save")}
-      onOk={handleSubmit}
+      onOk={handleFinish}
+      forceRender={true}
       onCancel={handleCancel}
     >
-      {isFieldsTouched() ? <ResetForm resetFields={resetFields} /> : null}
-      <Form onSubmit={handleSubmit} autoComplete={"off"}>
-        <Form.Item label={t("joblines.fields.line_desc")}>
-          {getFieldDecorator("line_desc", {
-            initialValue: jobLine.line_desc
-          })(<Input name="line_desc" />)}
+      <Form
+        onFinish={handleFinish}
+        initialValues={jobLine}
+        autoComplete={"off"}
+        form={form}
+      >
+        <Form.Item label={t("joblines.fields.line_desc")} name="line_desc">
+          <Input />
         </Form.Item>
-        <Form.Item label={t("joblines.fields.oem_partno")}>
-          {getFieldDecorator("oem_partno", {
-            initialValue: jobLine.oem_partno
-          })(<Input name="oem_partno" />)}
+        <Form.Item label={t("joblines.fields.oem_partno")} name="oem_partno">
+          <Input />
         </Form.Item>
-        <Form.Item label={t("joblines.fields.part_type")}>
-          {getFieldDecorator("part_type", {
-            initialValue: jobLine.part_type
-          })(<Input name="part_type" />)}
+        <Form.Item label={t("joblines.fields.part_type")} name="part_type">
+          <Input />
         </Form.Item>
-        <Form.Item label={t("joblines.fields.mod_lbr_ty")}>
-          {getFieldDecorator("mod_lbr_ty", {
-            initialValue: jobLine.mod_lbr_ty
-          })(<Input name="mod_lbr_ty" />)}
+        <Form.Item label={t("joblines.fields.mod_lbr_ty")} name="mod_lbr_ty">
+          <Input />
         </Form.Item>
-        <Form.Item label={t("joblines.fields.op_code_desc")}>
-          {getFieldDecorator("op_code_desc", {
-            initialValue: jobLine.op_code_desc
-          })(<Input name="op_code_desc" />)}
+        <Form.Item
+          label={t("joblines.fields.op_code_desc")}
+          name="op_code_desc"
+        >
+          <Input />
         </Form.Item>
-        <Form.Item label={t("joblines.fields.mod_lb_hrs")}>
-          {getFieldDecorator("mod_lb_hrs", {
-            initialValue: jobLine.mod_lb_hrs
-          })(<InputNumber name="mod_lb_hrs" />)}
+        <Form.Item label={t("joblines.fields.mod_lb_hrs")} name="mod_lb_hrs">
+          <InputNumber />
         </Form.Item>
-        <Form.Item label={t("joblines.fields.act_price")}>
-          {getFieldDecorator("act_price", {
-            initialValue: jobLine.act_price
-          })(<InputNumber name="act_price" />)}
+        <Form.Item label={t("joblines.fields.act_price")} name="act_price">
+          <InputNumber />
         </Form.Item>
       </Form>
     </Modal>

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

@@ -1,13 +1,10 @@
-import { Form, notification } from "antd";
+import { 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 { 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";
@@ -21,70 +18,56 @@ const mapDispatchToProps = dispatch => ({
 
 function JobLinesUpsertModalContainer({
   jobLineEditModal,
-  toggleModalVisible,
-  form
+  toggleModalVisible
 }) {
   const { t } = useTranslation();
   const [insertJobLine] = useMutation(INSERT_NEW_JOB_LINE);
   const [updateJobLine] = useMutation(UPDATE_JOB_LINE);
 
-  const handleSubmit = e => {
-    e.preventDefault();
-
-    form.validateFieldsAndScroll((err, values) => {
-      if (err) {
-        notification["error"]({
-          message: t("joblines.errors.validation"),
-          description: err.message
-        });
-      }
-      if (!err) {
-        if (!jobLineEditModal.context.id) {
-          insertJobLine({
-            variables: {
-              lineInput: [{ jobid: jobLineEditModal.context.jobid, ...values }]
-            }
-          })
-            .then(r => {
-              if (jobLineEditModal.actions.refetch)
-                jobLineEditModal.actions.refetch();
-              toggleModalVisible();
-              notification["success"]({
-                message: t("joblines.successes.created")
-              });
-            })
-            .catch(error => {
-              notification["error"]({
-                message: t("joblines.errors.creating", {
-                  message: error.message
-                })
-              });
-            });
-        } else {
-          updateJobLine({
-            variables: {
-              lineId: jobLineEditModal.context.id,
-              line: values
-            }
-          })
-            .then(r => {
-              notification["success"]({
-                message: t("joblines.successes.updated")
-              });
-            })
-            .catch(error => {
-              notification["success"]({
-                message: t("joblines.errors.updating", {
-                  message: error.message
-                })
-              });
-            });
+  const handleFinish = values => {
+    if (!jobLineEditModal.context.id) {
+      insertJobLine({
+        variables: {
+          lineInput: [{ jobid: jobLineEditModal.context.jobid, ...values }]
+        }
+      })
+        .then(r => {
           if (jobLineEditModal.actions.refetch)
             jobLineEditModal.actions.refetch();
           toggleModalVisible();
+          notification["success"]({
+            message: t("joblines.successes.created")
+          });
+        })
+        .catch(error => {
+          notification["error"]({
+            message: t("joblines.errors.creating", {
+              message: error.message
+            })
+          });
+        });
+    } else {
+      updateJobLine({
+        variables: {
+          lineId: jobLineEditModal.context.id,
+          line: values
         }
-      }
-    });
+      })
+        .then(r => {
+          notification["success"]({
+            message: t("joblines.successes.updated")
+          });
+        })
+        .catch(error => {
+          notification["success"]({
+            message: t("joblines.errors.updating", {
+              message: error.message
+            })
+          });
+        });
+      if (jobLineEditModal.actions.refetch) jobLineEditModal.actions.refetch();
+      toggleModalVisible();
+    }
   };
 
   const handleCancel = () => {
@@ -95,9 +78,8 @@ function JobLinesUpsertModalContainer({
     <JobLinesUpdsertModal
       visible={jobLineEditModal.visible}
       jobLine={jobLineEditModal.context}
-      handleSubmit={handleSubmit}
+      handleFinish={handleFinish}
       handleCancel={handleCancel}
-      form={form}
     />
   );
 }
@@ -105,6 +87,4 @@ function JobLinesUpsertModalContainer({
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(
-  Form.create({ name: "JobsDetailPageContainer" })(JobLinesUpsertModalContainer)
-);
+)(JobLinesUpsertModalContainer);