Merge pull request #29 from ami-day/CS_EC_Display_Cover

Displaying book cover

frontend/src/components/upcomingevents/BookLabel.js

@@ -88,7 +88,7 @@ const BookLabel = () => {
             </div>
           ))
         ) : (
-          <h3>No sessions available</h3>
+          <h3>No Sessions Available</h3>
         )}
       </div>
     </div>

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;

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>