Merge pull request #7 from nuuxcode/ayoub

Fix import paths and remove unused code and

frontend/src/App.tsx

@@ -1,7 +1,7 @@
 import Header from "./components/header/header.component";
 import { Toaster } from "react-hot-toast";
-import "./index.css";
 import { Routes } from "./routes/routes";
+import "./index.css";
 function App() {
   return (
     <div className="h-screen">

frontend/src/components/auth/loginForm/loginForm.component.tsx

@@ -1,7 +1,6 @@
-import React, { useState, useContext, useEffect } from "react";
+import React, { useState } from "react";
 import { Link } from "react-router-dom";
 import { ViewIcon, ViewOffIcon } from "@chakra-ui/icons";
-import GlobalContext from "../../../context/globalContext";
 import axios from "../../../apis/axios";
 import { useNavigate } from "react-router-dom";
 import toast from "react-hot-toast";
@@ -18,6 +17,7 @@ import {
   InputRightElement,
   InputGroup,
 } from "@chakra-ui/react";
+import { useAuth } from "../../../hooks/useAuth";
 
 interface LoginCredentials {
   email: string;
@@ -27,7 +27,7 @@ interface LoginCredentials {
 const LoginForm: React.FC = () => {
   const navigate = useNavigate();
 
-  const { setAuth, auth } = useContext(GlobalContext);
+  const { login } = useAuth();
   const [data, setData] = useState<LoginCredentials>({
     email: "",
     password: "",
@@ -37,12 +37,6 @@ const LoginForm: React.FC = () => {
   const [errMsg, setErrMsg] = useState("");
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [showPassword, setShowPassword] = useState(false);
-  useEffect(() => {
-    if (auth?.accessToken) {
-      navigate("/");
-    }
-  });
-  console.log(auth);
 
   /**
    * Handles the change event for the email input field.
@@ -84,14 +78,20 @@ const LoginForm: React.FC = () => {
     try {
       // Make a POST request to your login endpoint
       const response = await axios.post("/auth/login", JSON.stringify(data), {
-        headers: { "Content-Type": "application/json" },
+        headers: {
+          "Content-Type": "application/json",
+        },
         withCredentials: true,
       });
 
-      console.log(JSON.stringify(response?.data));
       const accessToken = response?.data?.accessToken;
-      const roles = response?.data?.roles;
-      setAuth({ ...data, roles, accessToken });
+      const userRes = response?.data?.user;
+      login({
+        id: userRes.id,
+        name: userRes?.name,
+        email: userRes?.email,
+        accessToken: accessToken,
+      });
       setData({ email: "", password: "" });
       setErrMsg("");
       setIsSubmitting(false);
@@ -110,14 +110,13 @@ const LoginForm: React.FC = () => {
       }
 
       console.log(data);
+      console.log(error);
       console.log(errEmail, errPassword);
-      console.log(auth);
       console.log(errMsg);
     } finally {
       setIsSubmitting(false);
     }
   };
-
   return (
     <form onSubmit={handleSubmit} className="space-y-4 md:space-y-6 w-4/5">
       <FormControl isInvalid={errMsg != ""}>

frontend/src/components/auth/registerForm/registerForm.component.tsx

@@ -1,6 +1,5 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
-import GlobalContext from "../../../context/globalContext";
 import toast from "react-hot-toast";
 import {
   FormControl,
@@ -18,18 +17,16 @@ import {
 } from "@chakra-ui/react";
 import { PhoneIcon, ViewIcon, ViewOffIcon } from "@chakra-ui/icons";
 import axios from "../../../apis/axios";
-
+import { useAuth } from "../../../hooks/useAuth";
 interface RegisterCredentials {
   name: string;
   email: string;
   password: string;
 }
 
 const LoginForm: React.FC = () => {
-  const { auth } = useContext(GlobalContext);
   const navigate = useNavigate();
-
-  //   const [email, setEmail] = useState("");
+  const { user } = useAuth();
   const [confirmPassword, setConfirmPassword] = useState("");
 
   const [data, setData] = useState<RegisterCredentials>({
@@ -45,72 +42,6 @@ const LoginForm: React.FC = () => {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [showPassword, setShowPassword] = useState(false);
 
-  useEffect(() => {
-    if (auth?.accessToken) {
-      navigate("/");
-    }
-  });
-
-  /**
-   * Handles the change event for the email input field.
-   *
-   * @param event - The change event object.
-   */
-  const handleEmailChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setData({ ...data, email: event.target.value });
-  };
-
-  /**
-   * Handles the change event for the name input field.
-   *
-   * @param event - The change event object.
-   */
-  const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setData({ ...data, name: event.target.value });
-  };
-
-  // /**
-  //  * Handles the change event for the Date Of Birth input field.
-  //  *
-  //  * @param event - The change event object.
-  //  */
-  // const handleDateOfBirthChange = (
-  //   event: React.ChangeEvent<HTMLInputElement>
-  // ) => {
-  //   setData({ ...data, dateOfBirth: event.target.value });
-  // };
-
-  // /**
-  //  * Handles the change event for the Phone Number input field.
-  //  *
-  //  * @param event - The change event object.
-  //  */
-  // const handlePhoneNumberChange = (
-  //   event: React.ChangeEvent<HTMLInputElement>
-  // ) => {
-  //   setData({ ...data, phoneNumber: event.target.value });
-  // };
-
-  /**
-   * Handles the change event for the password input field.
-   *
-   * @param event - The change event object.
-   */
-  const handlePasswordChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setData({ ...data, password: event.target.value });
-  };
-
-  /**
-   * Handles the change event for the confirm password input field.
-   *
-   * @param event - The change event object.
-   */
-  const handleConfirmPasswordChange = (
-    event: React.ChangeEvent<HTMLInputElement>
-  ) => {
-    setConfirmPassword(event.target.value);
-  };
-
   /**
    * Handles validation input field.
    *
@@ -170,7 +101,7 @@ const LoginForm: React.FC = () => {
       toast.success("Successfully created!");
     } catch (error: any) {
       console.log(error);
-      toast.error(error.response.data?.message[0]);
+      toast.error(error?.response?.data?.message[0]);
 
       if (!error?.response) {
         setErrMsg("Something went wrong. Please try again later.");
@@ -184,7 +115,7 @@ const LoginForm: React.FC = () => {
     }
     console.log(data);
     console.log(errName, errEmail, errPassword);
-    console.log(auth);
+    console.log(user);
     console.log(errMsg);
     setIsSubmitting(false);
   };
@@ -204,7 +135,9 @@ const LoginForm: React.FC = () => {
           <Input
             type="text"
             value={data.name}
-            onChange={handleNameChange}
+            onChange={(e) => {
+              setData({ ...data, name: e.target.value });
+            }}
             placeholder="Full Name"
           />
           <FormErrorMessage>Name is messing</FormErrorMessage>
@@ -214,7 +147,9 @@ const LoginForm: React.FC = () => {
           <Input
             type="email"
             value={data.email}
-            onChange={handleEmailChange}
+            onChange={(e) => {
+              setData({ ...data, email: e.target.value });
+            }}
             placeholder="Email"
           />
           <FormErrorMessage>email should not be empty</FormErrorMessage>
@@ -226,7 +161,9 @@ const LoginForm: React.FC = () => {
           <Input
             type="date"
             // value={data.dateOfBirth}
-            // onChange={handleDateOfBirthChange}
+            //  onChange={(e) => {
+            //   setData({ ...data, dateOfBirth: e.target.value });
+            // }}
             placeholder="DD/MM/YYYY"
           />
           <FormErrorMessage></FormErrorMessage>
@@ -240,7 +177,9 @@ const LoginForm: React.FC = () => {
             <Input
               type="tel"
               // value={data.phoneNumber}
-              // onChange={handlePhoneNumberChange}
+              // onChange={(e) => {
+              //   setData({ ...data, phoneNumber: e.target.value });
+              // }}
               placeholder="Phone Number"
             />
           </InputGroup>
@@ -254,7 +193,9 @@ const LoginForm: React.FC = () => {
             <Input
               type={showPassword ? "text" : "password"}
               value={data.password}
-              onChange={handlePasswordChange}
+              onChange={(e) => {
+                setData({ ...data, password: e.target.value });
+              }}
               placeholder="Password"
             />
             <InputRightElement h={"full"}>
@@ -274,7 +215,7 @@ const LoginForm: React.FC = () => {
             <Input
               type={showPassword ? "text" : "password"}
               value={confirmPassword}
-              onChange={handleConfirmPasswordChange}
+              onChange={(e) => setConfirmPassword(e.target.value)}
               placeholder="Confirm Password"
             />
             <InputRightElement h={"full"}>

frontend/src/components/header/header.component.tsx

@@ -1,32 +1,30 @@
-import React, { useContext } from "react";
+import React from "react";
 import { Link } from "react-router-dom";
 import { Button } from "@chakra-ui/react";
-import GlobalContext from "../../context/globalContext";
 import LogoutButton from "../logoutButton.component";
+import { useAuth } from "../../hooks/useAuth";
 
 /**
  * Header: A functional component representing a header in React with Tailwind CSS.
  *
  * @returns {JSX.Element} - The JSX element representing the header.
  */
 const Header: React.FC = () => {
-  const { auth } = useContext(GlobalContext);
-  console.log(auth);
-
+  const { user } = useAuth();
   return (
     <header className="flex justify-between bg-gray-800 text-white py-4 px-6">
       <Link to="/">
         <h1 className="text-2xl font-bold">My Header</h1>
       </Link>
       <div>
-        {auth?.accessToken ? (
+        {user?.accessToken ? (
           <>
-            <Link to="/">
+            <Link to="/profile">
               <Button colorScheme="teal" variant="solid">
                 Profile
               </Button>
             </Link>
-            <LogoutButton auth={auth} />
+            <LogoutButton />
           </>
         ) : (
           <>

frontend/src/components/logoutButton.component.tsx

@@ -1,32 +1,26 @@
 import { Button } from "@chakra-ui/react";
-import React, { useContext } from "react";
+import React from "react";
 import axios from "../apis/axios";
-import GlobalContext from "../context/globalContext";
 import { useNavigate } from "react-router-dom";
+import { useAuth } from "../hooks/useAuth";
 
-interface AuthData {
-  accessToken: string;
-}
-
-const LogoutButton: React.FC<{
-  auth: AuthData | null;
-}> = ({ auth }) => {
-  const { setAuth } = useContext(GlobalContext);
+const LogoutButton: React.FC = () => {
+  const { logout, user } = useAuth();
   const navigate = useNavigate();
 
   const handleLogout = async () => {
     try {
-      if (auth?.accessToken) {
+      if (user?.accessToken) {
         await axios.post("/auth/logout", null, {
           headers: {
-            Authorization: `Bearer ${auth.accessToken}`,
+            Authorization: `Bearer ${user.accessToken}`,
           },
           withCredentials: true,
         });
       }
       navigate("/login");
       console.log("Logout successful");
-      setAuth({});
+      logout();
     } catch (error) {
       console.error("Logout failed:", error);
     }

frontend/src/components/route/privateRoutes.component.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { Navigate, Outlet } from "react-router-dom";
+import { useAuth } from "../../hooks/useAuth";
+
+const PrivateRoutes: React.FC = () => {
+  const { user } = useAuth();
+  return <>{user?.accessToken ? <Outlet /> : <Navigate to="/login" />}</>;
+};
+
+export default PrivateRoutes;

frontend/src/context/AuthContext.tsx

@@ -0,0 +1,22 @@
+import { useState } from "react";
+import { User } from "../hooks/useUser";
+// import { useAuth } from "../hooks/useAuth";
+
+import { createContext, ReactNode } from "react";
+
+interface AuthContext {
+  user: User | null;
+  setUser: (user: User | null) => void;
+}
+
+export const AuthContext = createContext<AuthContext>({} as AuthContext);
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<User | null>(null);
+
+  return (
+    <AuthContext.Provider value={{ user, setUser }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}