From 44b7180ed2619a81492d2b50063f69729c244746 Mon Sep 17 00:00:00 2001 From: Tamal Das Date: Thu, 31 Aug 2023 12:39:20 +0530 Subject: [PATCH] chore(refactor): changes to the auth logics (#1063) --- package-lock.json | 12 ++- package.json | 2 +- src/App.jsx | 52 ++++------- src/pages/Auth/AuthFormmodule.js | 66 +++++++++++++ src/pages/Auth/AuthLogin.jsx | 100 ++++++-------------- src/pages/Auth/AuthRegister.jsx | 153 ++++++++----------------------- src/pages/Home.jsx | 36 ++++---- src/store.js | 9 ++ src/utils/routesConfig.jsx | 31 +++++++ 9 files changed, 214 insertions(+), 247 deletions(-) create mode 100644 src/pages/Auth/AuthFormmodule.js create mode 100644 src/store.js create mode 100644 src/utils/routesConfig.jsx diff --git a/package-lock.json b/package-lock.json index 44fa94ab..75e9bad7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -34,7 +34,7 @@ "use-places-autocomplete": "^4.0.0", "vite-plugin-svgr": "^2.2.2", "web-vitals": "^3.3.1", - "zustand": "^4.3.8" + "zustand": "^4.4.1" }, "devDependencies": { "@vitejs/plugin-react": "^4.0.0", @@ -24490,9 +24490,9 @@ } }, "node_modules/zustand": { - "version": "4.3.8", - "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.3.8.tgz", - "integrity": "sha512-4h28KCkHg5ii/wcFFJ5Fp+k1J3gJoasaIbppdgZFO4BPJnsNxL0mQXBSFgOgAdCdBj35aDTPvdAJReTMntFPGg==", + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.4.1.tgz", + "integrity": "sha512-QCPfstAS4EBiTQzlaGP1gmorkh/UL1Leaj2tdj+zZCZ/9bm0WS7sI2wnfD5lpOszFqWJ1DcPnGoY8RDL61uokw==", "dependencies": { "use-sync-external-store": "1.2.0" }, @@ -24500,10 +24500,14 @@ "node": ">=12.7.0" }, "peerDependencies": { + "@types/react": ">=16.8", "immer": ">=9.0", "react": ">=16.8" }, "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, "immer": { "optional": true }, diff --git a/package.json b/package.json index 155a2c66..bdee1aa0 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "use-places-autocomplete": "^4.0.0", "vite-plugin-svgr": "^2.2.2", "web-vitals": "^3.3.1", - "zustand": "^4.3.8" + "zustand": "^4.4.1" }, "scripts": { "dev": "vite --port 3000", diff --git a/src/App.jsx b/src/App.jsx index 141eacda..e62a4512 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,47 +1,27 @@ import React from "react"; import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; -import { - Home, - UserProfile, - ClubProfile, - Clubs, - Events, - Shop, - Error404, - ContactUs, - Donate, - AuthRegister, - AuthLogin, -} from "./pages/route"; import MilanState from "./context/MilanState"; import "./styles/App.css"; import BacktoTop from "../src/components/Button/BacktoTop/BacktoTop.jsx"; +import routesConfig from "./utils/routesConfig"; const App = () => { return ( - <> - - - - } /> - } /> - } /> - } /> - - } /> - } /> - } /> - - } /> - - } /> - } /> - } /> - - - - - + + + + {routesConfig.map((route, index) => ( + + ))} + + + + ); }; diff --git a/src/pages/Auth/AuthFormmodule.js b/src/pages/Auth/AuthFormmodule.js new file mode 100644 index 00000000..502743b0 --- /dev/null +++ b/src/pages/Auth/AuthFormmodule.js @@ -0,0 +1,66 @@ +import { useState } from "react"; +import useValidation from "../../hooks/useValidation"; +import { showErrorToast, showSuccessToast } from "../../utils/Toasts"; +import { useNavigate } from "react-router-dom"; +import { SetAuthCookies } from "../../utils/Cookies"; +import useStore from "../../store"; + +export function useFormLogic(initialState, submitCallback, redirectPath) { + const navigate = useNavigate(); + const [formState, setFormState] = useState(initialState); + const [isLoading, setIsLoading] = useState(false); + + const userNeedsLogin = useStore((state) => state.userNeedsLogin); + + const handleChange = (e) => { + setFormState({ ...formState, [e.target.name]: e.target.value }); + }; + + const handleSubmit = async (e) => { + setIsLoading(true); + e.preventDefault(); + + const validationErrors = useValidation(formState); + + if (validationErrors.length > 0) { + validationErrors.forEach((error) => { + showErrorToast(error.message); + }); + setTimeout(() => { + setIsLoading(false); + }, 1000); + } else { + const data = await submitCallback(formState); + handleApiResponse(data); + SetAuthCookies(data); + } + }; + + const handleApiResponse = (response) => { + setIsLoading(false); + + if (response?.status === 201) { + showSuccessToast(response?.data?.message); + + console.log(userNeedsLogin); + + setTimeout(() => { + setIsLoading(false); + navigate(redirectPath); + }, 2000); + } else { + showErrorToast(response?.message); + setFormState({ ...formState }); + setTimeout(() => { + setIsLoading(false); + }, 1000); + } + }; + + return { + formState, + isLoading, + handleChange, + handleSubmit, + }; +} diff --git a/src/pages/Auth/AuthLogin.jsx b/src/pages/Auth/AuthLogin.jsx index 656474fd..02dddb4d 100644 --- a/src/pages/Auth/AuthLogin.jsx +++ b/src/pages/Auth/AuthLogin.jsx @@ -1,7 +1,4 @@ import { useState } from "react"; -import { useNavigate } from "react-router-dom"; -import useValidation from "../../hooks/useValidation"; -import { showErrorToast, showSuccessToast } from "../../utils/Toasts"; import { LoginClub, LoginUser } from "../../service/MilanApi"; import { Helmet } from "react-helmet-async"; import { ToastContainer } from "react-toastify"; @@ -10,82 +7,36 @@ import TopButton from "../../components/Button/AuthButton/TopButton"; import { FiEye, FiEyeOff } from "react-icons/fi"; import { FaChevronDown } from "react-icons/fa"; import "./AuthPage.css"; -import { SetAuthCookies } from "../../utils/Cookies"; +import { useFormLogic } from "./AuthFormmodule"; const AuthLogin = () => { - const navigate = useNavigate(); - const [userType, setUserType] = useState("individual"); - const [credentials, setCredentials] = useState({ - email: "", - password: "", - }); - - const [isLoading, setIsLoading] = useState(false); - - const handleChange = (e) => { - setCredentials({ ...credentials, [e.target.name]: e.target.value }); - }; + const userTypeOptions = [ + { value: "individual", label: "Individual" }, + { value: "club", label: "Charity/Club/NGO" }, + ]; - const handleUserTypeChange = (e) => { - setUserType(e.target.value); - setCredentials({ - email: "", - password: "", - }); - }; - - const handleSubmit = async (e) => { - setIsLoading(true); - e.preventDefault(); - const validationErrors = useValidation(credentials); - if (validationErrors.length > 0) { - validationErrors.forEach((error) => { - showErrorToast(error.message); - }); - setTimeout(() => { - setIsLoading(false); - }, 1000); - } else { - if (userType === "individual") { - const data = await LoginUser(credentials); - handleApiResponse(data); - SetAuthCookies(data); - } else if (userType === "club") { - const data = await LoginClub(credentials); - handleApiResponse(data); - SetAuthCookies(data); - } - } - }; - - const handleApiResponse = (response) => { - if (response?.status === 201) { - showSuccessToast(response?.data?.message); - - setTimeout(() => { - setIsLoading(false); - navigate("/"); - }, 2000); - } else { - showErrorToast(response?.message); - setCredentials({ ...credentials }); + const { formState, isLoading, handleChange, handleSubmit } = useFormLogic( + { email: "", password: "" }, + handleLoginSubmit, + "/", + ); - setTimeout(() => { - setIsLoading(false); - }, 1000); + async function handleLoginSubmit(credentials) { + if (userType === "individual") { + const data = await LoginUser(credentials); + return data; + } else if (userType === "club") { + const data = await LoginClub(credentials); + return data; } - }; + } const [passwordType, setPasswordType] = useState("password"); const passwordToggle = () => { - if (passwordType === "password") { - setPasswordType("text"); - } else { - setPasswordType("password"); - } + setPasswordType(passwordType === "password" ? "text" : "password"); }; return ( @@ -119,11 +70,14 @@ const AuthLogin = () => { id="userType" name="userType" value={userType} - onChange={handleUserTypeChange} + onChange={(e) => setUserType(e.target.value)} className="form-control user-type-select" > - - + {userTypeOptions.map((option) => ( + + ))} @@ -136,7 +90,7 @@ const AuthLogin = () => { type="email" className=" form-control " name="email" - value={credentials.email} + value={formState.email} onChange={handleChange} required aria-label="Club email" @@ -158,7 +112,7 @@ const AuthLogin = () => { type={passwordType} className=" form-control " name="password" - value={credentials.password} + value={formState.password} onChange={handleChange} required id="password-des" diff --git a/src/pages/Auth/AuthRegister.jsx b/src/pages/Auth/AuthRegister.jsx index 719f6fcb..b2fca3ba 100644 --- a/src/pages/Auth/AuthRegister.jsx +++ b/src/pages/Auth/AuthRegister.jsx @@ -1,7 +1,4 @@ import { useState } from "react"; -import { useNavigate } from "react-router-dom"; -import useValidation from "../../hooks/useValidation"; -import { showErrorToast, showSuccessToast } from "../../utils/Toasts"; import { RegisterClub, RegisterUser } from "../../service/MilanApi"; import { Helmet } from "react-helmet-async"; import { ToastContainer } from "react-toastify"; @@ -10,118 +7,43 @@ import TopButton from "../../components/Button/AuthButton/TopButton"; import { FiEye, FiEyeOff } from "react-icons/fi"; import { FaChevronDown } from "react-icons/fa"; import "./AuthPage.css"; +import { useFormLogic } from "./AuthFormmodule"; const AuthRegister = () => { - const navigate = useNavigate(); - const [userType, setUserType] = useState("individual"); - const [credentials, setCredentials] = useState({ - firstname: "", - lastname: "", - email: "", - password: "", - confirmPassword: "", - address: "", - pincode: "", - - name: "", - description: "", - tagLine: "", - }); - - const [isLoading, setIsLoading] = useState(false); - - const handleChange = (e) => { - if (e.target.name === "pincode") { - if ( - e.target.value.toString().length < 7 && - !e.target.value.toString().includes(".") - ) { - setCredentials({ ...credentials, [e.target.name]: e.target.value }); - } - return; - } - setCredentials({ ...credentials, [e.target.name]: e.target.value }); - }; + const userTypeOptions = [ + { value: "individual", label: "Individual" }, + { value: "club", label: "Charity/Club/NGO" }, + ]; - const handleUserTypeChange = (e) => { - setUserType(e.target.value); - setCredentials({ - firstname: "", - lastname: "", - email: "", - password: "", - confirmPassword: "", - address: "", - pincode: "", - name: "", - description: "", - tagLine: "", - }); - }; - - const handleSubmit = async (e) => { - setIsLoading(true); - e.preventDefault(); - const validationErrors = useValidation( - credentials, - userType === "individual", - userType === "club", - ); - - if (validationErrors.length > 0) { - validationErrors.forEach((error) => { - showErrorToast(error.message); - }); - setTimeout(() => { - setIsLoading(false); - }, 1000); - } else { - if (userType === "individual") { - const data = await RegisterUser(credentials); - handleApiResponse(data); - } else if (userType === "club") { - const data = await RegisterClub(credentials); - handleApiResponse(data); - } - } - }; - - const handleApiResponse = (response) => { - if (response?.status === 201) { - showSuccessToast(response?.data?.message); - - setTimeout(() => { - setIsLoading(false); - navigate("/auth/login"); - }, 3000); - } else { - showErrorToast(response?.message); - setCredentials({ ...credentials }); + const { formState, isLoading, handleChange, handleSubmit } = useFormLogic( + { email: "", password: "" }, + handleLoginSubmit, + "/auth/login", + ); - setTimeout(() => { - setIsLoading(false); - }, 1000); + async function handleLoginSubmit(credentials) { + if (userType === "individual") { + const data = await RegisterUser(credentials); + return data; + } else if (userType === "club") { + const data = await RegisterClub(credentials); + return data; } - }; + } const [passwordType, setPasswordType] = useState("password"); + const [confirmPasswordType, setConfirmPasswordType] = useState("password"); const passwordToggle = () => { - if (passwordType === "password") { - setPasswordType("text"); - } else { - setPasswordType("password"); - } + setPasswordType(passwordType === "password" ? "text" : "password"); }; - const [confirmPasswordType, setConfirmPasswordType] = useState("password"); - const confirmPasswordToggle = () => { - if (confirmPasswordType === "password") { - setConfirmPasswordType("text"); - } else setConfirmPasswordType("password"); + setConfirmPasswordType( + confirmPasswordType === "password" ? "text" : "password", + ); }; return ( @@ -156,11 +78,14 @@ const AuthRegister = () => { id="userType" name="userType" value={userType} - onChange={handleUserTypeChange} + onChange={(e) => setUserType(e.target.value)} className="form-control user-type-select" > - - + {userTypeOptions.map((option) => ( + + ))} @@ -176,7 +101,7 @@ const AuthRegister = () => { type="text" className=" form-control " name="firstname" - value={credentials.firstname} + value={formState.firstname} onChange={handleChange} required id="firstname" @@ -192,7 +117,7 @@ const AuthRegister = () => { type="text" className=" form-control " name="lastname" - value={credentials.lastname} + value={formState.lastname} onChange={handleChange} required id="lastname" @@ -210,7 +135,7 @@ const AuthRegister = () => { type="text" className=" form-control " name="name" - value={credentials.name} + value={formState.name} onChange={handleChange} required id="name" @@ -228,7 +153,7 @@ const AuthRegister = () => { type="email" className=" form-control " name="email" - value={credentials.email} + value={formState.email} onChange={handleChange} required id="email" @@ -244,7 +169,7 @@ const AuthRegister = () => { type={passwordType} className=" form-control " name="password" - value={credentials.password} + value={formState.password} onChange={handleChange} required id="password" @@ -262,7 +187,7 @@ const AuthRegister = () => { type={confirmPasswordType} className=" form-control " name="confirmPassword" - value={credentials.confirmPassword} + value={formState.confirmPassword} onChange={handleChange} required id="confirmPassword" @@ -290,7 +215,7 @@ const AuthRegister = () => { type="text" className=" form-control " name="tagLine" - value={credentials.tagLine} + value={formState.tagLine} onChange={handleChange} required id="tagLine" @@ -307,7 +232,7 @@ const AuthRegister = () => {