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

client/src/components/jobs-detail-insurance/jobs-detail-insurance.component.jsx

@@ -1,146 +1,115 @@
-import { Divider, Form, Input, DatePicker } from "antd";
-import React, { useContext } from "react";
+import { DatePicker, Divider, Form, Input } from "antd";
+import React from "react";
 import { useTranslation } from "react-i18next";
-import JobDetailFormContext from "../../pages/jobs-detail/jobs-detail.page.context";
 import FormItemEmail from "../form-items-formatted/email-form-item.component";
 import FormItemPhone from "../form-items-formatted/phone-form-item.component";
-import moment from "moment";
 
-export default function JobsDetailInsurance({ job }) {
-  const form = useContext(JobDetailFormContext);
-  const { getFieldDecorator, getFieldValue } = form;
+export default function JobsDetailInsurance({ job, form }) {
+  const { getFieldValue } = form;
   const { t } = useTranslation();
-
+  //initialValue: job.loss_date ? moment(job.loss_date) : null
+  console.log("job", job);
   return (
     <div>
-      <Form.Item label={t("jobs.fields.ins_co_id")}>
-        {getFieldDecorator("ins_co_id", {
-          initialValue: job.ins_co_id
-        })(<Input name="ins_co_id" />)}
+      <Form.Item label={t("jobs.fields.ins_co_id")} name="ins_co_id">
+        <Input />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.policy_no")}>
-        {getFieldDecorator("policy_no", {
-          initialValue: job.policy_no
-        })(<Input name="policy_no" />)}
+      <Form.Item label={t("jobs.fields.policy_no")} name="policy_no">
+        <Input />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.clm_no")}>
-        {getFieldDecorator("clm_no", {
-          initialValue: job.clm_no
-        })(<Input name="clm_no" />)}
+      <Form.Item label={t("jobs.fields.clm_no")} name="clm_no">
+        <Input />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.regie_number")}>
-        {getFieldDecorator("regie_number", {
-          initialValue: job.regie_number
-        })(<Input name="regie_number" />)}
+      <Form.Item label={t("jobs.fields.regie_number")} name="regie_number">
+        <Input />
       </Form.Item>
       TODO: missing KOL field???
-      <Form.Item label={t("jobs.fields.loss_date")}>
-        {getFieldDecorator("loss_date", {
-          initialValue: job.loss_date ? moment(job.loss_date) : null
-        })(<DatePicker name="loss_date" />)}
+      <Form.Item label={t("jobs.fields.loss_date")} name="loss_date">
+        <DatePicker />
       </Form.Item>
       DAMAGE {JSON.stringify(job.area_of_damage)}
       CAA # seems not correct based on field mapping Class seems not correct
       based on field mapping
-      <Form.Item label={t("jobs.fields.ins_co_nm")}>
-        {getFieldDecorator("ins_co_nm", {
-          initialValue: job.ins_co_nm
-        })(<Input name="ins_co_nm" />)}
+      <Form.Item label={t("jobs.fields.ins_co_nm")} name="ins_co_nm">
+        <Input />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.ins_addr1")}>
-        {getFieldDecorator("ins_addr1", {
-          initialValue: job.ins_addr1
-        })(<Input name="ins_addr1" />)}
+      <Form.Item label={t("jobs.fields.ins_addr1")} name="ins_addr1">
+        <Input />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.ins_city")}>
-        {getFieldDecorator("ins_city", {
-          initialValue: job.ins_city
-        })(<Input name="ins_city" />)}
+      <Form.Item label={t("jobs.fields.ins_city")} name="ins_city">
+        <Input />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.ins_ct_ln")}>
-        {getFieldDecorator("ins_ct_ln", {
-          initialValue: job.ins_ct_ln
-        })(<Input name="ins_ct_ln" />)}
+      <Form.Item label={t("jobs.fields.ins_ct_ln")} name="ins_ct_ln">
+        <Input />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.ins_ct_fn")}>
-        {getFieldDecorator("ins_ct_fn", {
-          initialValue: job.ins_ct_fn
-        })(<Input name="ins_ct_fn" />)}
+      <Form.Item label={t("jobs.fields.ins_ct_fn")} name="ins_ct_fn">
+        <Input />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.ins_ph1")}>
-        {getFieldDecorator("ins_ph1", {
-          initialValue: job.ins_ph1
-        })(<FormItemPhone customInput={Input} name="ins_ph1" />)}
+      <Form.Item label={t("jobs.fields.ins_ph1")} name="ins_ph1">
+        <FormItemPhone customInput={Input} />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.ins_ea")}>
-        {getFieldDecorator("ins_ea", {
-          initialValue: job.ins_ea,
-          rules: [
-            {
-              type: "email",
-              message: "This is not a valid email address."
-            }
-          ]
-        })(<FormItemEmail name="ins_ea" email={getFieldValue("ins_ea")} />)}
+      <Form.Item
+        label={t("jobs.fields.ins_ea")}
+        name="ins_ea"
+        rules={[
+          {
+            type: "email",
+            message: "This is not a valid email address."
+          }
+        ]}
+      >
+        <FormItemEmail email={getFieldValue("ins_ea")} />
       </Form.Item>
       <Divider />
       Appraiser Info
-      <Form.Item label={t("jobs.fields.est_co_nm")}>
-        {getFieldDecorator("est_co_nm", {
-          initialValue: job.est_co_nm
-        })(<Input name="est_co_nm" />)}
+      <Form.Item label={t("jobs.fields.est_co_nm")} name="est_co_nm">
+        <Input />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.est_ct_fn")}>
-        {getFieldDecorator("est_ct_fn", {
-          initialValue: job.est_ct_fn
-        })(<Input name="est_ct_fn" />)}
+      <Form.Item label={t("jobs.fields.est_ct_fn")} name="est_ct_fn">
+        <Input />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.est_ct_ln")}>
-        {getFieldDecorator("est_ct_ln", {
-          initialValue: job.est_ct_ln
-        })(<Input name="est_ct_ln" />)}
+      <Form.Item label={t("jobs.fields.est_ct_ln")} name="est_ct_ln">
+        <Input />
       </Form.Item>
       TODO: Field is pay date but title is inspection date. Likely incorrect?
-      <Form.Item label={t("jobs.fields.pay_date")}>
-        {getFieldDecorator("pay_date", {
-          initialValue: job.pay_date
-        })(<Input name="pay_date" />)}
+      <Form.Item label={t("jobs.fields.pay_date")} name="pay_date">
+        <Input />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.est_ph1")}>
-        {getFieldDecorator("est_ph1", {
-          initialValue: job.est_ph1
-        })(<Input name="est_ph1" />)}
+      <Form.Item label={t("jobs.fields.est_ph1")} name="est_ph1">
+        <Input />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.est_ea")}>
-        {getFieldDecorator("est_ea", {
-          initialValue: job.est_ea,
-          rules: [
-            {
-              type: "email",
-              message: "This is not a valid email address."
-            }
-          ]
-        })(<FormItemEmail name="est_ea" email={getFieldValue("est_ea")} />)}
+      <Form.Item
+        label={t("jobs.fields.est_ea")}
+        name="est_ea"
+        rules={[
+          {
+            type: "email",
+            message: "This is not a valid email address."
+          }
+        ]}
+      >
+        <FormItemEmail email={getFieldValue("est_ea")} />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.selling_dealer")}>
-        {getFieldDecorator("selling_dealer", {
-          initialValue: job.selling_dealer
-        })(<Input name="selling_dealer" />)}
+      <Form.Item label={t("jobs.fields.selling_dealer")} name="selling_dealer">
+        <Input />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.servicing_dealer")}>
-        {getFieldDecorator("servicing_dealer", {
-          initialValue: job.servicing_dealer
-        })(<Input name="servicing_dealer" />)}
+      <Form.Item
+        label={t("jobs.fields.servicing_dealer")}
+        name="servicing_dealer"
+      >
+        <Input />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.selling_dealer_contact")}>
-        {getFieldDecorator("selling_dealer_contact", {
-          initialValue: job.selling_dealer_contact
-        })(<Input name="selling_dealer_contact" />)}
+      <Form.Item
+        label={t("jobs.fields.selling_dealer_contact")}
+        name="selling_dealer_contact"
+      >
+        <Input />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.servicing_dealer_contact")}>
-        {getFieldDecorator("servicing_dealer_contact", {
-          initialValue: job.servicing_dealer_contact
-        })(<Input name="servicing_dealer_contact" />)}
+      <Form.Item
+        label={t("jobs.fields.servicing_dealer_contact")}
+        name="servicing_dealer_contact"
+      >
+        <Input />
       </Form.Item>
       TODO: Adding servicing/selling dealer contact info?
     </div>