using formik on profile settings

src/components/profile/ProfileSettings/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useEffect, useState } from 'react';
+import React, { FC } from 'react';
 import styles from './styles.module.scss';
 import { Textarea } from '~/components/input/Textarea';
 import { Button } from '~/components/input/Button';
@@ -10,62 +10,22 @@ import { ProfileAccounts } from '~/components/profile/ProfileAccounts';
 import classNames from 'classnames';
 import { useUser } from '~/hooks/user/userUser';
 import { useProfileContext } from '~/utils/providers/ProfileProvider';
-import { showErrorToast } from '~/utils/errors/showToast';
-import { getValidationErrors } from '~/utils/errors/getValidationErrors';
-import { showToastSuccess } from '~/utils/toast';
-import { getRandomPhrase } from '~/constants/phrases';
+import { useProfileForm } from '~/hooks/profile/useProfileForm';
+import { has } from 'ramda';
+
+const getError = (error?: string) => (error && has(error, ERROR_LITERAL) ? error : undefined);
 
 const ProfileSettings: FC = () => {
-  const [errors, setErrors] = useState<Record<string, any>>({});
   const user = useUser();
   const { updateProfile } = useProfileContext();
 
-  const [password, setPassword] = useState('');
-  const [new_password, setNewPassword] = useState('');
-
-  const [data, setData] = useState(user);
-
-  const setDescription = useCallback(description => setData({ ...data, description }), [
-    data,
-    setData,
-  ]);
-
-  const setEmail = useCallback(email => setData({ ...data, email }), [data, setData]);
-  const setUsername = useCallback(username => setData({ ...data, username }), [data, setData]);
-  const setFullname = useCallback(fullname => setData({ ...data, fullname }), [data, setData]);
-
-  const onSubmit = useCallback(
-    async event => {
-      try {
-        event.preventDefault();
-
-        const fields = {
-          ...data,
-          password: password.length > 0 && password ? password : undefined,
-          new_password: new_password.length > 0 && new_password ? new_password : undefined,
-        };
-
-        await updateProfile(fields);
-
-        showToastSuccess(getRandomPhrase('SUCCESS'));
-      } catch (error) {
-        showErrorToast(error);
-
-        const validationErrors = getValidationErrors(error);
-        if (validationErrors) {
-          setErrors(validationErrors);
-        }
-      }
-    },
-    [data, password, new_password, updateProfile]
+  const { handleSubmit, values, errors, handleChange } = useProfileForm(
+    { ...user, password: '', newPassword: '' },
+    updateProfile
   );
 
-  useEffect(() => {
-    setErrors({});
-  }, [password, new_password, data]);
-
   return (
-    <form className={styles.wrap} onSubmit={onSubmit}>
+    <form className={styles.wrap} onSubmit={handleSubmit}>
       <Group>
         <Group className={styles.pad}>
           <div className={styles.pad__title}>
@@ -73,13 +33,17 @@ const ProfileSettings: FC = () => {
           </div>
 
           <InputText
-            value={data.fullname}
-            handler={setFullname}
+            value={values.fullname}
+            handler={handleChange('fullname')}
             title="Полное имя"
-            error={errors.fullname && ERROR_LITERAL[errors.fullname]}
+            error={getError(errors.fullname)}
           />
 
-          <Textarea value={data.description} handler={setDescription} title="Описание" />
+          <Textarea
+            value={values.description}
+            handler={handleChange('description')}
+            title="Описание"
+          />
 
           <div className={styles.small}>
             Описание будет видно на странице профиля. Здесь работают те же правила оформления, что и
@@ -95,33 +59,33 @@ const ProfileSettings: FC = () => {
           </div>
 
           <InputText
-            value={data.username}
-            handler={setUsername}
+            value={values.username}
+            handler={handleChange('username')}
             title="Логин"
-            error={errors.username && ERROR_LITERAL[errors.username]}
+            error={getError(errors.username)}
           />
 
           <InputText
-            value={data.email}
-            handler={setEmail}
+            value={values.email}
+            handler={handleChange('email')}
             title="E-mail"
-            error={errors.email && ERROR_LITERAL[errors.email]}
+            error={getError(errors.email)}
           />
 
           <InputText
-            value={new_password}
-            handler={setNewPassword}
+            value={values.newPassword}
+            handler={handleChange('newPassword')}
             title="Новый пароль"
             type="password"
-            error={errors.new_password && ERROR_LITERAL[errors.new_password]}
+            error={getError(errors.newPassword)}
           />
 
           <InputText
-            value={password}
-            handler={setPassword}
+            value={values.password}
+            handler={handleChange('password')}
             title="Старый пароль"
             type="password"
-            error={errors.password && ERROR_LITERAL[errors.password]}
+            error={getError(errors.password)}
           />
 
           <div className={styles.small}>