using formik on profile settings

src/hooks/profile/usePatchProfile.ts

@@ -2,17 +2,20 @@ import { useUploader } from '~/hooks/data/useUploader';
 import { UploadSubject, UploadTarget } from '~/constants/uploads';
 import { useCallback } from 'react';
 import { showErrorToast } from '~/utils/errors/showToast';
-import { IUser } from '~/redux/auth/types';
+import { ApiUpdateUserRequest, IUser } from '~/redux/auth/types';
 import { apiUpdateUser } from '~/redux/auth/api';
 
 export const usePatchProfile = (updateUserData: (user: Partial<IUser>) => void) => {
   const { uploadFile } = useUploader(UploadSubject.Avatar, UploadTarget.Profiles);
 
-  const updateProfile = useCallback(async (user: Partial<IUser>) => {
-    const result = await apiUpdateUser({ user });
-    await updateUserData(result.user);
-    return result.user;
-  }, []);
+  const updateProfile = useCallback(
+    async (user: Partial<ApiUpdateUserRequest['user']>) => {
+      const result = await apiUpdateUser({ user });
+      await updateUserData(result.user);
+      return result.user;
+    },
+    [updateUserData]
+  );
 
   const updatePhoto = useCallback(
     async (file: File) => {
@@ -23,7 +26,7 @@ export const usePatchProfile = (updateUserData: (user: Partial<IUser>) => void)
         showErrorToast(error);
       }
     },
-    [updateUserData, uploadFile, updateProfile]
+    [uploadFile, updateProfile]
   );
 
   return { updatePhoto, updateProfile };

src/hooks/profile/useProfileForm.ts

@@ -0,0 +1,62 @@
+import { IUser } from '~/redux/auth/types';
+import { Asserts, object, string } from 'yup';
+import { ERRORS } from '~/constants/errors';
+import { FormikConfig, useFormik } from 'formik';
+import { useCallback, useRef } from 'react';
+import { showToastSuccess } from '~/utils/toast';
+import { getRandomPhrase } from '~/constants/phrases';
+import { showErrorToast } from '~/utils/errors/showToast';
+import { getValidationErrors } from '~/utils/errors/getValidationErrors';
+
+const validationSchema = object({
+  username: string()
+    .default('')
+    .required(ERRORS.REQUIRED),
+  fullname: string().default(''),
+  newPassword: string().optional(),
+  description: string().default(''),
+  email: string()
+    .default('')
+    .email(ERRORS.NOT_AN_EMAIL),
+  password: string().optional(),
+});
+
+export type ProfileFormData = Asserts<typeof validationSchema>;
+
+export const useProfileForm = (
+  values: ProfileFormData,
+  submitter: (data: ProfileFormData) => Promise<IUser>
+) => {
+  const initialValues = useRef(values).current;
+
+  const onSubmit = useCallback<FormikConfig<ProfileFormData>['onSubmit']>(
+    async (values, { setErrors, setValues }) => {
+      try {
+        const fields = {
+          ...values,
+          password: values.password?.length ? values.password : undefined,
+          new_password: values.newPassword?.length ? values.newPassword : undefined,
+        };
+
+        const result = await submitter(fields);
+
+        setValues({ ...result, password: '', newPassword: '' });
+        showToastSuccess(getRandomPhrase('SUCCESS'));
+      } catch (error) {
+        showErrorToast(error);
+
+        const validationErrors = getValidationErrors(error);
+        if (validationErrors) {
+          setErrors(validationErrors);
+        }
+      }
+    },
+    [submitter]
+  );
+
+  return useFormik({
+    initialValues,
+    onSubmit,
+    validationSchema,
+  });
+};