Add component to display existing reviews

src/components/Reviews.js

@@ -0,0 +1,48 @@
+import { useState, useEffect, useContext } from "react"
+import { FSContext } from "../contexts/FSContext"
+
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import { collection, onSnapshot, query } from "firebase/firestore"
+
+export function Reviews(props) {
+    const db = useContext(FSContext)
+
+    const [reviews, setReviews] = useState([])
+    const [fetching, setFetching] = useState(true)
+
+    useEffect(() => {
+        if (fetching) {
+            const q = query(collection(db, `movies/${props.movieId}/reviews`))
+            const snapshot = onSnapshot(q, (snapshot) => {
+                 let movieReviews = []
+                snapshot.forEach((item) => {
+                    let r = item.data()
+                    r.id = item.id
+                    movieReviews.push(r)
+                })
+                setReviews(movieReviews)
+                setFetching(false)
+            })
+        }
+    })
+
+    const ReviewItems = reviews.map((item) => {
+    return (
+        <Row>
+            <Col>
+            <h4>{item.title}</h4>
+            <p>{item.star} stars</p>
+            <p>{item.body}</p>
+            </Col>
+        </Row>
+    )
+    })
+
+    return (
+        <Container>
+           { ReviewItems }
+        </Container>
+    )
+}

src/pages/Detail.js

@@ -7,7 +7,7 @@ import { useParams } from 'react-router-dom';
 import { ItemImage } from '../components/ItemImage';
 import Button from 'react-bootstrap/Button';
 import { ReviewForm } from '../components/ReviewForm';
-
+import { Reviews } from '../components/Reviews';
 export function Detail(props) {
     const [movieData, setMovieData] = useState()
 
@@ -53,6 +53,9 @@ export function Detail(props) {
                         <ReviewForm movietitle={movieData.movie_title} movieId={movieData.id} />
                     </Col>
                 </Row>
+                <Row>
+                    <Reviews movieId={movieData.id} />
+                </Row>
             </Container>
         )
     }