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.
shivansh-bhatnagar18 · Jun 11, 2024 · 12e7b87 · 12e7b87
1 parent 3fa7738
commit 12e7b87
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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}
             />