From 35fd30daab93d19a7e444489d0a3acb0753dd8d7 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Tue, 13 Sep 2022 18:29:18 +0700
Subject: [PATCH] fixed error handling on user form

---
 .../settings/UserSettingsView/index.tsx       | 13 +++-----
 src/hooks/auth/usePatchUser.ts                |  9 ++++--
 src/utils/errors/getValidationErrors.ts       |  4 ++-
 src/utils/providers/SettingsProvider.tsx      | 32 +++++++++++--------
 4 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/src/containers/settings/UserSettingsView/index.tsx b/src/containers/settings/UserSettingsView/index.tsx
index f1cffc85..8b9bafee 100644
--- a/src/containers/settings/UserSettingsView/index.tsx
+++ b/src/containers/settings/UserSettingsView/index.tsx
@@ -16,9 +16,6 @@ import styles from './styles.module.scss';
 
 interface UserSettingsViewProps {}
 
-const getError = (error?: string) =>
-  error && has(error, ERROR_LITERAL) ? error : undefined;
-
 const UserSettingsView: FC<UserSettingsViewProps> = () => {
   const { values, handleChange, errors } = useSettings();
   const { isPhone } = useWindowSize();
@@ -41,7 +38,7 @@ const UserSettingsView: FC<UserSettingsViewProps> = () => {
               value={values.fullname}
               handler={handleChange('fullname')}
               title="Полное имя"
-              error={getError(errors.fullname)}
+              error={errors.fullname}
             />
 
             <Textarea
@@ -79,14 +76,14 @@ const UserSettingsView: FC<UserSettingsViewProps> = () => {
             value={values.username}
             handler={handleChange('username')}
             title="Логин"
-            error={getError(errors.username)}
+            error={errors.username}
           />
 
           <InputText
             value={values.email}
             handler={handleChange('email')}
             title="E-mail"
-            error={getError(errors.email)}
+            error={errors.email}
           />
 
           <InputText
@@ -94,7 +91,7 @@ const UserSettingsView: FC<UserSettingsViewProps> = () => {
             handler={handleChange('newPassword')}
             title="Новый пароль"
             type="password"
-            error={getError(errors.newPassword)}
+            error={errors.newPassword}
           />
 
           <InputText
@@ -102,7 +99,7 @@ const UserSettingsView: FC<UserSettingsViewProps> = () => {
             handler={handleChange('password')}
             title="Старый пароль"
             type="password"
-            error={getError(errors.password)}
+            error={errors.password}
           />
 
           <div className={styles.small}>
diff --git a/src/hooks/auth/usePatchUser.ts b/src/hooks/auth/usePatchUser.ts
index bc8c0809..1a67be82 100644
--- a/src/hooks/auth/usePatchUser.ts
+++ b/src/hooks/auth/usePatchUser.ts
@@ -9,7 +9,10 @@ import { showErrorToast } from '~/utils/errors/showToast';
 
 export const usePatchUser = () => {
   const { update } = useUser();
-  const { uploadFile } = useUploader(UploadSubject.Avatar, UploadTarget.Profiles);
+  const { uploadFile } = useUploader(
+    UploadSubject.Avatar,
+    UploadTarget.Profiles,
+  );
 
   const save = useCallback(
     async (user: Partial<ApiUpdateUserRequest['user']>) => {
@@ -17,7 +20,7 @@ export const usePatchUser = () => {
       await update(result.user);
       return result.user;
     },
-    [update]
+    [update],
   );
 
   const updatePhoto = useCallback(
@@ -29,7 +32,7 @@ export const usePatchUser = () => {
         showErrorToast(error);
       }
     },
-    [uploadFile, save]
+    [uploadFile, save],
   );
 
   return { updatePhoto, save };
diff --git a/src/utils/errors/getValidationErrors.ts b/src/utils/errors/getValidationErrors.ts
index 612277ca..4131e0c4 100644
--- a/src/utils/errors/getValidationErrors.ts
+++ b/src/utils/errors/getValidationErrors.ts
@@ -1,6 +1,8 @@
 import { hasPath, path } from '~/utils/ramda';
 
-export const getValidationErrors = (error: unknown): Record<string, string> | undefined => {
+export const getValidationErrors = (
+  error: unknown,
+): Record<string, string> | undefined => {
   if (hasPath(['response', 'data', 'errors'], error)) {
     return path(['response', 'data', 'errors'], error);
   }
diff --git a/src/utils/providers/SettingsProvider.tsx b/src/utils/providers/SettingsProvider.tsx
index 69693520..979bcc54 100644
--- a/src/utils/providers/SettingsProvider.tsx
+++ b/src/utils/providers/SettingsProvider.tsx
@@ -1,6 +1,11 @@
 import { FC, PropsWithChildren, useCallback, useRef } from 'react';
 
-import { FormikConfig, useFormik, FormikProvider, useFormikContext } from 'formik';
+import {
+  FormikConfig,
+  useFormik,
+  FormikProvider,
+  useFormikContext,
+} from 'formik';
 import { Asserts, object, string } from 'yup';
 
 import { ERRORS } from '~/constants/errors';
@@ -13,15 +18,11 @@ import { showErrorToast } from '~/utils/errors/showToast';
 import { showToastSuccess } from '~/utils/toast';
 
 const validationSchema = object({
-  username: string()
-    .default('')
-    .required(ERRORS.REQUIRED),
+  username: string().default('').required(ERRORS.REQUIRED),
   fullname: string().default(''),
   newPassword: string().optional(),
   description: string().default(''),
-  email: string()
-    .default('')
-    .email(ERRORS.NOT_AN_EMAIL),
+  email: string().default('').email(ERRORS.NOT_AN_EMAIL),
   password: string().optional(),
 });
 
@@ -29,7 +30,7 @@ export type ProfileFormData = Asserts<typeof validationSchema>;
 
 export const useSettingsForm = (
   values: ProfileFormData,
-  submitter: (data: ProfileFormData) => Promise<IUser>
+  submitter: (data: ProfileFormData) => Promise<IUser>,
 ) => {
   const initialValues = useRef(values).current;
 
@@ -39,7 +40,9 @@ export const useSettingsForm = (
         const fields = {
           ...values,
           password: values.password?.length ? values.password : undefined,
-          new_password: values.newPassword?.length ? values.newPassword : undefined,
+          new_password: values.newPassword?.length
+            ? values.newPassword
+            : undefined,
         };
 
         const result = await submitter(fields);
@@ -51,11 +54,12 @@ export const useSettingsForm = (
 
         const validationErrors = getValidationErrors(error);
         if (validationErrors) {
+          console.log(validationErrors);
           setErrors(validationErrors);
         }
       }
     },
-    [submitter]
+    [submitter],
   );
 
   return useFormik({
@@ -70,11 +74,11 @@ export const SettingsProvider: FC<PropsWithChildren<{}>> = ({ children }) => {
   const { save } = usePatchUser();
 
   const formik = useSettingsForm(
-    { ...user, password: '', newPassword: '' }, 
-    save
+    { ...user, password: '', newPassword: '' },
+    save,
   );
 
-  return <FormikProvider value={formik}>{children}</FormikProvider>
-}
+  return <FormikProvider value={formik}>{children}</FormikProvider>;
+};
 
 export const useSettings = () => useFormikContext<ProfileFormData>();