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

Working Movie Detail Page

This commit is contained in:
Ray 2023-11-15 06:39:29 +00:00 committed by GitHub
parent 97788eff86
commit 5ab7f1c714
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 35 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/App.js
View File

@ -9,8 +9,8 @@ import { getAuth,
signInWithEmailAndPassword } from "firebase/auth"; signInWithEmailAndPassword } from "firebase/auth";
import { getFirestore, import { getFirestore,
collection, collection,
query, getDoc,
where, doc,
getDocs } from "firebase/firestore"; getDocs } from "firebase/firestore";
import {getStorage} from "firebase/storage" import {getStorage} from "firebase/storage"
@ -130,6 +130,15 @@ const readData = async () => {
} }
// function to get a single item
const getDocument = async ( itemId) => {
const docRef = doc( FBdb, "movies", itemId )
const docSnap = await getDoc( docRef )
let movie = docSnap.data()
movie.id = itemId
return movie
}
return ( return (
<div className="App"> <div className="App">
@ -143,7 +152,7 @@ const readData = async () => {
<Route path="/signup" element={ <Signup handler={signUp}/> } /> <Route path="/signup" element={ <Signup handler={signUp}/> } />
<Route path="/signout" element={ <Signout handler={logOut}/> } /> <Route path="/signout" element={ <Signout handler={logOut}/> } />
<Route path="/signin" element={ <Signin handler={signIn} authstate={auth}/> } /> <Route path="/signin" element={ <Signin handler={signIn} authstate={auth}/> } />
<Route path="/detail/:id" element={<Detail/>} /> <Route path="/detail/:id" element={<Detail handler={getDocument} />} />
</Routes> </Routes>
</StorageContext.Provider> </StorageContext.Provider>
</AuthContext.Provider> </AuthContext.Provider>

44
src/pages/Detail.js
View File

@ -10,24 +10,20 @@ import Button from 'react-bootstrap/Button';
export function Detail(props) { export function Detail(props) {
const [movieData, setMovieData] = useState() const [movieData, setMovieData] = useState()
let { id } = useParams(); let { id } = useParams()
useEffect(() => { useEffect(() => {
if (!movieData && typeof props.handler === 'function') { if (!movieData) {
const fetchMovieData = async () => { props.handler(id).then((movie) => setMovieData(movie))
const movieData = await props.handler(id);
setMovieData(movieData);
};
fetchMovieData();
} }
}, [id, movieData, props.handler]); }, [id])
if (movieData) { if (movieData) {
return ( return (
<Container> <Container>
<Row> <Row>
<Col> <Col>
<h1>{movieData.movie_title}</h1> <h1>{movieData.title}</h1>
</Col> </Col>
</Row> </Row>
<Row> <Row>
@ -35,19 +31,23 @@ export function Detail(props) {
<ItemImage source={movieData.cover_image} /> <ItemImage source={movieData.cover_image} />
</Col> </Col>
<Col md={6}> <Col md={6}>
<h2>More information</h2> <h2>More Information</h2>
<h3>Summary</h3> <h3>Synopsis</h3>
<p>{movieData.synopsis}</p> <p>{movieData.synopsis}</p>
<h3>People Who Contributed:</h3> <h3>Main Actors</h3>
<p>{movieData.director}</p>
<p>{movieData.main_actors}</p> <p>{movieData.main_actors}</p>
<h3>Director</h3>
<p>{movieData.director}</p>
<h3>Producer</h3>
<p>{movieData.producer}</p> <p>{movieData.producer}</p>
<h3>Further Information</h3> <h3>Genre</h3>
<p>IMDB: {movieData.imdb_link}</p> <p>{movieData.genre}</p>
<h3>IMDB Link</h3>
<p>{movieData.imdb_link}</p>
<Form> <Form>
<h3>Review this movie</h3> <h3>Review this movie</h3>
<Form.Group> <Form.Group>
<Form.Label>Star</Form.Label> <Form.Label>Star Rating</Form.Label>
<Form.Select> <Form.Select>
<option value="1">1</option> <option value="1">1</option>
<option value="2">2</option> <option value="2">2</option>
@ -57,12 +57,12 @@ export function Detail(props) {
</Form.Select> </Form.Select>
</Form.Group> </Form.Group>
<Form.Group> <Form.Group>
<Form.Label>Title</Form.Label> <Form.Label>Title</Form.Label>
<Form.Control type="text" placeholder="I love this movie!" /> <Form.Control type="text" placeholder="I love this movie" />
</Form.Group> </Form.Group>
<Form.Group> <Form.Group>
<Form.Label>Review</Form.Label> <Form.Label>Review</Form.Label>
<Form.Control as="textarea" rows={3} cols={30} placeholder="I was hooked watching this movie!" /> <Form.Control as="textarea" rows={4} cols={30} placeholder="I could not stop watching!" />
</Form.Group> </Form.Group>
<Button type="submit" variant="primary">Submit</Button> <Button type="submit" variant="primary">Submit</Button>
</Form> </Form>
@ -75,7 +75,7 @@ export function Detail(props) {
) )
} }
else { else {
return null return null;
}
} }
}