From 9932005d33f388178ee387f58d1f0330dadff066 Mon Sep 17 00:00:00 2001
From: Emily-RC <emilycowan1993@gmail.com>
Date: Tue, 24 Oct 2023 14:56:08 +0100
Subject: [PATCH] Displaying bok cover

---
 .../components/upcomingevents/BookLabel.js    |  2 +-
 .../components/upcomingevents/CoverLabel.js   | 54 +++++++++++++++++++
 .../upcomingevents/UpcomingEvents.js          |  7 ++-
 .../components/upcomingevents/coverlabel.css  |  0
 4 files changed, 60 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/upcomingevents/CoverLabel.js
 create mode 100644 frontend/src/components/upcomingevents/coverlabel.css

diff --git a/frontend/src/components/upcomingevents/BookLabel.js b/frontend/src/components/upcomingevents/BookLabel.js
index 9d511dc..410ba99 100644
--- a/frontend/src/components/upcomingevents/BookLabel.js
+++ b/frontend/src/components/upcomingevents/BookLabel.js
@@ -56,7 +56,7 @@ const BookLabel = ({ sessions }) => {
             </div>
           ))
         ) : (
-          <h3>No sessions available</h3>
+          <h3>No Sessions Available</h3>
         )}
       </div>
     </div>
diff --git a/frontend/src/components/upcomingevents/CoverLabel.js b/frontend/src/components/upcomingevents/CoverLabel.js
new file mode 100644
index 0000000..fc00444
--- /dev/null
+++ b/frontend/src/components/upcomingevents/CoverLabel.js
@@ -0,0 +1,54 @@
+import React, { useState, useEffect } from "react";
+import "./coverlabel.css";
+
+const CoverLabel = ({ sessions }) => {
+    const [token, _] = useState(window.localStorage.getItem("token"));
+    const [books, setBooks] = useState([]);
+
+    useEffect(() => {
+        console.log("Checking books");
+        if (token) {
+            fetch("/books", {
+                method: "get",
+                headers: {
+                Authorization: `Bearer ${token}`,
+                },
+            })
+                .then((response) => response.json())
+                .then(async (data) => {
+                window.localStorage.getItem("token", data.token);
+                setBooks(data.books);
+                });
+            }
+        }, []);
+
+
+    function bookIdToCover(book_id) {
+        const foundBook = books.find((book) => book._id === book_id);
+        return foundBook ? foundBook.cover_photo : undefined;
+    }
+
+    return (
+        <div className="label">
+            <div className="upcoming-bookclub-book-cover-information">
+                {sessions ? (
+                sessions.map((session) => (
+                    <div key={session.chosen_book}>
+                        <div>
+                            <img
+                                className="book"
+                                alt="Book"
+                                src={bookIdToCover(session.chosen_book)}
+                            />
+                        </div>
+                    </div>
+                ))
+                ) : (
+                <h3>No Cover Available</h3>
+                )}
+            </div>
+            </div>
+        );
+        };
+    
+export default CoverLabel;
\ No newline at end of file
diff --git a/frontend/src/components/upcomingevents/UpcomingEvents.js b/frontend/src/components/upcomingevents/UpcomingEvents.js
index b26f7ee..8bd7c39 100644
--- a/frontend/src/components/upcomingevents/UpcomingEvents.js
+++ b/frontend/src/components/upcomingevents/UpcomingEvents.js
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import "./upcomingevents.css";
 import BookLabel from "./BookLabel";
 import SessionLabel from "./SessionLabel";
+import CoverLabel from "./CoverLabel";
 import "../session/SessionForm";
 
 // TODO update other files (e.g. box.js/bookLabel.js/SessionLabel.js) - call hooks
@@ -10,6 +11,7 @@ const UpcomingEvents = () => {
   const [user, setUser] = useState("");
   const [sessions, setSessions] = useState([]);
   const [token, setToken] = useState(window.localStorage.getItem("token"));
+  
 
   // useEffect(() => {
   //   console.log("Checking users")
@@ -63,11 +65,12 @@ const UpcomingEvents = () => {
       </div>
       <div className="upcoming-event-block">
         <div className="book-wrapper">
-          <img
+          <CoverLabel sessions={sessions}></CoverLabel>
+          {/* <img
             className="book"
             alt="Book"
             src="https://covers.openlibrary.org/b/isbn/9780008334840-M.jpg"
-          />
+          /> */}
           <div className="box">
             <BookLabel sessions={sessions}></BookLabel>
           </div>
diff --git a/frontend/src/components/upcomingevents/coverlabel.css b/frontend/src/components/upcomingevents/coverlabel.css
new file mode 100644
index 0000000..e69de29