From 07212745b5b9ce2cc1cd9827d7f1ee038820dd9d Mon Sep 17 00:00:00 2001 From: Robert Lucas Date: Fri, 26 Apr 2024 12:29:02 +0100 Subject: [PATCH] Made header aware of auth state --- src/components/Header.tsx | 32 +++++++------- src/pages/Graphs/Graphs.tsx | 2 +- src/pages/dashboard/DashboardPage.tsx | 2 +- src/pages/index/IndexPage.tsx | 62 ++++++++++++++++----------- src/router.tsx | 2 +- 5 files changed, 54 insertions(+), 46 deletions(-) diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 394cd6e..5bce44d 100644 --- 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(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 (
{/* App Name reloads home page */} @@ -35,16 +33,16 @@ export function Header({ user }: Props) { {/* Pages */}
    {/* Links to dashboard with tiles */} -
  • Dashboard
    • +
  • Dashboard
    • {/* Links to transactions page with table of expenses */} -
  • Transactions
    • +
  • Transactions
  • Firestore Test
    • - {user && ( + {userName && (
  • - {currentUser} + {userName}
    • )} diff --git a/src/pages/Graphs/Graphs.tsx b/src/pages/Graphs/Graphs.tsx index 9912df6..1b1ea36 100644 --- a/src/pages/Graphs/Graphs.tsx +++ b/src/pages/Graphs/Graphs.tsx @@ -135,7 +135,7 @@ export default function GraphDashboard(){ return (
    -
    +

    Testing Graph Tiles

    diff --git a/src/pages/dashboard/DashboardPage.tsx b/src/pages/dashboard/DashboardPage.tsx index 664cabc..cc90cea 100644 --- a/src/pages/dashboard/DashboardPage.tsx +++ b/src/pages/dashboard/DashboardPage.tsx @@ -38,7 +38,7 @@ export default function Dashboard(props: Props) { return <>
    -
    +
    {/* TODO: MOVE TO CORRECT POSITION ON DASHBOARD */}
    diff --git a/src/pages/index/IndexPage.tsx b/src/pages/index/IndexPage.tsx index 16e23ab..17e3bec 100644 --- 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(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(null); + auth.onAuthStateChanged((new_user: User | null) => { + if (new_user === null) { setUserName(null); } + else { setUserName(new_user?.displayName) } + }); + return (<>
    - {currentUser? ( -
    - ) : ( -
    // or some other default value - )} +
    @@ -45,21 +44,32 @@ function IndexPage({ user }: IndexPageProps) { }}>
    -

    Login

    -
    -
    - + {userName ? <> +

    Hello, {userName}

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