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

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);