Add further work to Book Detail page

src/App.js

@@ -2,16 +2,22 @@ import { FirebaseConfig } from "./config/Config"
 import { initializeApp } from "firebase/app"
 import { Routes, Route } from "react-router-dom"
 import { useState, useEffect } from "react"
-import { getAuth,
+import {
+  getAuth,
   createUserWithEmailAndPassword,
   onAuthStateChanged,
   signOut,
-  signInWithEmailAndPassword } from "firebase/auth";
-import { getFirestore,
+  signInWithEmailAndPassword
+} from "firebase/auth";
+import {
+  getFirestore,
   collection,
   query,
   where,
-      getDocs } from "firebase/firestore";
+  getDoc,
+  getDocs,
+  doc
+} from "firebase/firestore";
 import { getStorage } from "firebase/storage"
 
 import { Header } from "./components/Header"
@@ -128,6 +134,15 @@ const readData = async () => {
 
   }
 
+  // function to get a single item
+  const getDocument = async (itemId) => {
+    const docRef = doc(FBdb, "books", itemId)
+    const docSnap = await getDoc(docRef)
+    let book = docSnap.data()
+    book.id = itemId
+    return book
+  }
+
 
   return (
     <div className="App">
@@ -141,7 +156,7 @@ const readData = async () => {
             <Route path="/signup" element={<Signup handler={signUp} />} />
             <Route path="/signout" element={<Signout handler={logOut} />} />
             <Route path="/signin" element={<Signin handler={signIn} authstate={auth} />} />
-          <Route path="/detail/:id" element={<Detail/>} />
+            <Route path="/detail/:id" element={<Detail handler={getDocument} />} />
           </Routes>
         </StorageContext.Provider>
       </AuthContext.Provider>

src/pages/Detail.js

@@ -1,22 +1,49 @@
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import Container from "react-bootstrap/Container";
-
+import { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
+import { ItemImage } from '../components/ItemImage';
 
 export function Detail(props) {
+    const [bookData, setBookData] = useState()
+
     let { id } = useParams();
+
+    useEffect( () => {
+        if( !bookData ) {
+           props.handler(id).then( (book) => setBookData(book) )
+        }
+    }, [id])
+
+
+    if( bookData ) {
         return(
             <Container>
+                <Row>
+                    <Col>
+                    <h1>{bookData.book_title}</h1>
+                    </Col>
+                </Row>
                 <Row>
                     <Col md={6}>
-                <h1>Image</h1>
+                    <ItemImage source={bookData.cover_image} />
                     </Col>
                     <Col md={6}>
-                <h2>Details</h2>
-                <p>{id}</p>
+                        <h2>More information</h2>
+                        <h3>Summary</h3>
+                        <p>{bookData.summary}</p>
+                        <h3>Author</h3>
+                        <p>{bookData.author}</p>
+                        <h3>ISBN</h3>
+                        <p>ISBN10 {bookData.isbn10}</p>
+                        <p>ISBN13 {bookData.isbn13}</p>
                     </Col>
                 </Row>
             </Container>
         )
     }
+    else {
+        return null
+    }
+}

src/pages/Home.js

@@ -18,7 +18,7 @@ export function Home(props) {
     const ItemCards = books.map( ( book, itemkey ) => {
       const itemLink = `/detail/${book.id}`
       return(
-        <Col md={4} className="mb-4">
+        <Col md={4} className="mb-4" key={itemkey}>
           <Card key={itemkey} className="position-relative">
             <a href={itemLink} className="position-absolute" style={{top:0, left:0, right:0, bottom:0}}>
             </a>