Merge pull request #60 from Shu12388y/main

Resolved the login issue and add zustand

package.json

@@ -8,6 +8,8 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
+    "build:turbo":"turbo build check-types",
+    "build:check":"turbo check-types build",
     "prepare": "husky",
     "test": "jest",
     "test:watch": "jest --watch"
@@ -42,7 +44,8 @@
     "tailwind-merge": "^2.2.1",
     "ts-node": "^10.9.2",
     "vaul": "^0.9.0",
-    "zod": "^3.23.8"
+    "zod": "^3.23.8",
+    "zustand": "^5.0.0-rc.2"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.5.0",

src/app/login/page.tsx

@@ -6,15 +6,16 @@ import { ArrowRight } from "lucide-react";
 import { useState, useEffect } from "react";
 import { Toaster } from "react-hot-toast";
 import toast from "react-hot-toast";
-import { useRouter } from "next/navigation";
-import axios from "axios";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useAuthStore } from "@/context/useAuthStore";
 
 function Page() {
   const Router = useRouter();
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [disabled, setDisabled] = useState(false);
+  const login = useAuthStore((state:any)=>state.login);
 
   useEffect(() => {
     if (email.length > 0 && password.length > 0) {
@@ -25,21 +26,13 @@ function Page() {
   }, [email, password]);
 
   async function userLogin() {
-    try {
-      const userData = await axios.post("/api/user/login", { email, password });
-      console.log(userData.status)
-      if(userData.status == 200){
-        toast.success("Login Successful");
-        Router.push("/profile");
-      }
-
-    } catch (error:any) {
-      if (error.response && error.response.status === 404 || error.response && error.response.status === 400) {
-        toast.error("Wrong email or password");
-      } else {
-        console.error("An error occurred while logging in:", error);
-        toast.error("An error occurred. Please try again later.");
-      }
+    const isLoggedIn = await login(email, password);
+    if (isLoggedIn) {
+      Router.push("/profile");
+      Router.refresh()
+      toast.success("Login Successful");
+    } else {
+      toast.error("Wrong email or password");
     }
   }
 
@@ -65,7 +58,7 @@ function Page() {
                   Create a free account
                 </Link>
               </p>
-              <form action="#" method="POST" className="mt-8">
+              <div className="mt-8">
                 <div className="space-y-5">
                   <div>
                     <label
@@ -124,14 +117,13 @@ function Page() {
                     </button>
                   </div>
                 </div>
-              </form>
-
+              </div>
             </div>
           </div>
           <div className="h-full w-full">
             <Image
-            height={1200}
-            width={1200}
+              height={1200}
+              width={1200}
               className="mx-auto h-full w-full rounded-md object-cover"
               src="https://images.unsplash.com/photo-1630673245362-f69d2b93880e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80"
               alt=""

src/components/component/NavBar.tsx

@@ -2,7 +2,7 @@
 import React, { useEffect } from "react";
 import { Menu, X } from "lucide-react";
 import Link from "next/link";
-import { hasCookie } from "cookies-next";
+import { useAuthStore } from "@/context/useAuthStore";
 
 const menuItems = [
   {
@@ -28,22 +28,17 @@ const menuItems = [
 ];
 
 export function NavBar() {
-  useEffect(() => {
-    const token = hasCookie("token");
-    if (token) {
-      setState("Log Out");
-    } else {
-      setState("Log In");
-    }
-  }, [hasCookie]);
-
+  const isAuthenticated = useAuthStore((state:any) => state.auth);
   const [isMenuOpen, setIsMenuOpen] = React.useState(false);
   const [state, setState] = React.useState("Log In");
 
+  useEffect(() => {
+    setState(isAuthenticated ? "Log Out" : "Log In");
+  }, [isAuthenticated]);
+
   const toggleMenu = () => {
     setIsMenuOpen(!isMenuOpen);
   };
-
   return (
     <div className="relative w-full bg-white pb-3 pt-6">
       <div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-2 sm:px-6 lg:px-8">

src/context/useAuthStore.ts

@@ -0,0 +1,30 @@
+import { create } from 'zustand';
+import axios from 'axios';
+
+
+export const useAuthStore = create((set) => ({ 
+  isAuthenticated: false,
+
+  login: async (email:string, password:string) => {
+    try {
+      const response = await axios.post('/api/user/login', { email, password });
+      if (response.status === 200) {
+        set({ isAuthenticated: true });
+        return true
+      }
+    } catch (error) {
+      set({ isAuthenticated: false })
+      console.error('Login failed:', error);
+      return false
+    }
+  },
+
+  logout: () => {
+    set({ isAuthenticated: false });
+  },
+  auth: () => {
+    return set((state:any) => state.isAuthenticated); // Return the current authentication status
+},
+}));
+
+