From 0d7d7d575abe738296b89c2361f8037d950e81ae Mon Sep 17 00:00:00 2001
From: "Rayyan (Rayy)" <rayyan.hodges@studytafensw.edu.au>
Date: Tue, 24 Oct 2023 09:51:23 +0000
Subject: [PATCH] Currently broken, Johannes to investigate

---
 src/App.js        |  1 +
 src/pages/Home.js | 69 +++++++++++++++++++++++++++++++++--------------
 2 files changed, 50 insertions(+), 20 deletions(-)

diff --git a/src/App.js b/src/App.js
index e4b5a63..1e4acac 100644
--- a/src/App.js
+++ b/src/App.js
@@ -125,6 +125,7 @@ const readData = async () => {
     listdata.push( item )
   })
   setData( listdata )
+ 
 }
 
 
diff --git a/src/pages/Home.js b/src/pages/Home.js
index c434765..7f7eb9b 100644
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@@ -3,44 +3,73 @@ import Col from 'react-bootstrap/Col';
 import Container from "react-bootstrap/Container";
 import Card from "react-bootstrap/Card";
 
-import {ref, getDownloadURL} from "firebase/storage"
+import { ref, getDownloadURL } from "firebase/storage"
 import { useState, useEffect, useContext } from "react"
 import { StorageContext } from '../contexts/StorageContext';
 
-export function Home ( props ) {
-    const [ books, setBooks ] = useState([])
+export function Home(props) {
+    const [books, setBooks] = useState([props.items])
 
-    const Storage = useContext( StorageContext )
+    const Storage = useContext(StorageContext)
+    console.log(props.items)
 
-    useEffect( () => {
-    setBooks( props.items )
-    console.log( props.items )
-    },[props.items])
+    // useEffect( () => {
+    //     if( books.length === 0 )
+    //     setBooks(props.items)
+    // }
+    // , [props.items])
 
-    // collection
-    const Items = books.map( (item, key) => {
+    // card image component
+    const ItemImage = (props) => {
+        const [image, setImage] = useState()
+        useEffect(() => {
+
+
+        }, [props.name, image])
+        const imgRef = ref(Storage, `book_covers/${props.name}`)
+        if (image) {
+            return (
+                <Card.Img variant="top" src={image} />
+            )
+        }
+
+        else {
+            return (
+                <p>Loading...</p>
+            )
+        }
+    }
+ 
+    if (!books) {
+        return null
+    }
+    else {
+           // collection
+    const Items = books.map((item, key) => {
         return (
             <Col key={key} md="4">
                 <Card>
                     <Card.Body>
+                        <ItemImage name={item.cover_image} />
                         <Card.Title>{item.book_title}</Card.Title>
-                       <Card.Text>
-                       By {item.author}
+                        <Card.Text>
+                            By {item.author}
                         </Card.Text>
+                        <Card.Text>{item.cover_image}</Card.Text>
                     </Card.Body>
                 </Card>
 
             </Col>
         )
     })
+        return (
+            <Container>
+                <Row>
+                    {Items}
+                </Row>
+            </Container>
 
+        )
+    }
 
-    return (
-        <Container>
-            <Row>
-                {Items}
-            </Row>
-        </Container>
-
-    )
 }
\ No newline at end of file