перешёл на react-hook-form, поправил кастомные элементы

codEnjoyer · Dec 10, 2023 · 0f0a93f · 0f0a93f
1 parent a9c72be
commit 0f0a93f
Show file tree

Hide file tree

Showing 9 changed files with 184 additions and 71 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -19,6 +19,8 @@
     "mobx-state-tree": "^5.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.49.0",
+    "react-router-dom": "^6.20.1",
     "sass": "^1.69.5",
     "serve": "^14.2.1",
     "sort-by": "^0.0.2"

diff --git a/frontend/src/UIComponents/customCheckbox/CustomCheckbox.tsx b/frontend/src/UIComponents/customCheckbox/CustomCheckbox.tsx
@@ -1,11 +1,11 @@
-import React, {useState} from 'react';
+import React, {ChangeEvent, FormEvent, useCallback, useState} from 'react';
 import "./customCheckbox.scss"
 
 interface ICustomCheckboxProps {
     text: string,
     id: string,
     additionalClassName?: string,
-    handleOnChange?: () => void
+    handleOnChange?: (e: ChangeEvent<HTMLInputElement>) => void
 }
 
 interface ICheckboxContainerProps {
@@ -14,15 +14,16 @@ interface ICheckboxContainerProps {
 
 const CustomCheckbox: React.FC<ICustomCheckboxProps> = ({text, id, additionalClassName, handleOnChange}) => {
     const [isChecked, changeIsChecked] = useState(false);
-    const onChangeHandler = () => {
+    const onChangeHandler = useCallback((e: FormEvent<HTMLInputElement>) => {
         changeIsChecked(!isChecked)
-        if (handleOnChange) handleOnChange()
-    }
+        if (handleOnChange) handleOnChange(e.currentTarget.checked)
+    }, [handleOnChange, isChecked])
 
 
     return (
-        <div className={additionalClassName ? additionalClassName + " " + "custom-checkbox" : "custom-checkbox"}
-             onClick={onChangeHandler}>
+        <div
+            className={additionalClassName ? additionalClassName + " " + "custom-checkbox" : "custom-checkbox"}
+            onClick={onChangeHandler}>
             {isChecked ? <CheckboxActive classContainer="svg-container"/> : <Checkbox classContainer="svg-container"/>}
             <input type="checkbox" id={id}
                    className="input__checkbox"

diff --git a/frontend/src/UIComponents/customInput/CustomInput.tsx b/frontend/src/UIComponents/customInput/CustomInput.tsx
@@ -1,37 +1,46 @@
 import React from 'react';
 import "./customInput.scss"
+import {FieldValues, UseFormRegister} from "react-hook-form";
 
 interface IPropTypes {
     placeholder?: string,
-    value?: string,
-    handleOnChange?: (e: string) => void,
     type: string,
+    name: string,
+    className?: string,
     autoFocus?: boolean,
     disabled?: boolean,
     width?: string,
     height?: string,
-    defaultValue?: string
+    defaultValue?: string,
+    register: UseFormRegister<FieldValues>,
+    required: boolean
 }
 
 const CustomInput: React.FC<IPropTypes> =
     ({
-         placeholder, value, handleOnChange,
-         type, autoFocus, disabled,
-         width, height, defaultValue
+         placeholder,
+         type,
+         name,
+         className,
+         autoFocus,
+         disabled,
+         width,
+         height,
+         defaultValue,
+         register,
+         required
      }) => {
         return (
             <div className="custom-input" style={{width: width, height: height}}>
-                <input type={type} className="login__input"
-                       placeholder={placeholder !== undefined ? placeholder : ""}
-                       value={value}
-                       onChange={(e) => {
-                           if (handleOnChange)
-                               handleOnChange(e.target.value)
-                       }}
-                       autoFocus={autoFocus !== undefined ? autoFocus : false}
-                       disabled={disabled !== undefined ? disabled : false}
-                       style={{height: height}}
-                       defaultValue={defaultValue}
+                <input
+                    type={type}
+                    className={className}
+                    placeholder={placeholder !== undefined ? placeholder : ""}
+                    autoFocus={autoFocus !== undefined ? autoFocus : false}
+                    disabled={disabled !== undefined ? disabled : false}
+                    style={{height: height}}
+                    defaultValue={defaultValue}
+                    {...register(name, {required: required})}
                 />
             </div>
         );

diff --git a/frontend/src/components/authentication/AuthForm.tsx b/frontend/src/components/authentication/AuthForm.tsx
@@ -1,35 +1,54 @@
-import React from 'react';
-import CustomInput from "../../UIComponents/customInput/CustomInput.tsx";
+import React, {FormEvent, useCallback, useState} from 'react';
+
 import authStore from "../../store/authStore.ts";
+
+import CustomInput from "../../UIComponents/customInput/CustomInput.tsx";
 import CustomCheckbox from "../../UIComponents/customCheckbox/CustomCheckbox.tsx";
-import CustomButton from "../../UIComponents/customButton/CustomButton.tsx";
+
 import {useNavigate} from "react-router-dom"
-import {observer} from "mobx-react-lite";
+import {useForm} from "react-hook-form";
 
-const AuthForm: React.FC = observer(() => {
+const AuthForm: React.FC = () => {
     const navigateTo = useNavigate()
+    const {register, handleSubmit} = useForm()
+
+    const [isPasswordShows, setIsPasswordShows] = useState(false)
+
+    const handleOnChangeIsPasswordShows = useCallback((event: FormEvent<HTMLInputElement>) => {
+        setIsPasswordShows(!event.currentTarget.checked)
+    }, [])
 
     return (
-        <form className="auth__form">
+        <form className="auth__form" onSubmit={handleSubmit((data) => {
+            console.log(data)
+        })}>
             <h2 className="auth-form-title">ВХОД</h2>
             <fieldset className="auth-fields">
-                <CustomInput type="email" value={authStore.userLogin} autoFocus={true} placeholder="Логин"
-                             handleOnChange={(e) => {
-                                 authStore.changeUserLogin(e)
-                                 authStore.changeUserEmail(e)
-                             }}/>
-                    <CustomInput
-                        type={authStore.isPasswordShows ? "text" : "password"} placeholder="Пароль"
-                        value={authStore.userPassword} handleOnChange={(e) => authStore.changeUserPassword(e)}/>
+                <CustomInput
+                    type="email"
+                    register={register}
+                    name={"userLogin"}
+                    autoFocus={true}
+                    placeholder="Логин"
+                    required={true}
+                />
+                <CustomInput
+                    type={isPasswordShows ? "text" : "password"}
+                    register={register}
+                    name={"userPassword"}
+                    placeholder="Пароль"
+                    required={true}
+                />
             </fieldset>
-            <CustomCheckbox text="Показать пароль" id="is-remember"
-                            additionalClassName="is-remember-password__checkbox"
-                            handleOnChange={authStore.changeIsPasswordShows}/>
-            <CustomButton additionalClassName="auth__btn" text="ВОЙТИ" handleOnClick={() => {
-                authStore.signIn().then(() => navigateTo('/map'))
-            }}/>
+            <CustomCheckbox
+                text="Показать пароль"
+                id="is-remember"
+                additionalClassName="is-remember-password__checkbox"
+                handleOnChange={handleOnChangeIsPasswordShows}
+            />
+            <input type="submit" className="auth__btn" value="ВОЙТИ"/>
         </form>
     );
-});
+};
 
 export default AuthForm;
diff --git a/frontend/src/components/authentication/Authentication.tsx b/frontend/src/components/authentication/Authentication.tsx
@@ -1,19 +1,26 @@
-import React from 'react';
+import React, {useCallback} from 'react';
 import './../../styles/authentication.scss'
 import CustomButton from "../../UIComponents/customButton/CustomButton.tsx";
 import {useNavigate} from "react-router-dom";
 import AuthForm from "./AuthForm.tsx";
+import {observer} from "mobx-react-lite";
 
-const Authentication: React.FC = () => {
-    const navigateTo = useNavigate()
+const Authentication: React.FC = observer(() => {
+    const navigate = useNavigate()
+    const handleOnClickBackToWelcomePage = useCallback(() => {
+        navigate("/")
+    }, [navigate])
 
     return (
         <div className="auth-page">
             <AuthForm/>
-            <CustomButton additionalClassName="back-to-welcome-page__btn" text="Вернуться обратно"
-                          handleOnClick={() => navigateTo('/')}></CustomButton>
+            <CustomButton
+                additionalClassName="back-to-welcome-page__btn"
+                text="Вернуться обратно"
+                handleOnClick={handleOnClickBackToWelcomePage}
+            />
         </div>
     );
-};
+});
 
 export default Authentication;
diff --git a/frontend/src/components/mapMenu/UIMapMenu/UserProfile/UserProfileModalBody.tsx b/frontend/src/components/mapMenu/UIMapMenu/UserProfile/UserProfileModalBody.tsx
@@ -1,5 +1,4 @@
 import React, {useEffect} from 'react';
-import CustomInput from "../../../../UIComponents/customInput/CustomInput.tsx";
 import {IUserType} from "../../../../types/UserType.ts";
 
 import {IAchievementType} from "../../../../types/AchievementType.ts";
@@ -30,9 +29,7 @@ const UserProfileModalBody: React.FC<IUserProfileModalProps> = ({user, formatted
             <div className="header-modal-user-profile">
                 <h3 className="user-profile-title">ПРОФИЛЬ СОТРУДНИКА</h3>
             </div>
-
             <UserInfo user={user} formattedDate={formattedDate}/>
-
             <Achievements achievements={achievements}/>
         </div>
     );

diff --git a/frontend/src/components/welcomePage/WelcomePage.tsx b/frontend/src/components/welcomePage/WelcomePage.tsx
@@ -13,7 +13,8 @@ const WelcomePage: React.FC = () => {
             <CustomButton
                 additionalClassName="navigate_to_auth__btn"
                 handleOnClick={() => navigateTo("/login")}
-                text="Авторизоваться"/>
+                text="Авторизоваться"
+            />
         </div>
     );
 };