Merge pull request #34 from Robert-M-Lucas/dev-SCRUM-46/51

Store transactions in database + fix header

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<string | null>(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<boolean>(!!auth.currentUser?.uid);
+    // displayName is optional, an account may not have a displayName but is logged in
+    const [displayName, setDisplayName] = useState<string | null | undefined>(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 (
-        <header className="header">
-            {/* App Name reloads home page */}
-            <a href="/" className="site-title">
-                <h3>{use_narrow? "B-19" : "Budget-19"}</h3>
-            </a>
-
-            {/* Pages */}
-            <ul className="header-nav">
-                {/* Links to dashboard with tiles */}
-                <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 ${userName ? "header-item" : "text-muted bg-transparent"}`}>Transactions</Link></li>
-
-                <li><Link to="/test" className="header-item">Firestore Test</Link></li>
-
-                {userName && (
-                    <li>
-                        <span className="username">{userName}</span>
-                        <button type="button" className="logout-btn" onClick={handleLogout}>Logout</button>
-                    </li>
-                )}
-            </ul>
-        </header>
-    );
+    }
+
+    return <header className="header">
+        {/* App Name reloads home page */}
+        <h3><Link to="/">{use_narrow ? "B-19" : "Budget-19"}</Link></h3>
+
+        {/* Pages */}
+        <ul className="header-nav">
+            {/* Links to dashboard with tiles */}
+            <li><Link to="/dash" className={`header-item ${isLoggedIn ? "header-item" : "text-muted bg-transparent"}`}>Dashboard</Link></li>
+
+            {/* Links to transactions page with table of expenses */}
+            <li><Link to="/transactions" className={`header-item ${isLoggedIn ? "header-item" : "text-muted bg-transparent"}`}>Transactions</Link></li>
+
+            <li><Link to="/test" className="header-item">Firestore Test</Link></li>
+
+            {displayName && <li><span className="username">{displayName}</span></li>}
+
+            {isLoggedIn && <li><button type="button" className="logout-btn" onClick={handleLogout}>Logout</button></li>}
+        </ul>
+    </header>
 }

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<React.SetStateAction<boolean>> }) {
+export function InputTransaction({ show, setShow }: { show: boolean, setShow: React.Dispatch<React.SetStateAction<boolean>> }) {
     const [name, setName] = useState<string>("");
     const [category, setCategory] = useState<string>("Income");
 
@@ -49,7 +49,6 @@ export function InputTransaction({ show, setShow}: { show: boolean, setShow: Rea
         setTimeout(() => setSuccessMsg(null), 10000);
 
         setName("");
-        setCategory("");
         setAmount("");
         setDescription("");
         setNotes("");

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,

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 <>
         <div className="vh-100 d-flex flex-column">
-            <Header/>
+            <Header/> 
 
             {/* TODO: MOVE TO CORRECT POSITION ON DASHBOARD */}
             <div> 
@@ -58,9 +58,9 @@ export default function Dashboard(props: Props) {
                         tileSize={tileSize}
                         ratio={1}
                         columns={columns}
-                    ></TilesContainer>
+                    />
                 </div>
             </Sidebar>
-        </div>
+        </div> 
     </>
 }