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

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

@@ -1,181 +1,131 @@
-import { Form, Input, InputNumber, Divider } from "antd";
-import React, { useContext } from "react";
+import { Divider, Form, Input, InputNumber } from "antd";
+import React from "react";
 import { useTranslation } from "react-i18next";
-import JobDetailFormContext from "../../pages/jobs-detail/jobs-detail.page.context";
 
 export default function JobsDetailFinancials({ job }) {
-  const form = useContext(JobDetailFormContext);
-  const { getFieldDecorator } = form;
   const { t } = useTranslation();
 
   return (
     <div>
-      <Form.Item label={t("jobs.fields.ded_amt")}>
-        {getFieldDecorator("ded_amt", {
-          initialValue: job.ded_amt
-        })(<InputNumber name="ded_amt" />)}
+      <Form.Item label={t("jobs.fields.ded_amt")} name="ded_amt">
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.ded_status")}>
-        {getFieldDecorator("ded_status", {
-          initialValue: job.ded_status
-        })(<Input name="ded_status" />)}
+      <Form.Item label={t("jobs.fields.ded_status")} name="ded_status">
+        <Input />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.depreciation_taxes")}>
-        {getFieldDecorator("depreciation_taxes", {
-          initialValue: job.depreciation_taxes
-        })(<InputNumber name="depreciation_taxes" />)}
+      <Form.Item
+        label={t("jobs.fields.depreciation_taxes")}
+        name="depreciation_taxes"
+      >
+        <InputNumber />
       </Form.Item>
       TODO This is equivalent of GST payable.
-      <Form.Item label={t("jobs.fields.federal_tax_payable")}>
-        {getFieldDecorator("federal_tax_payable", {
-          initialValue: job.federal_tax_payable
-        })(<InputNumber name="federal_tax_payable" />)}
+      <Form.Item
+        label={t("jobs.fields.federal_tax_payable")}
+        name="federal_tax_payable"
+      >
+        <InputNumber />
       </Form.Item>
       TODO equivalent of other customer amount
-      <Form.Item label={t("jobs.fields.other_amount_payable")}>
-        {getFieldDecorator("other_amount_payable", {
-          initialValue: job.other_amount_payable
-        })(<InputNumber name="other_amount_payable" />)}
+      <Form.Item
+        label={t("jobs.fields.other_amount_payable")}
+        name="other_amount_payable"
+      >
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.towing_payable")}>
-        {getFieldDecorator("towing_payable", {
-          initialValue: job.towing_payable
-        })(<InputNumber name="towing_payable" />)}
+      <Form.Item label={t("jobs.fields.towing_payable")} name="towing_payable">
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.storage_payable")}>
-        {getFieldDecorator("storage_payable", {
-          initialValue: job.storage_payable
-        })(<InputNumber name="storage_payable" />)}
+      <Form.Item
+        label={t("jobs.fields.storage_payable")}
+        name="storage_payable"
+      >
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.adjustment_bottom_line")}>
-        {getFieldDecorator("adjustment_bottom_line", {
-          initialValue: job.adjustment_bottom_line
-        })(<InputNumber name="adjustment_bottom_line" />)}
+      <Form.Item
+        label={t("jobs.fields.adjustment_bottom_line")}
+        name="adjustment_bottom_line"
+      >
+        <InputNumber />
       </Form.Item>
       <Divider />
       Totals Table
-      <Form.Item label={t("jobs.fields.labor_rate_desc")}>
-        {getFieldDecorator("labor_rate_desc", {
-          initialValue: job.labor_rate_desc
-        })(<Input name="labor_rate_desc" />)}
+      <Form.Item
+        label={t("jobs.fields.labor_rate_desc")}
+        name="labor_rate_desc"
+      >
+        <Input />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.rate_lab")}>
-        {getFieldDecorator("rate_lab", {
-          initialValue: job.rate_lab
-        })(<InputNumber name="rate_lab" />)}
+      <Form.Item label={t("jobs.fields.rate_lab")} name="rate_lab">
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.rate_lad")}>
-        {getFieldDecorator("rate_lad", {
-          initialValue: job.rate_lad
-        })(<InputNumber name="rate_lad" />)}
+      <Form.Item label={t("jobs.fields.rate_lad")} name="rate_lad">
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.rate_lae")}>
-        {getFieldDecorator("rate_lae", {
-          initialValue: job.rate_lae
-        })(<InputNumber name="rate_lae" />)}
+      <Form.Item label={t("jobs.fields.rate_lae")} name="rate_lae">
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.rate_lar")}>
-        {getFieldDecorator("rate_lar", {
-          initialValue: job.rate_lar
-        })(<InputNumber name="rate_lar" />)}
+      <Form.Item label={t("jobs.fields.rate_lar")} name="rate_lar">
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.rate_las")}>
-        {getFieldDecorator("rate_las", {
-          initialValue: job.rate_las
-        })(<InputNumber name="rate_las" />)}
+      <Form.Item label={t("jobs.fields.rate_las")} name="rate_las">
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.rate_laf")}>
-        {getFieldDecorator("rate_laf", {
-          initialValue: job.rate_laf
-        })(<InputNumber name="rate_laf" />)}
+      <Form.Item label={t("jobs.fields.rate_laf")} name="rate_laf">
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.rate_lam")}>
-        {getFieldDecorator("rate_lam", {
-          initialValue: job.rate_lam
-        })(<InputNumber name="rate_lam" />)}
+      <Form.Item label={t("jobs.fields.rate_lam")} name="rate_lam">
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.rate_lag")}>
-        {getFieldDecorator("rate_lag", {
-          initialValue: job.rate_lag
-        })(<InputNumber name="rate_lag" />)}
+      <Form.Item label={t("jobs.fields.rate_lag")} name="rate_lag">
+        <InputNumber />
       </Form.Item>
       Note //TODO Remove ATP rate?
-      <Form.Item label={t("jobs.fields.rate_atp")}>
-        {getFieldDecorator("rate_atp", {
-          initialValue: job.rate_atp
-        })(<InputNumber name="rate_atp" />)}
+      <Form.Item label={t("jobs.fields.rate_atp")} name="rate_atp">
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.rate_lau")}>
-        {getFieldDecorator("rate_lau", {
-          initialValue: job.rate_lau
-        })(<InputNumber name="rate_lau" />)}
+      <Form.Item label={t("jobs.fields.rate_lau")} name="rate_lau">
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.rate_la1")}>
-        {getFieldDecorator("rate_la1", {
-          initialValue: job.rate_la1
-        })(<InputNumber name="rate_la1" />)}
+      <Form.Item label={t("jobs.fields.rate_la1")} name="rate_la1">
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.rate_la2")}>
-        {getFieldDecorator("rate_la2", {
-          initialValue: job.rate_la2
-        })(<InputNumber name="rate_la2" />)}
+      <Form.Item label={t("jobs.fields.rate_la2")} name="rate_la2">
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.rate_la3")}>
-        {getFieldDecorator("rate_la3", {
-          initialValue: job.rate_la3
-        })(<InputNumber name="rate_la3" />)}
+      <Form.Item label={t("jobs.fields.rate_la3")} name="rate_la3">
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.rate_la4")}>
-        {getFieldDecorator("rate_la4", {
-          initialValue: job.rate_la4
-        })(<InputNumber name="rate_la4" />)}
+      <Form.Item label={t("jobs.fields.rate_la4")} name="rate_la4">
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.rate_mapa")}>
-        {getFieldDecorator("rate_mapa", {
-          initialValue: job.rate_mapa
-        })(<InputNumber name="rate_mapa" />)}
+      <Form.Item label={t("jobs.fields.rate_mapa")} name="rate_mapa">
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.rate_mash")}>
-        {getFieldDecorator("rate_mash", {
-          initialValue: job.rate_mash
-        })(<InputNumber name="rate_mash" />)}
+      <Form.Item label={t("jobs.fields.rate_mash")} name="rate_mash">
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.rate_mahw")}>
-        {getFieldDecorator("rate_mahw", {
-          initialValue: job.rate_mahw
-        })(<InputNumber name="rate_mahw" />)}
+      <Form.Item label={t("jobs.fields.rate_mahw")} name="rate_mahw">
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.rate_ma2s")}>
-        {getFieldDecorator("rate_ma2s", {
-          initialValue: job.rate_ma2s
-        })(<InputNumber name="rate_ma2s" />)}
+      <Form.Item label={t("jobs.fields.rate_ma2s")} name="rate_ma2s">
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.rate_ma3s")}>
-        {getFieldDecorator("rate_ma3s", {
-          initialValue: job.rate_ma3s
-        })(<InputNumber name="rate_ma3s" />)}
+      <Form.Item label={t("jobs.fields.rate_ma3s")} name="rate_ma3s">
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.rate_mabl")}>
-        {getFieldDecorator("rate_mabl", {
-          initialValue: job.rate_mabl
-        })(<InputNumber name="rate_mabl" />)}
+      <Form.Item label={t("jobs.fields.rate_mabl")} name="rate_mabl">
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.rate_macs")}>
-        {getFieldDecorator("rate_macs", {
-          initialValue: job.rate_macs
-        })(<InputNumber name="rate_macs" />)}
+      <Form.Item label={t("jobs.fields.rate_macs")} name="rate_macs">
+        <InputNumber />
       </Form.Item>
-      <Form.Item label={t("jobs.fields.rate_matd")}>
-        {getFieldDecorator("rate_matd", {
-          initialValue: job.rate_matd
-        })(<InputNumber name="rate_matd" />)}
+      <Form.Item label={t("jobs.fields.rate_matd")} name="rate_matd">
+        <InputNumber />
+      </Form.Item>
+      <Form.Item label={t("jobs.fields.rate_laa")} name="rate_laa">
+        <InputNumber />
       </Form.Item>
-<Form.Item label={t("jobs.fields.rate_laa")}>
-{getFieldDecorator("rate_laa", {
-initialValue: job.rate_laa
-})(<InputNumber name="rate_laa" />)}
- </Form.Item>
-
     </div>
   );
 }