Getting Images from Firebase Storage (Working)

src/components/ItemImage.js

@@ -0,0 +1,35 @@
+import { useState, useEffect, useContext } from 'react'
+import { StorageContext } from '../contexts/StorageContext'
+import { ref, getDownloadURL } from 'firebase/storage'
+import Card from 'react-bootstrap/Card'
+
+export function ItemImage ( props ) {
+  const [image,setImage] = useState()
+
+  const storage = useContext( StorageContext)
+
+  useEffect( () => {
+    if( props.source ) {
+      const imgref = ref( storage, `book_covers/${props.source}`)
+      getDownloadURL( imgref )
+      .then( (url) => setImage(url) )
+      .catch( err => console.log(err) )
+    }
+  }, [props.source] )
+
+  if(!image) {
+    const defstyle={
+      backgroundColor: "#cccccc",
+      aspectRatio: "4/3"
+    }
+    return (
+      <div style={defstyle}>
+      </div>
+    )
+  }
+  else {
+    return (
+      <Card.Img variant='top' src={image} />
+    )
+  }
+}

src/pages/Home.js

@@ -3,73 +3,38 @@ 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 { useState, useEffect, useContext } from "react"
-import { StorageContext } from '../contexts/StorageContext';
+import { ItemImage } from "../components/ItemImage"
 
 export function Home(props) {
-    const [books, setBooks] = useState([props.items])
+    const [books,setBooks] = useState([])
 
-    const Storage = useContext(StorageContext)
-    console.log(props.items)
-
-    // useEffect( () => {
-    //     if( books.length === 0 )
-    //     setBooks(props.items)
-    // }
-    // , [props.items])
-
-    // card image component
-    const ItemImage = (props) => {
-        const [image, setImage] = useState()
     useEffect(() => {
+      console.log( props.items )
+      setBooks( props.items )
+    }, [props.items])
   
   
-        }, [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>
+    const ItemCards = books.map( ( book, itemkey ) => {
+      return(
+        <Col md={4}>
+          <Card key={itemkey}>
+            <ItemImage source={ book.cover_image} />
             <Card.Body>
-                        <ItemImage name={item.cover_image} />
-                        <Card.Title>{item.book_title}</Card.Title>
-                        <Card.Text>
-                            By {item.author}
-                        </Card.Text>
-                        <Card.Text>{item.cover_image}</Card.Text>
+              <Card.Title>{ book.book_title }</Card.Title>
             </Card.Body>
           </Card>
-
         </Col>
       )
     })
+  
     return (
       <Container>
         <Row>
-                    {Items}
+          {ItemCards}
         </Row>
       </Container>
-
     )
   }
-
-}