Minor Bug Fixes

src/App.css

@@ -5,50 +5,6 @@
   text-align: center;
 }
 
-.button {
-  padding: 1px 6px;
-  border: 1px outset buttonborder;
-  border-radius: 3px;
-  color: greenyellow;
-  text-decoration: none;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
-
 .card-img-top {
   width: 100%;
   height: 10vw;

src/components/Cards.tsx

@@ -17,15 +17,11 @@ export const Cards = ({
         (food) =>
           food.userId == user.uid && (
             <Col>
-              <Card style={{ width: "18rem" }}>
+              <Card style={{ width: "18rem" }} key={food}>
                 <Card.Img
                   className=".card-img-top"
                   variant="top"
-                  src={
-                    food.imageURL
-                      ? food.imageURL
-                      : "https://t4.ftcdn.net/jpg/04/73/25/49/360_F_473254957_bxG9yf4ly7OBO5I0O5KABlN930GwaMQz.jpg"
-                  }
+                  src={food.imageURL}
                 />
                 <Card.Body>
                   <Card.Title>{food.name}</Card.Title>

src/components/NavBar.tsx

@@ -1,10 +1,23 @@
-import { signOut } from "firebase/auth";
+import { User, onAuthStateChanged, signOut } from "firebase/auth";
 import { useNavigate } from "react-router-dom";
 import { auth } from "../config/firebase";
+import { useEffect, useState } from "react";
 
 export function NavBar() {
   let navigate = useNavigate();
-  const user = auth.currentUser;
+
+  const [user, setUser] = useState<User>();
+  const getUser = async () => {
+    onAuthStateChanged(auth, (user) => {
+      if (user) {
+        setUser(user);
+      }
+    });
+  };
+
+  useEffect(() => {
+    getUser();
+  }, []);
 
   const Logout = () => {
     signOut(auth)

src/pages/Dashboard.tsx

@@ -18,9 +18,6 @@ import { deleteObject, getStorage, ref } from "firebase/storage";
 
 export function Dashboard() {
   const user = auth.currentUser;
-  if (!user) {
-    return;
-  }
 
   const [error, setError] = useState<string>("");
   const [isAdding, setIsAdding] = useState(false);

src/pages/Home.tsx

@@ -29,7 +29,7 @@ export function Home() {
     <Row md={4} className="g-4">
       {foodList.map((food) => (
         <Col>
-          <Card style={{ width: "18rem" }}>
+          <Card style={{ width: "18rem" }} key={food}>
             <Card.Img variant="top" src={food.imageURL} />
             <Card.Body>
               <Card.Title>{food.name}</Card.Title>

src/pages/Login.tsx

@@ -33,7 +33,7 @@ export const LoginPage = () => {
     setAuthenticating(true);
     signInWithPopup(auth, googleProvider)
       .then(() => {
-        navigate("/");
+        navigate("/navigate");
       })
       .catch((error) => {
         setAuthenticating(false);