Add further work to Book Detail page

src/App.js

@@ -2,17 +2,23 @@ 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";
-      import {getStorage} from "firebase/storage"
+  getDoc,
+  getDocs,
+  doc
+} from "firebase/firestore";
+import { getStorage } from "firebase/storage"
 
 import { Header } from "./components/Header"
 import './App.css'
@@ -56,28 +62,28 @@ function App() {
   const [nav, setNav] = useState(navItems)
   const [auth, setAuth] = useState(false)
   const [data, setData] = useState([])
-  const [ fetching , setFetching ] = useState( false )
+  const [fetching, setFetching] = useState(false)
 
-  useEffect( () => {
-    if( data.length === 0 && fetching === false ) {
+  useEffect(() => {
+    if (data.length === 0 && fetching === false) {
       readData()
-      setFetching( true )
+      setFetching(true)
     }
   }, [data])
 
 
   // authentication observer
   onAuthStateChanged(FBauth, (user) => {
-    if( user ) {
+    if (user) {
       // currently authenticated
-      setAuth( user )
-      setNav( AuthnavItems )
+      setAuth(user)
+      setNav(AuthnavItems)
 
     }
     else {
       // currently unauthenticated
-      setAuth( false )
-      setNav( navItems )
+      setAuth(false)
+      setNav(navItems)
     }
   })
 
@@ -89,19 +95,19 @@ function App() {
   // signing up a user
   const signUp = (email, password) => {
     createUserWithEmailAndPassword(FBauth, email, password)
-      .then( (userCredential) => {
+      .then((userCredential) => {
         // do something
       })
       .catch((error) => console.log(error.message))
   }
 
   const logOut = () => {
-    signOut(FBauth).then( () => {
+    signOut(FBauth).then(() => {
       // user is signed out
     })
-}
+  }
 
-const signIn = (email, password) => {
+  const signIn = (email, password) => {
     return new Promise((resolve, reject) => {
       signInWithEmailAndPassword(FBauth, email, password)
         .then(() => {
@@ -110,23 +116,32 @@ const signIn = (email, password) => {
         })
         .catch((error) => {
           console.log(error)
-        reject( error.code )
+          reject(error.code)
         })
     })
-}
+  }
 
-// function to get data
-const readData = async () => {
-  const querySnapshot = await getDocs( collection(FBdb, "books") )
+  // function to get data
+  const readData = async () => {
+    const querySnapshot = await getDocs(collection(FBdb, "books"))
     let listdata = []
-  querySnapshot.forEach( (doc) => {
+    querySnapshot.forEach((doc) => {
       let item = doc.data()
       item.id = doc.id
-    listdata.push( item )
+      listdata.push(item)
     })
-  setData( listdata )
+    setData(listdata)
 
-}
+  }
+
+  // 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 (
@@ -135,18 +150,18 @@ const readData = async () => {
       <AuthContext.Provider value={auth}>
         <StorageContext.Provider value={FBstorage}>
           <Routes>
-          <Route path="/" element={<Home items = {data} />} />
+            <Route path="/" element={<Home items={data} />} />
             <Route path="/about" element={<About greeting="Hey you, this is about page!" handler={saySomething} />} />
             <Route path="/contact" element={<Contact greeting="Hey you, this is contact page!" />} />
-          <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="/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 handler={getDocument} />} />
           </Routes>
         </StorageContext.Provider>
       </AuthContext.Provider>
     </div>
   );
-  }
+}
 
-  export default App;
+export default App;

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>