From 5dbcbe421d47084b89729e40b5c93d0b9bacd899 Mon Sep 17 00:00:00 2001
From: Mike Brewer <michaelandrewbrewer@gmail.com>
Date: Fri, 26 May 2023 23:00:52 +0100
Subject: [PATCH 1/2] layout routes added and app.js refactored accordingly

---
 src/components/App.js          | 64 +++++++++++-----------------------
 src/components/AuthRequired.js |  9 +++++
 src/components/Header.js       | 40 +++++++++++++++++++++
 src/components/Layout.js       | 13 +++++++
 4 files changed, 82 insertions(+), 44 deletions(-)
 create mode 100644 src/components/AuthRequired.js
 create mode 100644 src/components/Header.js
 create mode 100644 src/components/Layout.js

diff --git a/src/components/App.js b/src/components/App.js
index 7d8709e..4982c6f 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -3,11 +3,6 @@ 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";
@@ -15,51 +10,32 @@ 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);
-      });
-  };
+  // 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 path="/login" element={<Login/>}></Route>
-        <Route path="/signup" element={<SignUp />}></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="/login" element={<Login/>}></Route>
+        </Route>
+        <Route path="/" element={<SignUp />}></Route>
       </Routes>
     </BrowserRouter>
   );
diff --git a/src/components/AuthRequired.js b/src/components/AuthRequired.js
new file mode 100644
index 0000000..a07e666
--- /dev/null
+++ b/src/components/AuthRequired.js
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const AuthRequired = () => {
+  return (
+    <div>AuthRequired</div>
+  )
+}
+
+export default AuthRequired
\ No newline at end of file
diff --git a/src/components/Header.js b/src/components/Header.js
new file mode 100644
index 0000000..70c9c71
--- /dev/null
+++ b/src/components/Header.js
@@ -0,0 +1,40 @@
+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 { faRightFromBracket } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+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>
+      <span>
+        <button className="w-10 h-10 rounded-full bg-blue-800 hover:bg-green-500 text-white text-xl"> 
+        {/* onClick={handleSignout} added into the end of the button tag above*/}
+          <FontAwesomeIcon icon={faRightFromBracket} />
+        </button>
+        </span>
+        </nav>
+      </header>
+  )
+}
+
+export default Header
\ No newline at end of file
diff --git a/src/components/Layout.js b/src/components/Layout.js
new file mode 100644
index 0000000..0d0e1cc
--- /dev/null
+++ b/src/components/Layout.js
@@ -0,0 +1,13 @@
+import React from 'react'
+import { Outlet } from "react-router-dom"
+import Header from './Header'
+const Layout = () => {
+  return (
+    <>
+    <Header/>
+    <Outlet/>
+    </>
+  )
+}
+
+export default Layout
\ No newline at end of file

From de186b1e7d90229c7044244416f788cf52a3567d Mon Sep 17 00:00:00 2001
From: Mike Brewer <michaelandrewbrewer@gmail.com>
Date: Sat, 27 May 2023 15:05:27 +0100
Subject: [PATCH 2/2] refactored logout button & routes

---
 src/components/App.js                  | 17 +++++------------
 src/components/AuthRequired.js         | 21 ++++++++++++++-------
 src/components/Header.js               | 14 ++++++--------
 src/components/Layout.js               |  3 ++-
 src/components/ShirtCard.js            |  6 +++---
 src/components/buttons/LogoutButton.js | 11 ++++++++---
 6 files changed, 38 insertions(+), 34 deletions(-)

diff --git a/src/components/App.js b/src/components/App.js
index 4982c6f..ad06133 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -14,30 +14,23 @@ 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>
       <Routes>
-        <Route element={<Layout/>}>
+        <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="/login" element={<Login/>}></Route>
+          <Route path="/logout" element={<Login/>}></Route>
         </Route>
         <Route path="/" element={<SignUp />}></Route>
+        <Route path="/login" element={<Login/>}></Route>
       </Routes>
     </BrowserRouter>
   );
   }
+
 export default App;
diff --git a/src/components/AuthRequired.js b/src/components/AuthRequired.js
index a07e666..8e0e02b 100644
--- a/src/components/AuthRequired.js
+++ b/src/components/AuthRequired.js
@@ -1,9 +1,16 @@
-import React from 'react'
+// import React from 'react'
+// import { Outlet } from "react-router-dom"
+// import { auth } from "../firebase/config"
 
-const AuthRequired = () => {
-  return (
-    <div>AuthRequired</div>
-  )
-}
+// const AuthRequired = () => {
+//     const isLoggedIn = auth;
+//   return (
+//     if(isLoggedIn) { 
+        
+//     }
 
-export default AuthRequired
\ No newline at end of file
+//     <Outlet />
+//   )
+// }
+
+// export default AuthRequired
\ No newline at end of file
diff --git a/src/components/Header.js b/src/components/Header.js
index 70c9c71..232aee1 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -3,8 +3,8 @@ import ProfileButton from "./buttons/ProfileButton";
 import LogoutButton from "./buttons/LogoutButton";
 import HomeButton from "./buttons/HomeButton";
 import CreateItemButton from "./buttons/CreateItemButton";
-import { faRightFromBracket } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+
 import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
 
 
@@ -26,12 +26,10 @@ const Header = () => {
         <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} added into the end of the button tag above*/}
-          <FontAwesomeIcon icon={faRightFromBracket} />
-        </button>
-        </span>
+       
+        <Link to="/logout">
+          <LogoutButton />
+        </Link>
         </nav>
       </header>
   )
diff --git a/src/components/Layout.js b/src/components/Layout.js
index 0d0e1cc..4328f48 100644
--- a/src/components/Layout.js
+++ b/src/components/Layout.js
@@ -1,10 +1,11 @@
 import React from 'react'
 import { Outlet } from "react-router-dom"
 import Header from './Header'
+
 const Layout = () => {
   return (
     <>
-    <Header/>
+    <Header />
     <Outlet/>
     </>
   )
diff --git a/src/components/ShirtCard.js b/src/components/ShirtCard.js
index 69c6685..93e0fed 100644
--- a/src/components/ShirtCard.js
+++ b/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>
diff --git a/src/components/buttons/LogoutButton.js b/src/components/buttons/LogoutButton.js
index 5fc6eec..a95e8b8 100644
--- a/src/components/buttons/LogoutButton.js
+++ b/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>
   );
 };