обновил оставшиеся формы на rhf

VanyaMate · Oct 19, 2024 · 66d588f · 66d588f
1 parent c71b960
commit 66d588f
Show file tree

Hide file tree

Showing 9 changed files with 271 additions and 158 deletions.
diff --git a/src/app/react-hook-form/validator/isUserAvatarUrlValidatorRhf/isUserAvatarUrlValidatorRhf.ts b/src/app/react-hook-form/validator/isUserAvatarUrlValidatorRhf/isUserAvatarUrlValidatorRhf.ts
@@ -0,0 +1,13 @@
+import { RhfValidator } from '@/app/react-hook-form/types/rhf-validator.ts';
+import {
+    isImageUrlValidatorRhf,
+} from '@/app/react-hook-form/validator/isImageUrlValidatorRhf/isImageUrlValidatorRhf.ts';
+
+
+export const isUserAvatarUrlValidatorRhf: RhfValidator<string> = function (url: string) {
+    if (url.length) {
+        return isImageUrlValidatorRhf(url);
+    }
+
+    return true;
+};
diff --git a/...ct-hook-form/validator/isUserBackgroundUrlValidatorRhf/isUserBackgroundUrlValidatorRhf.ts b/...ct-hook-form/validator/isUserBackgroundUrlValidatorRhf/isUserBackgroundUrlValidatorRhf.ts
@@ -0,0 +1,13 @@
+import { RhfValidator } from '@/app/react-hook-form/types/rhf-validator.ts';
+import {
+    isImageUrlValidatorRhf,
+} from '@/app/react-hook-form/validator/isImageUrlValidatorRhf/isImageUrlValidatorRhf.ts';
+
+
+export const isUserBackgroundUrlValidatorRhf: RhfValidator<string> = function (url: string) {
+    if (url.length) {
+        return isImageUrlValidatorRhf(url);
+    }
+
+    return true;
+};
diff --git a/src/widgets/user-settings/container/UserSettingsContainer/ui/UserSettingsContainer.tsx b/src/widgets/user-settings/container/UserSettingsContainer/ui/UserSettingsContainer.tsx
@@ -125,13 +125,6 @@ export const UserSettingsContainer: FC<UserSettingsContainerProps> = memo(functi
             <div className={ css.content }>
                 { content }
             </div>
-
-            {/*            <Virtual
-             className={ css.content }
-             list={ [ content ] }
-             render={ (e: ReactNode) => e }
-             showAmount={ 1 }
-             />*/ }
         </div>
     );
 });
diff --git a/src/widgets/user-settings/form/UseLoginChangeForm/ui/UserLoginChangeForm.tsx b/src/widgets/user-settings/form/UseLoginChangeForm/ui/UserLoginChangeForm.tsx
@@ -2,31 +2,30 @@ import {
     ComponentPropsWithoutRef,
     FC,
     memo,
-    useCallback,
+    useCallback, useMemo,
     useState,
 } from 'react';
 import classNames from 'classnames';
 import css from './UserLoginChangeForm.module.scss';
-import { Form } from '@/shared/ui-kit/forms/Form/ui/Form.tsx';
-import { useForm } from '@/shared/ui-kit/forms/Form/hooks/useForm.ts';
 import {
-    useInputWithError,
-} from '@/shared/ui-kit/inputs/InputWithError/hooks/useInputWithError.ts';
-import { userLoginUpdateEffect } from '@/app/model/auth/auth.model.ts';
+    userLoginUpdateEffect,
+} from '@/app/model/auth/auth.model.ts';
 import { Col } from '@/shared/ui-kit/box/Col/ui/Col.tsx';
-import {
-    InputWithError,
-} from '@/shared/ui-kit/inputs/InputWithError/ui/InputWithError.tsx';
 import { Button } from '@/shared/ui-kit/buttons/Button/ui/Button.tsx';
 import { Row } from '@/shared/ui-kit/box/Row/ui/Row.tsx';
 import {
     ButtonWithLoading,
 } from '@/shared/ui-kit/buttons/ButtonWithLoading/ui/ButtonWithLoading.tsx';
-import {
-    userAuthLoginValidator,
-} from '@/app/validation/user/login.validators.ts';
 import { useTranslation } from '@/features/i18n/hook/useTranslation.ts';
