From 12e7b871c5671f97d850c18d012bec532d372600 Mon Sep 17 00:00:00 2001
From: Kislay <kislayudbhav.verma.cd.eee22@itbhu.ac.in>
Date: Tue, 11 Jun 2024 14:47:34 +0530
Subject: [PATCH] homepage: Use AuthContext.

Refactored the Home component to use the auth state from the
context.
Hid the login button if the user is already logged in.
---
 frontend/src/Navbar.tsx               | 19 +++++++++++--------
 frontend/src/contexts/AuthContext.tsx |  6 ++++--
 frontend/src/pages/Home.tsx           | 16 ++++++----------
 3 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/frontend/src/Navbar.tsx b/frontend/src/Navbar.tsx
index b5b59e8..765796c 100644
--- a/frontend/src/Navbar.tsx
+++ b/frontend/src/Navbar.tsx
@@ -33,14 +33,17 @@ const Navbar: React.FC<NavbarProps> = ({
                         />
                     </button>
                 </div>
-                <div className="text-xl font-bold mt-2">
-                    <Button
-                        text="Sign In /Login"
-                        buttonSize="w-56 h-11"
-                        className="border-4"
-                        rounded="rounded-2xl"
-                    />
-                </div>
+                {!isLoggedIn && (
+                    <div className="text-xl font-bold mt-2">
+                        <Button
+                            text="Login"
+                            buttonSize="w-56 h-11"
+                            className="border-4"
+                            rounded="rounded-2xl"
+                            onClick={onLogin}
+                        />
+                    </div>
+                )}
             </div>
             {isOpen && (
                 <div className="fixed inset-0 flex z-20">
diff --git a/frontend/src/contexts/AuthContext.tsx b/frontend/src/contexts/AuthContext.tsx
index 5fcc86a..78b6d25 100644
--- a/frontend/src/contexts/AuthContext.tsx
+++ b/frontend/src/contexts/AuthContext.tsx
@@ -39,14 +39,16 @@ export function AuthProvider({ children }: { children: ReactElement }) {
         });
     }, []);
 
-    const logout = useCallback(() => {}, []);
+    const logout = useCallback(() => {
+        setUser(null);
+    }, []);
 
     const getUser = useCallback(() => {
         return user;
     }, [user]);
 
     const isLoggedIn = useCallback(() => {
-        return !!user;
+        return user !== null;
     }, [user]);
 
     return (
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index f334317..237e8c7 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import Button from '../library/button';
 import Navbar from '../Navbar';
 import '../index.css';
+import { useAuth } from '../contexts/AuthContext';
 
 const Home: React.FC = () => {
     const navigate = useNavigate();
@@ -17,25 +17,21 @@ const Home: React.FC = () => {
         console.log('Join Game with code');
         navigate('/error');
     };
-
-    const [isLoggedIn, setIsLoggedIn] = useState(false);
-    const [username, setUsername] = useState('');
+    const auth = useAuth();
 
     const handleLogin = () => {
-        setUsername('Username_7');
-        setIsLoggedIn(true);
+        auth.login();
     };
 
     const handleLogout = () => {
-        setUsername('');
-        setIsLoggedIn(false);
+        auth.logout();
     };
 
     return (
         <div className="min-h-screen bg-uno-bg bg-cover bg-center flex flex-col relative">
             <Navbar
-                isLoggedIn={isLoggedIn}
-                username={username}
+                isLoggedIn={auth.isLoggedIn()}
+                username={auth.getUser()?.name || ''}
                 onLogin={handleLogin}
                 onLogout={handleLogout}
             />