Add AuthContext to FormReview and adjust image detail

This commit is contained in:
Ray 2023-11-21 09:44:56 +00:00 committed by GitHub
parent b7e62e580a
commit 642aad60af
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 40 additions and 30 deletions

View File

@ -1,29 +1,39 @@
import Form from "react-bootstrap/Form" import Form from "react-bootstrap/Form"
import Button from "react-bootstrap/Button" import Button from "react-bootstrap/Button"
import { AuthContext } from "../contexts/AuthContext"
import { useContext } from "react"
export function ReviewForm(props) { export function ReviewForm(props) {
return ( const auth = useContext(AuthContext)
<Form> if (auth) {
<h3>Rewiew this movie</h3> return (
<Form.Group> <Form>
<Form.Label>Star</Form.Label> <h3>Review this movie</h3>
<Form.Select> <Form.Group>
<option value="1">1</option> <Form.Label>Star</Form.Label>
<option value="2">2</option> <Form.Select>
<option value="3">3</option> <option value="1">1</option>
<option value="4">4</option> <option value="2">2</option>
<option value="5">5</option> <option value="3">3</option>
</Form.Select> <option value="4">4</option>
</Form.Group> <option value="5">5</option>
<Form.Group> </Form.Select>
<Form.Label>Title</Form.Label> </Form.Group>
<Form.Control type="text" placeholder="I love this movie" /> <Form.Group>
</Form.Group> <Form.Label>Title</Form.Label>
<Form.Group> <Form.Control type="text" placeholder="I love this movie" />
<Form.Label>Review</Form.Label> </Form.Group>
<Form.Control as="textarea" rows={4} cols={30} placeholder="I could not stop watching!" /> <Form.Group>
</Form.Group> <Form.Label>Review</Form.Label>
<Button type="submit" variant="primary">Submit</Button> <Form.Control as="textarea" rows={4} cols={30} placeholder="I could not stop watching!" />
</Form> </Form.Group>
) <Button type="submit" variant="primary">Submit</Button>
} </Form>
)
}
else {
return null
}
}

View File

@ -27,10 +27,10 @@ export function Detail(props) {
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col md={6}> <Col md={4}>
<ItemImage source={movieData.cover_image} /> <ItemImage source={movieData.cover_image} />
</Col> </Col>
<Col md={6}> <Col md={8}>
<h2>More Information</h2> <h2>More Information</h2>
<h3>Synopsis</h3> <h3>Synopsis</h3>
<p>{movieData.synopsis}</p> <p>{movieData.synopsis}</p>
@ -55,6 +55,6 @@ export function Detail(props) {
} }
else { else {
return null; return null;
} }
} }