From 251506db102077453253c117fd72a7fb7df4e9da Mon Sep 17 00:00:00 2001
From: whosyourtaco <george.metakos@orfium.com>
Date: Mon, 21 Nov 2022 11:48:14 +0200
Subject: [PATCH] feat: add api errors to form

---
 .../ChangePasswordForm/ChangePasswordForm.tsx | 194 ++++++++++--------
 1 file changed, 104 insertions(+), 90 deletions(-)

diff --git a/src/pages/Settings/components/ChangePasswordForm/ChangePasswordForm.tsx b/src/pages/Settings/components/ChangePasswordForm/ChangePasswordForm.tsx
index 972d5f5..b0c7051 100644
--- a/src/pages/Settings/components/ChangePasswordForm/ChangePasswordForm.tsx
+++ b/src/pages/Settings/components/ChangePasswordForm/ChangePasswordForm.tsx
@@ -9,106 +9,120 @@ import { Field, Form } from 'react-final-form';
 
 import { ButtonContainer } from '../../../Login/components/LoginForm/LoginForm.style';
 
-
 const ChangePasswordForm: React.FC = () => {
-  const { mutate, isLoading } = useChangePassword();
+  const { mutateAsync, isLoading } = useChangePassword();
 
   const handleSubmit = (form: ChangePasswordFormType) => {
-    mutate(form);
+    return new Promise((resolve) => {
+      mutateAsync(form)
+        .then(() => resolve(true))
+        .catch((error) => {
+          resolve(error.errors);
+        });
+    });
   };
 
   return (
-  <Form onSubmit={handleSubmit}>
-    {({ handleSubmit, valid, submitting }) => (
-      <form style={{ height: '100%' }} onSubmit={handleSubmit}>
-        <FieldsContainer withMargin>
-          <LongFieldWrapper>
-            <FieldWrapper>
-              <Field name="old_password" parse={(value) => value}>
-                {(props) => {
-                  const hasError = props.meta.touched && props.meta.invalid;
+    <Form onSubmit={handleSubmit}>
+      {({ handleSubmit, submitting }) => (
+        <form style={{ height: '100%' }} onSubmit={handleSubmit}>
+          <FieldsContainer withMargin>
+            <LongFieldWrapper>
+              <FieldWrapper>
+                <Field name="old_password" parse={(value) => value}>
+                  {(props) => {
+                    const hasError =
+                      props.meta.touched &&
+                      props.meta.invalid &&
+                      (props.meta.submitError || props.meta.error);
 
-                  return (
-                    <TextField
-                      id="old_password"
-                      label="Old password"
-                      styleType="outlined"
-                      size="md"
-                      status={hasError && 'error'}
-                      hintMsg={hasError && props.meta.error}
-                      type="password"
-                      {...props.input}
-                    />
-                  );
-                }}
-              </Field>
-            </FieldWrapper>
-          </LongFieldWrapper>
-        </FieldsContainer>
+                    return (
+                      <TextField
+                        id="old_password"
+                        label="Old password"
+                        styleType="outlined"
+                        size="md"
+                        status={hasError && 'error'}
+                        hintMsg={hasError && (props.meta.error || props.meta.submitError)}
+                        type="password"
+                        {...props.input}
+                      />
+                    );
+                  }}
+                </Field>
+              </FieldWrapper>
+            </LongFieldWrapper>
+          </FieldsContainer>
 
-        <FieldsContainer withMargin>
-          <LongFieldWrapper>
-            <FieldWrapper>
-              <Field name="new_password1" parse={(value) => value}>
-                {(props) => {
-                  const hasError = props.meta.touched && props.meta.invalid;
-                  return (
-                    <TextField
-                      id="new_password1"
-                      label="New password"
-                      styleType="outlined"
-                      size="md"
-                      status={hasError && 'error'}
-                      hintMsg={hasError && props.meta.error}
-                      type="password"
-                      {...props.input}
-                    />
-                  );
-                }}
-              </Field>
-            </FieldWrapper>
-          </LongFieldWrapper>
-        </FieldsContainer>
+          <FieldsContainer withMargin>
+            <LongFieldWrapper>
+              <FieldWrapper>
+                <Field name="new_password1" parse={(value) => value}>
+                  {(props) => {
+                    const hasError =
+                      props.meta.touched &&
+                      props.meta.invalid &&
+                      (props.meta.submitError || props.meta.error);
+                    return (
+                      <TextField
+                        id="new_password1"
+                        label="New password"
+                        styleType="outlined"
+                        size="md"
+                        status={hasError && 'error'}
+                        hintMsg={hasError && (props.meta.error || props.meta.submitError)}
+                        type="password"
+                        {...props.input}
+                      />
+                    );
+                  }}
+                </Field>
+              </FieldWrapper>
+            </LongFieldWrapper>
+          </FieldsContainer>
 
-        <FieldsContainer withMargin>
-          <LongFieldWrapper>
-            <FieldWrapper>
-              <Field name="new_password2" parse={(value) => value}>
-                {(props) => {
-                  const hasError = props.meta.touched && props.meta.invalid;
-                  return (
-                    <TextField
-                      id="new_password2"
-                      label="New password (again)"
-                      styleType="outlined"
-                      size="md"
-                      status={hasError && 'error'}
-                      hintMsg={hasError && props.meta.error}
-                      type="password"
-                      {...props.input}
-                    />
-                  );
-                }}
-              </Field>
-            </FieldWrapper>
-          </LongFieldWrapper>
-        </FieldsContainer>
+          <FieldsContainer withMargin>
+            <LongFieldWrapper>
+              <FieldWrapper>
+                <Field name="new_password2" parse={(value) => value}>
+                  {(props) => {
+                    const hasError =
+                      props.meta.touched &&
+                      props.meta.invalid &&
+                      (props.meta.submitError || props.meta.error);
+                    return (
+                      <TextField
+                        id="new_password2"
+                        label="New password (again)"
+                        styleType="outlined"
+                        size="md"
+                        status={hasError && 'error'}
+                        hintMsg={hasError && (props.meta.error || props.meta.submitError)}
+                        type="password"
+                        {...props.input}
+                      />
+                    );
+                  }}
+                </Field>
+              </FieldWrapper>
+            </LongFieldWrapper>
+          </FieldsContainer>
 
-        <ButtonContainer>
-          <Button
-            block
-            color={'blue-500'}
-            disabled={isLoading || !valid || submitting}
-            filled
-            size="lg"
-            buttonType="submit"
-          >
-            Change Password
-          </Button>
-        </ButtonContainer>
-      </form>
-    )}
-  </Form>
+          <ButtonContainer>
+            <Button
+              block
+              color={'blue-500'}
+              disabled={isLoading || submitting}
+              filled
+              size="lg"
+              buttonType="submit"
+            >
+              Change Password
+            </Button>
+          </ButtonContainer>
+        </form>
+      )}
+    </Form>
   );
 };