Made header aware of auth state

Robert-M-Lucas · Apr 26, 2024 · 0721274 · 0721274
1 parent 297a7e7
commit 0721274
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 46 deletions.
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,30 +1,28 @@
 import useWindowDimensions from "../hooks/WindowDimensionsHook.tsx";
 import "../assets/css/Header.css"
-import {Link, useNavigate, useLocation} from "react-router-dom";
+import {Link, useNavigate} from "react-router-dom";
 import {auth} from "../utils/firebase.ts";
+import {useState} from "react";
+import {User} from "firebase/auth";
 
-interface Props {
-    user?: string;
-    children?: React.ReactNode;
-}
-
-export function Header({ user }: Props) {
+export function Header() {
     const { width, height } = useWindowDimensions();
     const aspect_ratio = (width == 0? 1 : width) / (height == 0? 1 : height);
     const use_narrow = aspect_ratio < 0.7;
 
-    const currentUser = auth.currentUser?.displayName?? "";
+    const [userName, setUserName] = useState<string | null>(null);
+    auth.onAuthStateChanged((new_user: User | null) => {
+        if (new_user === null) { setUserName(null); }
+        else { setUserName(new_user?.displayName) }
+    });
 
     const navigate = useNavigate();
-    const location = useLocation();
 
-    const handleLogout = () => {
-        auth.signOut();
+    const handleLogout = async () => {
+        await auth.signOut();
         navigate("/", { replace: true });
     };
 
-    const isIndexPage = location.pathname === "/";
-
     return (
         <header className="header">
             {/* App Name reloads home page */}
@@ -35,16 +33,16 @@ export function Header({ user }: Props) {
             {/* Pages */}
             <ul className="header-nav">
                 {/* Links to dashboard with tiles */}
-                <li><Link to="/dash" className={`header-item ${isIndexPage ? "text-muted bg-transparent" : "header-item"}`}>Dashboard</Link></li>
+                <li><Link to="/dash" className={`header-item ${userName ? "header-item" : "text-muted bg-transparent"}`}>Dashboard</Link></li>
 
                 {/* Links to transactions page with table of expenses */}
-                <li><Link to="/transactions" className={`header-item ${isIndexPage ? "text-muted bg-transparent" : "header-item"}`}>Transactions</Link></li>
+                <li><Link to="/transactions" className={`header-item ${userName ? "header-item" : "text-muted bg-transparent"}`}>Transactions</Link></li>
 
                 <li><Link to="/test" className="header-item">Firestore Test</Link></li>
 
-                {user && (
+                {userName && (
                     <li>
-                        <span className="username">{currentUser}</span>
+                        <span className="username">{userName}</span>
                         <button type="button" className="logout-btn" onClick={handleLogout}>Logout</button>
                     </li>
                 )}

diff --git a/src/pages/Graphs/Graphs.tsx b/src/pages/Graphs/Graphs.tsx
@@ -135,7 +135,7 @@ export default function GraphDashboard(){
 
     return (
         <div className="vh-100 d-flex flex-column">
-            <Header user="testUser"/>
+            <Header/>
             <Sidebar>
                 <div className="App ps-5 pe-5 mt-3">
                     <h1>Testing Graph Tiles</h1>

diff --git a/src/pages/dashboard/DashboardPage.tsx b/src/pages/dashboard/DashboardPage.tsx
@@ -38,7 +38,7 @@ export default function Dashboard(props: Props) {
 
     return <>
         <div className="vh-100 d-flex flex-column">
-            <Header user="testUser"/>
+            <Header/>
 
             {/* TODO: MOVE TO CORRECT POSITION ON DASHBOARD */}
             <div> 

diff --git a/src/pages/index/IndexPage.tsx b/src/pages/index/IndexPage.tsx
@@ -2,31 +2,30 @@ import {Header} from "../../components/Header.tsx";
 import {Footer} from "../../components/Footer.tsx";
 
 import "./IndexPage.scss"
-import {Link, useNavigate} from "react-router-dom";
+import {useNavigate} from "react-router-dom";
 import { signInWithGoogle } from '../../utils/authentication';
-import { useState } from "react";
+import {useState} from "react";
+import {auth} from "../../utils/firebase.ts";
+import {User} from "firebase/auth";
 
-interface IndexPageProps {
-    user?: string;
-}
 
-function IndexPage({ user }: IndexPageProps) {
-    const [currentUser, setCurrentUser] = useState<string | undefined>(user);
+function IndexPage() {
     const navigate = useNavigate();
 
     const handleSignIn = async () => {
-        const user = await signInWithGoogle();
-        setCurrentUser(user);
+        await signInWithGoogle();
         navigate('/dash', { replace: true }); // Redirect to /dash after signing in
     };
 
+    const [userName, setUserName] = useState<string | null>(null);
+    auth.onAuthStateChanged((new_user: User | null) => {
+        if (new_user === null) { setUserName(null); }
+        else { setUserName(new_user?.displayName) }
+    });
+
     return (<>
         <div className="d-flex vh-100 flex-column">
-            {currentUser? (
-                <Header user={currentUser} />
-            ) : (
-                <Header user="" /> // or some other default value
-            )}
+            <Header/>
             <div className="row vw-100" style={{flexGrow: 1, maxWidth: "99vw"}}>
                 <div className="col-6 p-0 d-flex justify-content-center align-items-center">
                     <div className="text-center">
@@ -45,21 +44,32 @@ function IndexPage({ user }: IndexPageProps) {
                 }}></div>
                 <div className="col-6 p-0 d-flex justify-content-center align-items-center">
                     <div className="text-center">
-                        <h1 className="pb-2" style={{fontSize: "60px"}}>Login</h1>
-                        <div className="row">
-                            <div className="col p-2">
-                                <button type="button" className="login-with-google-btn" onClick={handleSignIn}>
-                                    Sign in with Google
-                                </button>
+                        {userName ? <>
+                            <h1 className="pb-2" style={{fontSize: "60px"}}>Hello, {userName}</h1>
+                            <div className="row">
+                                <div className="col p-2">
+                                    <button type="button" className="login-with-google-btn" onClick={async () => { await auth.signOut() }}>
+                                        Logout
+                                    </button>
+                                </div>
                             </div>
-                            <div className="col p-2">
-                                <Link to="/login-page">
-                                    <button type="button" className="login-with-ms-btn text-nowrap">Sign in with
-                                        Microsoft
+                        </> : <>
+                            <h1 className="pb-2" style={{fontSize: "60px"}}>Login</h1>
+                            <div className="row">
+                                <div className="col p-2">
+                                    <button type="button" className="login-with-google-btn" onClick={handleSignIn}>
+                                        Sign in with Google
                                     </button>
-                                </Link>
+                                </div>
+                                {/*<div className="col p-2">*/}
+                                {/*    <Link to="/login-page">*/}
+                                {/*        <button type="button" className="login-with-ms-btn text-nowrap">Sign in with*/}
+                                {/*            Microsoft*/}
+                                {/*        </button>*/}
+                                {/*    </Link>*/}
+                                {/*</div>*/}
                             </div>
-                        </div>
+                        </> }
                     </div>
                 </div>
             </div>

diff --git a/src/router.tsx b/src/router.tsx
@@ -113,7 +113,7 @@ export const router = createBrowserRouter([
 
     {
         path: "/user-test",
-        element: <IndexPage user={"testUserName"}/>,
+        element: <IndexPage/>,
         errorElement:<_404Page/>
     },
     {