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

client/src/components/shop-employees/shop-employees-form.component.jsx

@@ -6,106 +6,125 @@ import { useTranslation } from "react-i18next";
 export default function ShopEmployeesFormComponent({
   form,
   selectedEmployee,
-  handleSubmit
+  handleFinish
 }) {
   const { t } = useTranslation();
-  const { getFieldDecorator } = form;
+
   if (!selectedEmployee) return "//TODO No employee selected.";
+
   return (
-    <Form onSubmit={handleSubmit} autoComplete={"off"}>
+    <Form
+      onFinish={handleFinish}
+      autoComplete={"off"}
+      form={form}
+      initialValues={{
+        ...selectedEmployee,
+        hire_date: selectedEmployee.hire_date
+          ? moment(selectedEmployee.hire_date)
+          : null,
+        termination_date: selectedEmployee.termination_date
+          ? moment(selectedEmployee.termination_date)
+          : null
+      }}
+    >
       <Button type="primary" htmlType="submit">
         {t("general.actions.save")}
       </Button>
 
-      <Form.Item label={t("employees.fields.first_name")}>
-        {getFieldDecorator("first_name", {
-          initialValue: selectedEmployee.first_name,
-          rules: [
-            {
-              required: true,
-              message: t("general.validation.required")
-            }
-          ]
-        })(<Input name="first_name" />)}
+      <Form.Item
+        name="first_name"
+        label={t("employees.fields.first_name")}
+        rules={[
+          {
+            required: true,
+            message: t("general.validation.required")
+          }
+        ]}
+      >
+        <Input />
       </Form.Item>
-      <Form.Item label={t("employees.fields.last_name")}>
-        {getFieldDecorator("last_name", {
-          initialValue: selectedEmployee.last_name,
-          rules: [
-            {
-              required: true,
-              message: t("general.validation.required")
-            }
-          ]
-        })(<Input name="last_name" />)}
+      <Form.Item
+        label={t("employees.fields.last_name")}
+        name="last_name"
+        rules={[
+          {
+            required: true,
+            message: t("general.validation.required")
+          }
+        ]}
+      >
+        <Input />
       </Form.Item>
-      <Form.Item label={t("employees.fields.employee_number")}>
-        {getFieldDecorator("employee_number", {
-          initialValue: selectedEmployee.employee_number,
-          rules: [
-            {
-              required: true,
-              message: t("general.validation.required")
-            }
-          ]
-        })(<Input name="employee_number" />)}
+      <Form.Item
+        name="employee_number"
+        label={t("employees.fields.employee_number")}
+        rules={[
+          {
+            required: true,
+            message: t("general.validation.required")
+          }
+        ]}
+      >
+        <Input />
       </Form.Item>
-      <Form.Item label={t("employees.fields.active")}>
-        {getFieldDecorator("active", {
-          initialValue: selectedEmployee.active,
-          valuePropName: "checked"
-        })(<Switch name="active" />)}
+      <Form.Item
+        label={t("employees.fields.active")}
+        valuePropName="checked"
+        name="active"
+      >
+        <Switch />
       </Form.Item>
-      <Form.Item label={t("employees.fields.flat_rate")}>
-        {getFieldDecorator("flat_rate", {
-          initialValue: selectedEmployee.flat_rate,
-          valuePropName: "checked"
-        })(<Switch name="active" />)}
+      <Form.Item
+        label={t("employees.fields.flat_rate")}
+        name="active"
+        valuePropName="checked"
+      >
+        <Switch />
       </Form.Item>
-      <Form.Item label={t("employees.fields.hire_date")}>
-        {getFieldDecorator("hire_date", {
-          initialValue: selectedEmployee.hire_date
-            ? moment(selectedEmployee.hire_date)
-            : null,
-          rules: [
-            {
-              required: true,
-              message: t("general.validation.required")
-            }
-          ]
-        })(<DatePicker name="hire_date" />)}
+      <Form.Item
+        name="hire_date"
+        label={t("employees.fields.hire_date")}
+        rules={[
+          {
+            required: true,
+            message: t("general.validation.required")
+          }
+        ]}
+      >
+        <DatePicker />
       </Form.Item>
-      <Form.Item label={t("employees.fields.termination_date")}>
-        {getFieldDecorator("termination_date", {
-          initialValue: selectedEmployee.termination_date
-            ? moment(selectedEmployee.termination_date)
-            : null
-        })(<DatePicker name="termination_date" />)}
+      <Form.Item
+        label={t("employees.fields.termination_date")}
+        name="termination_date"
+      >
+        <DatePicker />
       </Form.Item>
       {
         //TODO Make this a picklist.
       }
-      <Form.Item label={t("employees.fields.cost_center")}>
-        {getFieldDecorator("cost_center", {
-          initialValue: selectedEmployee.cost_center,
-          rules: [
-            {
-              required: true,
-              message: t("general.validation.required")
-            }
-          ]
-        })(<Input name="cost_center" />)}
+      <Form.Item
+        label={t("employees.fields.cost_center")}
+        name="cost_center"
+        rules={[
+          {
+            required: true,
+            message: t("general.validation.required")
+          }
+        ]}
+      >
+        <Input />
       </Form.Item>
-      <Form.Item label={t("employees.fields.base_rate")}>
-        {getFieldDecorator("base_rate", {
-          initialValue: selectedEmployee.base_rate,
-          rules: [
-            {
-              required: true,
-              message: t("general.validation.required")
-            }
-          ]
-        })(<InputNumber name="base_rate" />)}
+      <Form.Item
+        label={t("employees.fields.base_rate")}
+        name="base_rate"
+        rules={[
+          {
+            required: true,
+            message: t("general.validation.required")
+          }
+        ]}
+      >
+        <InputNumber />
       </Form.Item>
     </Form>
   );

client/src/components/shop-employees/shop-employees.container.jsx

@@ -4,17 +4,22 @@ import { useMutation, useQuery } from "react-apollo";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { DELETE_EMPLOYEE, INSERT_EMPLOYEES, QUERY_EMPLOYEES, UPDATE_EMPLOYEE } from "../../graphql/employees.queries";
+import {
+  DELETE_EMPLOYEE,
+  INSERT_EMPLOYEES,
+  QUERY_EMPLOYEES,
+  UPDATE_EMPLOYEE
+} from "../../graphql/employees.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import AlertComponent from "../alert/alert.component";
 import ShopEmployeeComponent from "./shop-employees.component";
 
-
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
 
-function ShopEmployeesContainer({ form, bodyshop }) {
+function ShopEmployeesContainer({ bodyshop }) {
+  const [form] = Form.useForm();
   const { t } = useTranslation();
   const employeeState = useState(null);
   const { loading, error, data, refetch } = useQuery(QUERY_EMPLOYEES, {
@@ -41,63 +46,49 @@ function ShopEmployeesContainer({ form, bodyshop }) {
       });
   };
 
-  const handleSubmit = e => {
-    e.preventDefault();
-
-    form.validateFieldsAndScroll((err, values) => {
-      if (err) {
-        notification["error"]({
-          message: t("employees.errors.validationtitle"),
-          description: t("employees.errors.validation")
-        });
-      }
-      if (!err) {
-        if (employeeState[0].id) {
-          //Update a record.
-          updateEmployee({
-            variables: { id: employeeState[0].id, employee: values }
-          })
-            .then(r => {
-              notification["success"]({
-                message: t("employees.successes.save")
-              });
-              //TODO Better way to reset the field decorators?
-              employeeState[1](null);
-              refetch().then(r => form.resetFields());
-            })
-            .catch(error => {
-              notification["error"]({
-                message: t("employees.errors.save")
-              });
-            });
-        } else {
-          //New record, insert it.
-          insertEmployees({
-            variables: { employees: [{ ...values, shopid: bodyshop.id }] }
-          }).then(r => {
-            notification["success"]({
-              message: t("employees.successes.save")
-            });
-            //TODO Better way to reset the field decorators?
-            employeeState[1](null);
-            refetch()
-              .then(r => form.resetFields())
-              .catch(error => {
-                notification["error"]({
-                  message: t("employees.errors.save")
-                });
-              });
+  const handleFinish = values => {
+    if (employeeState[0].id) {
+      //Update a record.
+      updateEmployee({
+        variables: { id: employeeState[0].id, employee: values }
+      })
+        .then(r => {
+          notification["success"]({
+            message: t("employees.successes.save")
           });
-        }
-      }
-    });
+          //TODO Better way to reset the field decorators?
+          employeeState[1](null);
+          refetch().then(r => form.resetFields());
+        })
+        .catch(error => {
+          notification["error"]({
+            message: t("employees.errors.save")
+          });
+        });
+    } else {
+      //New record, insert it.
+      insertEmployees({
+        variables: { employees: [{ ...values, shopid: bodyshop.id }] }
+      }).then(r => {
+        notification["success"]({
+          message: t("employees.successes.save")
+        });
+        //TODO Better way to reset the field decorators?
+        employeeState[1](null);
+        refetch().catch(error => {
+          notification["error"]({
+            message: t("employees.errors.save")
+          });
+        });
+      });
+    }
   };
 
   if (error) return <AlertComponent message={error.message} type="error" />;
 
   return (
     <ShopEmployeeComponent
-      handleSubmit={handleSubmit}
+      handleFinish={handleFinish}
       handleDelete={handleDelete}
       form={form}
       loading={loading}
@@ -106,7 +97,4 @@ function ShopEmployeesContainer({ form, bodyshop }) {
     />
   );
 }
-export default connect(
-  mapStateToProps,
-  null
-)(Form.create({ name: "ShopEmployeesContainer" })(ShopEmployeesContainer));
+export default connect(mapStateToProps, null)(ShopEmployeesContainer);