Final finishing touches on Firestore Component

src/components/ReviewForm.js

@@ -3,20 +3,35 @@ import Button from "react-bootstrap/Button"
 
 import { AuthContext } from "../contexts/AuthContext"
 import { FSContext } from "../contexts/FSContext"
-import { useContext, useState } from "react"
+import { useContext, useState, useEffect } from "react"
 import { collection, addDoc } from "firebase/firestore"; 
 
-const submitHandler = (event) => {
+const submitHandler = async (event) => {
 event.preventDefault()
+const userReview = {title: title, star: star, body: review }
+const col = collection(db, `movies/${props.movieId}/reviews`)
+const ref = await addDoc(col, userReview )
+console.log( ref )
 }
 
 export function ReviewForm(props) {
   const auth = useContext(AuthContext)
   const db = useContext(FSContext)
 
-  const[star, setStar ] = useState()
+  const[star, setStar ] = useState(5)
-  const[title, setTitle ] = useState()
+  const[title, setTitle ] = useState('')
-  const[review, setReview ] = useState()
+  const[review, setReview ] = useState('')
+  const[valid, setValid] = useState(false)
+
+  useEffect(() => {
+    if( title.length > 4 && review.length > 4 ) {
+      setValid( true )
+    }
+      else {
+        setValid( false )
+    }
+  }, [star, title, review])
+
   if (auth) {
     return (
       <Form onSubmit={submitHandler} className="my-4">
@@ -56,7 +71,12 @@ export function ReviewForm(props) {
             onChange={(evt) => setReview(evt.target.value) }
           />
         </Form.Group>
-        <Button type="submit" variant="primary">
+        <Button
+         type="submit"
+         variant="primary"
+         className="mt-2"
+         disabled={ (valid) ? false: true }
+         >
           Submit
         </Button>
       </Form>