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 = () => {