From 39d0285aedb9196b1b2d993fa574ef9724e63a94 Mon Sep 17 00:00:00 2001
From: "Rayyan (Rayy)" <rayyan.hodges@studytafensw.edu.au>
Date: Tue, 28 Nov 2023 10:24:48 +0000
Subject: [PATCH] Add component to display existing reviews

---
 src/components/Reviews.js | 48 +++++++++++++++++++++++++++++++++++++++
 src/pages/Detail.js       |  5 +++-
 2 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Reviews.js

diff --git a/src/components/Reviews.js b/src/components/Reviews.js
new file mode 100644
index 0000000..02201c1
--- /dev/null
+++ b/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>
+    )
+}
\ No newline at end of file
diff --git a/src/pages/Detail.js b/src/pages/Detail.js
index de77680..6b1ff30 100644
--- a/src/pages/Detail.js
+++ b/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>
         )
     }