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

client/src/components/profile-my/profile-my.component.jsx

@@ -16,61 +16,60 @@ const mapDispatchToProps = dispatch => ({
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(
-  Form.create({ name: "ProfileMyComponentForm" })(function ProfileMyComponent({
-    currentUser,
-    form,
-    updateUserDetails
-  }) {
-    const { isFieldsTouched, resetFields, getFieldDecorator } = form;
-    const { t } = useTranslation();
+)(function ProfileMyComponent({
+  currentUser,
 
-    const handleSubmit = e => {
-      e.preventDefault();
+  updateUserDetails
+}) {
+  const [form] = Form.useForm();
+  const { isFieldsTouched, resetFields } = form;
+  const { t } = useTranslation();
 
-      form.validateFieldsAndScroll((err, values) => {
-        if (err) {
-          notification["error"]({
-            message: t("jobs.errors.validationtitle"),
-            description: t("jobs.errors.validation")
-          });
-        }
-        if (!err) {
-          console.log("values", values);
-          updateUserDetails({
-            displayName: values.displayname,
-            photoURL: values.photoURL
-          });
-        }
-      });
-    };
+  const handleSubmit = e => {
+    e.preventDefault();
 
-    return (
-      <div>
-        {isFieldsTouched() ? <ResetForm resetFields={resetFields} /> : null}
+    form.validateFieldsAndScroll((err, values) => {
+      if (err) {
+        notification["error"]({
+          message: t("jobs.errors.validationtitle"),
+          description: t("jobs.errors.validation")
+        });
+      }
+      if (!err) {
+        console.log("values", values);
+        updateUserDetails({
+          displayName: values.displayname,
+          photoURL: values.photoURL
+        });
+      }
+    });
+  };
 
-        <Form onSubmit={handleSubmit} autoComplete={"no"}>
-          <Form.Item label={t("user.fields.displayname")}>
-            {getFieldDecorator("displayname", {
-              initialValue: currentUser.displayName,
-              rules: [{ required: true }]
-            })(<Input name='displayname' />)}
-          </Form.Item>
-          <Form.Item label={t("user.fields.photourl")}>
-            {getFieldDecorator("photoURL", {
-              initialValue: currentUser.photoURL
-            })(<Input name='photoURL' />)}
-          </Form.Item>
+  return (
+    <div>
+      {isFieldsTouched() ? <ResetForm resetFields={resetFields} /> : null}
 
-          <Button
-            type='primary'
-            key='submit'
-            htmlType='submit'
-            onClick={handleSubmit}>
-            {t("user.actions.updateprofile")}
-          </Button>
-        </Form>
-      </div>
-    );
-  })
-);
+      <Form onSubmit={handleSubmit} autoComplete={"no"}>
+        <Form.Item
+          label={t("user.fields.displayname")}
+          rules={[{ required: true }]}
+          name="displayname"
+        >
+          <Input />)
+        </Form.Item>
+        <Form.Item label={t("user.fields.photourl")} name="photoURL">
+          <Input />
+        </Form.Item>
+
+        <Button
+          type="primary"
+          key="submit"
+          htmlType="submit"
+          onClick={handleSubmit}
+        >
+          {t("user.actions.updateprofile")}
+        </Button>
+      </Form>
+    </div>
+  );
+});