Add Firestore Context

src/App.js

@@ -27,6 +27,7 @@ import { Detail } from "./pages/Detail";
 // contexts
 import { AuthContext } from "./contexts/AuthContext"
 import { StorageContext } from "./contexts/StorageContext";
+import { FSContext } from "./contexts/FSContext";
 
 
 
@@ -145,6 +146,7 @@ const readData = async () => {
         <Header items={nav} user={auth} />
         <AuthContext.Provider value={auth}>
         <StorageContext.Provider value={FBstorage}>
+          <FSContext.Provider value={FBdb}>
         <Routes>
           <Route path="/" element={<Home items = {data} />} />
           <Route path="/about" element={<About greeting="Hey you, this is about page!" handler={saySomething} />} />
@@ -154,6 +156,7 @@ const readData = async () => {
           <Route path="/signin" element={ <Signin handler={signIn} authstate={auth}/> } />
           <Route path="/detail/:id" element={<Detail handler={getDocument} />} />
         </Routes>
+        </FSContext.Provider>
         </StorageContext.Provider>
         </AuthContext.Provider>
       </div>

src/components/ReviewForm.js

@@ -2,7 +2,9 @@ import Form from "react-bootstrap/Form"
 import Button from "react-bootstrap/Button"
 
 import { AuthContext } from "../contexts/AuthContext"
+import { FSContext } from "../contexts/FSContext"
 import { useContext, useState } from "react"
+import { collection, addDoc } from "firebase/firestore"; 
 
 const submitHandler = (event) => {
 event.preventDefault()
@@ -10,6 +12,8 @@ event.preventDefault()
 
 export function ReviewForm(props) {
   const auth = useContext(AuthContext)
+  const db = useContext(FSContext)
+
   const[star, setStar ] = useState()
   const[title, setTitle ] = useState()
   const[review, setReview ] = useState()

src/contexts/FSContext.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const FSContext = createContext()

src/pages/Detail.js

@@ -50,7 +50,7 @@ export function Detail(props) {
                 </Row>
                 <Row>
                     <Col>
-                        <ReviewForm movietitle={movieData.movie_title} />
+                        <ReviewForm movietitle={movieData.movie_title} movieId={movieData.movieId} />
                     </Col>
                 </Row>
             </Container>