Initial Layout Routes added a general route refactor

src/components/App.js

@@ -3,65 +3,34 @@ import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
 import { getAuth, signOut } from "firebase/auth";
 import { auth } from "../firebase/config"
 
-import ProfileButton from "./buttons/ProfileButton";
-import LogoutButton from "./buttons/LogoutButton";
-import HomeButton from "./buttons/HomeButton";
-import CreateItemButton from "./buttons/CreateItemButton";
-
 import HomePage from "./pages/HomePage";
 import ProfilePage from "./pages/ProfilePage";
 import AddShirtPage from "./pages/AddShirtPage";
 import Login from "../components/pages/login";
 import SignUp from "../components/pages/signup";
 import HomeFeed from "./pages/HomeFeed";
 import ShirtCard from "../components/ShirtCard"
-import { faRightFromBracket } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import Layout from "./Layout";
 
 
 function App() {
-  const handleSignout = () => {
-    signOut(auth)
-      .then(() => {
-        // Sign-out successful.
-        console.log('user signed out');
-      })
-      .catch((error) => {
-        // An error happened.
-        console.log(error);
-      });
-  };
+
+
   return (
     <BrowserRouter>
-      <div className="App flex justify-center items-center space-x-1 my-4">
-        <Link to="/home">
-          <HomeButton />
-        </Link>
-        <Link to="/profile">
-          <ProfileButton />
-        </Link>
-        <Link to="/login">
-
-        </Link>
-        <Link to="/add-shirt">
-          <CreateItemButton />
-        </Link>
-      <span>
-        <button className="w-10 h-10 rounded-full bg-blue-800 hover:bg-green-500 text-white text-xl" onClick={handleSignout}>
-          <FontAwesomeIcon icon={faRightFromBracket} />
-        </button>
-        </span>
-      </div>
       <Routes>
-        {/* <Route path="/home" element={<HomePage />}></Route> */}
-        <Route path="/home" element={<HomeFeed />}></Route>
-        <Route path="/profile" element={<ProfilePage />}></Route>
-        <Route path="/add-shirt" element={<AddShirtPage />}></Route>
-        <Route path="/shirt-card" element={<ShirtCard />}></Route>
+        <Route element={<Layout />}>
+          <Route path="/home" element={<HomeFeed />}></Route>
+          <Route path="/profile" element={<ProfilePage />}></Route>
+          <Route path="/add-shirt" element={<AddShirtPage />}></Route>
+          <Route path="/shirt-card" element={<ShirtCard />}></Route>
+          <Route path="/logout" element={<Login/>}></Route>
+        </Route>
+        <Route path="/" element={<SignUp />}></Route>
         <Route path="/login" element={<Login/>}></Route>
-        <Route path="/signup" element={<SignUp />}></Route>
       </Routes>
     </BrowserRouter>
   );
   }
+
 export default App;

src/components/AuthRequired.js

@@ -0,0 +1,16 @@
+// import React from 'react'
+// import { Outlet } from "react-router-dom"
+// import { auth } from "../firebase/config"
+
+// const AuthRequired = () => {
+//     const isLoggedIn = auth;
+//   return (
+//     if(isLoggedIn) { 
+
+//     }
+
+//     <Outlet />
+//   )
+// }
+
+// export default AuthRequired

src/components/Header.js

@@ -0,0 +1,38 @@
+import React from 'react'
+import ProfileButton from "./buttons/ProfileButton";
+import LogoutButton from "./buttons/LogoutButton";
+import HomeButton from "./buttons/HomeButton";
+import CreateItemButton from "./buttons/CreateItemButton";
+
+
+import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
+
+
+
+const Header = () => {
+
+  return (
+    <header className="App flex justify-center items-center space-x-1 my-4">
+        <nav>
+        <Link to="/home">
+          <HomeButton />
+        </Link>
+        <Link to="/profile">
+          <ProfileButton />
+        </Link>
+        <Link to="/login">
+
+        </Link>
+        <Link to="/add-shirt">
+          <CreateItemButton />
+        </Link>
+
+        <Link to="/logout">
+          <LogoutButton />
+        </Link>
+        </nav>
+      </header>
+  )
+}
+
+export default Header

src/components/Layout.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Outlet } from "react-router-dom"
+import Header from './Header'
+
+const Layout = () => {
+  return (
+    <>
+    <Header />
+    <Outlet/>
+    </>
+  )
+}
+
+export default Layout

src/components/ShirtCard.js

@@ -11,7 +11,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 const fetchShirtData = async () => {
   const querySnapshot = await getDocs(collection(db, "shirt-uploads"));
   const data = querySnapshot.docs.map((doc) => doc.data());
-  console.log(data);
+
   return data;
 };
 const handleDelete = async (shirtId) => {
@@ -33,9 +33,9 @@ const ShirtCard = () => {
   }, []);
   return (
     <div className="flex flex-col">
-    {shirts.map((shirt) => (
+    {shirts.map((shirt, index) => (
       <div
-        key={shirt.id}
+        key={index}
         className="relative bg-gray-100 max-w-md mx-100 p-6 mb-4 h-48 bg-white rounded-lg shadow-md"
       >
         <h2 className="font-bold text-lg mb-2">Football Club: {shirt.club}</h2>

src/components/buttons/LogoutButton.js

@@ -1,6 +1,8 @@
 import { useState } from "react";
 import React from "react";
 import { getAuth, signOut } from "firebase/auth";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faRightFromBracket } from "@fortawesome/free-solid-svg-icons";
 
 const auth = getAuth();
 
@@ -21,9 +23,12 @@ const LogoutButton = () => {
   };
 
   return (
-    <div>
-      <button type="submit" onClick={logout}>Logout</button>
-    </div>
+    <span>
+        <button className="w-10 h-10 rounded-full bg-blue-800 hover:bg-green-500 text-white text-xl" onClick={logout}> 
+
+          <FontAwesomeIcon icon={faRightFromBracket} />
+        </button>
+        </span>
   );
 };