reiyua
/
SystieWebsite
mirror of https://github.com/reiyua/SystieWebsite.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add Book Review Form to Book Detail Page

This commit is contained in:
Ray 2023-11-14 10:02:21 +00:00 committed by GitHub
parent 258483b023
commit 6761b6358d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 37 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/pages/Detail.js
View File

@ -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
}
}