From 3b7285b1a80305f5bf6fbda29d86fe5267ec5979 Mon Sep 17 00:00:00 2001
From: "Rayyan (Rayy)" <rayyan.hodges@studytafensw.edu.au>
Date: Tue, 21 Nov 2023 10:11:14 +0000
Subject: [PATCH] Further changes to the ReviewForm to add authentication state

---
 src/components/ReviewForm.js | 15 +++++++++++----
 src/pages/Detail.js          |  4 ++--
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/ReviewForm.js b/src/components/ReviewForm.js
index 9999228..36a139c 100644
--- a/src/components/ReviewForm.js
+++ b/src/components/ReviewForm.js
@@ -2,24 +2,31 @@ import Form from "react-bootstrap/Form"
 import Button from "react-bootstrap/Button"
 
 import { AuthContext } from "../contexts/AuthContext"
-import { useContext } from "react"
+import { useContext, useState } from "react"
 
+const submitHandler = (event) => {
+event.preventDefault()
+}
 
 export function ReviewForm(props) {
   const auth = useContext(AuthContext)
+  const[star, setStar ] = useState()
+  const[title, setTitle ] = useState()
+  const[review, setReview ] = useState()
   if (auth) {
     return (
-      <Form>
-        <h3>Review this movie</h3>
+      <Form onSubmit={submitHandler}>
+        <h3>Review {props.movietitle}</h3>
         <Form.Group>
           <Form.Label>Star</Form.Label>
-          <Form.Select>
+          <Form.Select name="star" value={star} onChange={(evt) => setStar(evt.target.value) }>
             <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.Text>You have given {star} star(s)</Form.Text>
         </Form.Group>
         <Form.Group>
           <Form.Label>Title</Form.Label>
diff --git a/src/pages/Detail.js b/src/pages/Detail.js
index 40baa38..167966b 100644
--- a/src/pages/Detail.js
+++ b/src/pages/Detail.js
@@ -24,7 +24,7 @@ export function Detail(props) {
             <Container>
                 <Row>
                     <Col>
-                        <h1>{movieData.title}</h1>
+                        <h1>{movieData.movie_title}</h1>
                     </Col>
                 </Row>
                 <Row>
@@ -50,7 +50,7 @@ export function Detail(props) {
                 </Row>
                 <Row>
                     <Col>
-                        <ReviewForm />
+                        <ReviewForm movietitle={movieData.movie_title} />
                     </Col>
                 </Row>
             </Container>