chore(refactor): changes to the auth logics (#1063)

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",

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 (
-    <>
-      <MilanState>
-        <Router>
-          <Routes>
-            <Route exact path="/" element={<Home />} />
-            <Route exact path="/auth/register" element={<AuthRegister />} />
-            <Route exact path="/auth/login" element={<AuthLogin />} />
-            <Route exact path="/user/profile" element={<UserProfile />} />
-
-            <Route exact path="/clubs" element={<Clubs />} />
-            <Route exact path="/clubs/profile" element={<ClubProfile />} />
-            <Route exact path="/events" element={<Events />} />
-
-            <Route exact path="/shop" element={<Shop />} />
-
-            <Route exact path="/contact" element={<ContactUs />} />
-            <Route exact path="/donateus" element={<Donate />} />
-            <Route path={"/*"} element={<Error404 />} />
-          </Routes>
-        </Router>
-        <BacktoTop />
-      </MilanState>
-    </>
+    <MilanState>
+      <Router>
+        <Routes>
+          {routesConfig.map((route, index) => (
+            <Route
+              key={index}
+              exact
+              path={route?.path}
+              element={route?.element}
+            />
+          ))}
+        </Routes>
+      </Router>
+      <BacktoTop />
+    </MilanState>
   );
 };
 

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,
+  };
+}

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"
                   >
-                    <option value="individual">Individual</option>
-                    <option value="club">Charity/Club/NGO</option>
+                    {userTypeOptions.map((option) => (
+                      <option key={option.value} value={option.value}>
+                        {option.label}
+                      </option>
+                    ))}
                   </select>
                   <FaChevronDown className="dropdown-icon" />
                 </div>
@@ -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"