diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 5bce44d..fd668e9 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,52 +1,52 @@ import useWindowDimensions from "../hooks/WindowDimensionsHook.tsx"; +import { Link, useNavigate } from "react-router-dom"; +import { auth } from "../utils/firebase.ts"; +import { useEffect, useState } from "react"; +import { User } from "firebase/auth"; import "../assets/css/Header.css" -import {Link, useNavigate} from "react-router-dom"; -import {auth} from "../utils/firebase.ts"; -import {useState} from "react"; -import {User} from "firebase/auth"; export function Header() { const { width, height } = useWindowDimensions(); - const aspect_ratio = (width == 0? 1 : width) / (height == 0? 1 : height); + const aspect_ratio = (width == 0 ? 1 : width) / (height == 0 ? 1 : height); const use_narrow = aspect_ratio < 0.7; - 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 handleLogout = async () => { + + const [isLoggedIn, setIsLoggedIn] = useState(!!auth.currentUser?.uid); + // displayName is optional, an account may not have a displayName but is logged in + const [displayName, setDisplayName] = useState(auth.currentUser?.displayName); + + // only attach the event listener once, otherwise we get an infinite loop + useEffect(() => { + auth.onAuthStateChanged((user: User | null) => { + setIsLoggedIn(!!user?.uid); + setDisplayName(user?.displayName); + }); + }, []); + + async function handleLogout() { await auth.signOut(); + navigate("/", { replace: true }); - }; - - return ( -
- {/* App Name reloads home page */} - -

{use_narrow? "B-19" : "Budget-19"}

-
- - {/* Pages */} -
    - {/* Links to dashboard with tiles */} -
  • Dashboard
  • - - {/* Links to transactions page with table of expenses */} -
  • Transactions
  • - -
  • Firestore Test
  • - - {userName && ( -
  • - {userName} - -
  • - )} -
-
- ); + } + + return
+ {/* App Name reloads home page */} +

{use_narrow ? "B-19" : "Budget-19"}

+ + {/* Pages */} +
    + {/* Links to dashboard with tiles */} +
  • Dashboard
  • + + {/* Links to transactions page with table of expenses */} +
  • Transactions
  • + +
  • Firestore Test
  • + + {displayName &&
  • {displayName}
  • } + + {isLoggedIn &&
  • } +
+
} \ No newline at end of file diff --git a/src/components/transactions/InputTransaction.tsx b/src/components/transactions/InputTransaction.tsx index 27f97f6..19f73b7 100644 --- a/src/components/transactions/InputTransaction.tsx +++ b/src/components/transactions/InputTransaction.tsx @@ -4,7 +4,7 @@ import { Button, Modal, Form, Alert } from "react-bootstrap"; import { auth } from "../../utils/firebase"; import { writeNewTransaction } from "../../utils/transaction.ts"; -export function InputTransaction({ show, setShow}: { show: boolean, setShow: React.Dispatch> }) { +export function InputTransaction({ show, setShow }: { show: boolean, setShow: React.Dispatch> }) { const [name, setName] = useState(""); const [category, setCategory] = useState("Income"); @@ -49,7 +49,6 @@ export function InputTransaction({ show, setShow}: { show: boolean, setShow: Rea setTimeout(() => setSuccessMsg(null), 10000); setName(""); - setCategory(""); setAmount(""); setDescription(""); setNotes(""); diff --git a/src/components/transactions/Transaction.ts b/src/components/transactions/Transaction.ts index e70ad34..02756f5 100644 --- a/src/components/transactions/Transaction.ts +++ b/src/components/transactions/Transaction.ts @@ -63,7 +63,7 @@ export class Transaction { this.isValid = false; this.invalidField = "date"; } else { - this.date = date; + this.date = `${year}-${month}-${day}`; } return this; @@ -156,7 +156,7 @@ export class Transaction { this.amount as number, this.category as string, this.currency as string, - new Date((this.date as string) + (this.time as string)).getTime(), + new Date((this.date as string) + " " + (this.time as string)).getTime(), this.description as string, this.emoji as string, this.name as string, diff --git a/src/pages/dashboard/DashboardPage.tsx b/src/pages/dashboard/DashboardPage.tsx index cc90cea..da27361 100644 --- a/src/pages/dashboard/DashboardPage.tsx +++ b/src/pages/dashboard/DashboardPage.tsx @@ -29,7 +29,7 @@ const tileSize = (tile: { text: string; rows: number; cols: number }) => ({ rowSpan: tile.rows }); -export default function Dashboard(props: Props) { +export default function Dashboard(props: Props) { const {width} = useWindowDimensions(); const columns = Math.max(Math.floor(width / 200), 1); @@ -38,7 +38,7 @@ export default function Dashboard(props: Props) { return <>
-
+
{/* TODO: MOVE TO CORRECT POSITION ON DASHBOARD */}
@@ -58,9 +58,9 @@ export default function Dashboard(props: Props) { tileSize={tileSize} ratio={1} columns={columns} - > + />
-
+ } \ No newline at end of file