From 38a5d39f806e8b94508b236f6caaa614f769d76d Mon Sep 17 00:00:00 2001
From: "Rayyan (Rayy)" <rayyan.hodges@studytafensw.edu.au>
Date: Tue, 14 Nov 2023 14:40:00 +0000
Subject: [PATCH] Modiy lesson work from book context to movie context

---
 src/pages/Detail.js | 84 +++++++++++++++++++++++++++++++++++++--------
 1 file changed, 69 insertions(+), 15 deletions(-)

diff --git a/src/pages/Detail.js b/src/pages/Detail.js
index b19d52c..51106fb 100644
--- a/src/pages/Detail.js
+++ b/src/pages/Detail.js
@@ -1,22 +1,76 @@
 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 [movieData, setBookData] = useState()
+
     let { id } = useParams();
-    return(
-        <Container>
-            <Row>
-                <Col md={6}>
-                <h1>Image</h1>
-                </Col>
-                <Col md={6}>
-                <h2>Details</h2>
-                <p>{id}</p>
-                </Col>
-            </Row>
-        </Container>
-    )
-}
\ No newline at end of file
+
+    useEffect(() => {
+        if (!movieData) {
+            props.handler(id).then((movie) => setMovieData(movie))
+        }
+    }, [id]);
+
+    if (movieData) {
+        return (
+            <Container>
+                <Row>
+                    <Col>
+                        <h1>{movieData.movie_title}</h1>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col md={6}>
+                        <ItemImage source={movieData.cover_image} />
+                    </Col>
+                    <Col md={6}>
+                        <h2>More information</h2>
+                        <h3>Summary</h3>
+                        <p>{movieData.summary}</p>
+                        <h3>Author</h3>
+                        <p>{movieData.author}</p>
+                        <h3>ISBN</h3>
+                        <p>ISBN10: {movieData.isbn10}</p>
+                        <p>ISBN13: {movieData.isbn13}</p>
+                        <Form>
+                            <h3>Review this movie</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 movie!" />
+                            </Form.Group>
+                            <Form.Group>
+                                <Form.Label>Review</Form.Label>
+                                <Form.Control as="textarea" rows={3} cols={30} placeholder="I was hooked watching this movie!" />
+                            </Form.Group>
+                            <Button type="submit" variant="primary">Submit</Button>
+                        </Form>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col></Col>
+                </Row>
+            </Container>
+        )
+    }
+    else {
+        return null
+    }
+
+}