+import { TextInput } from '@/shared/ui-kit/input/TextInput/ui/TextInput.tsx';
+import { useForm } from 'react-hook-form';
+import { ButtonStyleType } from '@/shared/ui-kit/buttons/Button/types/types.ts';
+import {
+    isLoginValidatorRhf,
+} from '@/app/react-hook-form/validator/isLoginValidatorRhf/isLoginValidatorRhf.ts';
+
 
+type LoginChangeData = { login: string };
 
 export type UserLoginChangeFormProps =
     {
@@ -38,53 +37,68 @@ export const UserLoginChangeForm: FC<UserLoginChangeFormProps> = memo(function U
     const { login, className, ...other }    = props;
     const { t }                             = useTranslation();
     const [ currentLogin, setCurrentLogin ] = useState<string>(login);
-    const loginInput                        = useInputWithError({
-        name            : 'login',
-        onChangeHandler : setCurrentLogin,
-        validationMethod: userAuthLoginValidator,
-    });
-    const form                              = useForm<{ login: string }>({
-        inputs  : [ loginInput ],
-        onSubmit: async (data) => userLoginUpdateEffect(data.login).then(),
+
+    const { handleSubmit, formState, reset, register } = useForm<{
+        login: string,
+    }>({
+        values: { login },
+        mode  : 'onChange',
     });
+    const onSubmit                                     = useCallback((data: LoginChangeData) => {
+        return userLoginUpdateEffect(data.login);
+    }, []);
+
+    const disableButton = useMemo(() => {
+        return !formState.isValid || login === currentLogin;
+    }, [ currentLogin, formState.isValid, login ]);
+
+    const submitting = useMemo(() => {
+        return formState.isSubmitting;
+    }, [ formState.isSubmitting ]);
 
-    const discardChanges = useCallback(() => {
-        setCurrentLogin(login);
-        loginInput.value.current          = login;
-        loginInput.inputRef.current.value = login;
-    }, [ login, loginInput.inputRef, loginInput.value ]);
+    const discard = useCallback(() => {
+        reset();
+    }, [ reset ]);
 
     return (
-        <Form
+        <form
             { ...other }
             className={ classNames(css.container, {}, [ className ]) }
-            controller={ form }
+            onSubmit={ handleSubmit(onSubmit) }
         >
             <Col>
-                <InputWithError
+                <TextInput
                     autoComplete="off"
-                    controller={ loginInput }
-                    defaultValue={ login }
+                    errorMessage={ formState.errors.login?.message }
                     label={ t.page.userSettings.login_label }
                     placeholder={ t.page.userSettings.login_placeholder }
+                    required
+                    type="text"
+                    { ...register('login', {
+                        required: true,
+                        onChange: ({ target: { value } }) => setCurrentLogin(value),
+                        validate: isLoginValidatorRhf,
+                    }) }
                 />
                 <Row fullWidth spaceBetween>
                     <Button
-                        disabled={ currentLogin === login }
-                        onClick={ discardChanges }
-                        type="button"
+                        aria-label={ t.page.userSettings.discard_changes }
+                        disabled={ disableButton || submitting }
+                        onClick={ discard }
+                        styleType={ ButtonStyleType.GHOST }
                     >
                         { t.page.userSettings.discard_changes }
                     </Button>
                     <ButtonWithLoading
-                        disabled={ currentLogin === login || !form.canBeSubmitted }
-                        loading={ form.pending }
+                        aria-label={ t.page.userSettings.apply_changes }
+                        disabled={ disableButton }
+                        loading={ submitting }
                         type="submit"
                     >
                         { t.page.userSettings.apply_changes }
                     </ButtonWithLoading>
                 </Row>
             </Col>
-        </Form>
+        </form>
     );
 });
diff --git a/src/widgets/user-settings/form/UserAvatarChangeForm/ui/UserAvatarChangeForm.tsx b/src/widgets/user-settings/form/UserAvatarChangeForm/ui/UserAvatarChangeForm.tsx
@@ -3,6 +3,7 @@ import {
     FC,
     memo,
     useCallback,
+    useMemo,
     useState,
 } from 'react';
 import css from './UserAvatarChangeForm.module.scss';
@@ -22,8 +23,8 @@ import { useForm } from 'react-hook-form';
 import classNames from 'classnames';
 import { TextInput } from '@/shared/ui-kit/input/TextInput/ui/TextInput.tsx';
 import {
-    isImageUrlValidatorRhf,
-} from '@/app/react-hook-form/validator/isImageUrlValidatorRhf/isImageUrlValidatorRhf.ts';
+    isUserAvatarUrlValidatorRhf,
+} from '@/app/react-hook-form/validator/isUserAvatarUrlValidatorRhf/isUserAvatarUrlValidatorRhf.ts';
 
 
 type AvatarChangeData = { avatar: string };
@@ -40,16 +41,29 @@ export const UserAvatarChangeForm: FC<UserAvatarChangeFormProps> = memo(function
     const [ currentAvatar, setCurrentAvatar ]    = useState<string>(avatar);
     const { t }                                  = useTranslation();
 
-    const { handleSubmit, formState, reset, register } = useForm<{
-        avatar: string,
-    }>({
-        values: { avatar: avatar },
+    const {
+              handleSubmit, formState, reset, register,
+          }        = useForm<AvatarChangeData>({
+        values: { avatar },
         mode  : 'onChange',
     });
-    const onSubmit                                     = useCallback((data: AvatarChangeData) => {
+    const onSubmit = useCallback((data: AvatarChangeData) => {
         return userAvatarUpdateEffect(data.avatar);
     }, []);
 
+    const disableButton = useMemo(() => {
+        return !formState.isValid || currentAvatar === avatar;
+    }, [ avatar, currentAvatar, formState.isValid ]);
+
+    const submitting = useMemo(() => {
+        return formState.isSubmitting;
+    }, [ formState.isSubmitting ]);
+
+    const discard = useCallback(() => {
+        reset();
+        setCurrentAvatar(avatar);
+    }, [ avatar, reset ]);
+
     return (
         <form
             { ...other }
@@ -64,7 +78,7 @@ export const UserAvatarChangeForm: FC<UserAvatarChangeFormProps> = memo(function
                 type="text"
                 { ...register('avatar', {
                     onChange: ({ target: { value } }) => setCurrentAvatar(value),
-                    validate: isImageUrlValidatorRhf,
+                    validate: isUserAvatarUrlValidatorRhf,
                 }) }
             />
             <Row className={ css.avatarImagesCol }>
@@ -79,7 +93,6 @@ export const UserAvatarChangeForm: FC<UserAvatarChangeFormProps> = memo(function
                         className={ css.avatarMedium }
                         login={ login }
                     />
-
                     <UserAvatar
                         avatar={ currentAvatar }
                         className={ css.avatarSmall }
@@ -95,19 +108,16 @@ export const UserAvatarChangeForm: FC<UserAvatarChangeFormProps> = memo(function
             <Row fullWidth spaceBetween>
                 <Button
                     aria-label={ t.page.userSettings.discard_changes }
-                    disabled={ currentAvatar === avatar }
-                    onClick={ () => {
-                        reset();
-                        setCurrentAvatar(avatar);
-                    } }
+                    disabled={ disableButton || submitting }
+                    onClick={ discard }
                     styleType={ ButtonStyleType.GHOST }
                 >
                     { t.page.userSettings.discard_changes }
                 </Button>
                 <ButtonWithLoading
                     aria-label={ t.page.userSettings.apply_changes }
-                    disabled={ !formState.isValid || currentAvatar === avatar }
-                    loading={ formState.isSubmitting }
+                    disabled={ disableButton }
+                    loading={ submitting }
                     type="submit"
                 >
                     { t.page.userSettings.apply_changes }

diff --git a/src/widgets/user-settings/form/UserPasswordChangeForm/ui/UserPasswordChangeForm.module.scss b/src/widgets/user-settings/form/UserPasswordChangeForm/ui/UserPasswordChangeForm.module.scss
@@ -1,3 +1,5 @@
 .container {
-    color : inherit; // TODO: TEMP
+    display        : flex;
+    flex-direction : column;
+    gap            : var(--offset-small);
 }