From 6761b6358d2b92b9370325862e4b9fa650bff757 Mon Sep 17 00:00:00 2001
From: "Rayyan (Rayy)" <rayyan.hodges@studytafensw.edu.au>
Date: Tue, 14 Nov 2023 10:02:21 +0000
Subject: [PATCH] Add Book Review Form to Book Detail Page

---
 src/pages/Detail.js | 46 ++++++++++++++++++++++++++++++++++++---------
 1 file changed, 37 insertions(+), 9 deletions(-)

diff --git a/src/pages/Detail.js b/src/pages/Detail.js
index cb5c668..fbce216 100644
--- a/src/pages/Detail.js
+++ b/src/pages/Detail.js
@@ -1,33 +1,35 @@
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
+import Form from 'react-bootstrap/Form';
 import Container from "react-bootstrap/Container";
 import { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import { ItemImage } from '../components/ItemImage';
+import Button from 'react-bootstrap/Button';
 
 export function Detail(props) {
     const [bookData, setBookData] = useState()
 
     let { id } = useParams();
 
-    useEffect( () => {
-        if( !bookData ) {
-           props.handler(id).then( (book) => setBookData(book) )
+    useEffect(() => {
+        if (!bookData) {
+            props.handler(id).then((book) => setBookData(book))
         }
     }, [id])
 
 
-    if( bookData ) {
-        return(
+    if (bookData) {
+        return (
             <Container>
                 <Row>
                     <Col>
-                    <h1>{bookData.book_title}</h1>
+                        <h1>{bookData.book_title}</h1>
                     </Col>
                 </Row>
                 <Row>
                     <Col md={6}>
-                    <ItemImage source={bookData.cover_image} />
+                        <ItemImage source={bookData.cover_image} />
                     </Col>
                     <Col md={6}>
                         <h2>More information</h2>
@@ -36,14 +38,40 @@ export function Detail(props) {
                         <h3>Author</h3>
                         <p>{bookData.author}</p>
                         <h3>ISBN</h3>
-                        <p>ISBN10 {bookData.isbn10}</p>
-                        <p>ISBN13 {bookData.isbn13}</p>
+                        <p>ISBN10: {bookData.isbn10}</p>
+                        <p>ISBN13: {bookData.isbn13}</p>
+                        <Form>
+                            <h3>Review this book</h3>
+                            <Form.Group>
+                                <Form.Label>Star</Form.Label>
+                                <Form.Select>
+                                    <option value="1">1</option>
+                                    <option value="2">2</option>
+                                    <option value="3">3</option>
+                                    <option value="4">4</option>
+                                    <option value="5">5</option>
+                                </Form.Select>
+                            </Form.Group>
+                            <Form.Group>
+                               <Form.Label>Title</Form.Label> 
+                               <Form.Control type="text" placeholder="I love this book" />
+                            </Form.Group>
+                            <Form.Group>
+                                <Form.Label>Review</Form.Label>
+                                <Form.Control as="textarea" rows={3} cols={30} placeholder="I could not put this down!" />
+                            </Form.Group>
+                            <Button type="submit" variant="primary">Submit</Button>
+                        </Form>
                     </Col>
                 </Row>
+                <Row>
+                    <Col></Col>
+                </Row>
             </Container>
         )
     }
     else {
         return null
     }
+
 }
\ No newline at end of file