Final Tweaks and Commenting

Week-14-Props_State_Events_and_Lifecycle_Methods/package.json

@@ -12,7 +12,8 @@
   "dependencies": {
     "bootstrap": "^5.3.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "uuid": "^9.0.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.37",

Week-14-Props_State_Events_and_Lifecycle_Methods/src/App.css

@@ -1,3 +1,4 @@
+/* Base CSS File */
 #root {
 
   max-width: 1280px;
@@ -15,7 +16,7 @@ body{
   }
 }
 
-
+/* Nav Styling */
 nav{
 
   background-color: #61dbfb;
@@ -28,6 +29,7 @@ nav{
   box-shadow: 0 0 2px 2px #4c768d;
 }
 
+/* Movie Card Styling */
 .card{
   width: 18rem;
   height: 45em;
@@ -37,6 +39,7 @@ nav{
   box-shadow: 0 0 2px 2px #4c768d;
 }
 
+/* Synopsis Hover Component */
 .hover{
   margin: 3px;
   position:absolute;
@@ -52,6 +55,7 @@ nav{
   box-shadow: 0 0 2px 2px #242443;
 }
 
+/* General Button Styling */
 .btn{
   box-shadow: 0 0 2px 2px #242443;
 }

Week-14-Props_State_Events_and_Lifecycle_Methods/src/App.jsx

@@ -1,20 +1,20 @@
+//Imports
 import { useState } from 'react'
 import NavBar from "../src/NavBar"
 import MovieCard from '../src/MovieCard'
 import { movies } from "./data"
 
+//App Component
+export default function App() {
 
-
-function App() {
-
-
+  //Putting the Array in State
   const [movieList, setMovielist] = useState(movies);
 
-
+    //Callback Function sent down to form Component to Add Review to Array
     const handlePost = (index, newReview) =>{
-
+    //Push to Array
     movieList[index].reviewList.push(newReview);
-
+    //Update the State
     setMovielist((prevArray) => {
       const newArray = [...prevArray];
       const objectToUpdate = { ...newArray[index] };
@@ -23,14 +23,10 @@ function App() {
       objectToUpdate.subArray = subArrayToUpdate;
       newArray[index] = objectToUpdate;
       return newArray;
-    });
-
-
+    });  
   }
 
-    //console.log(reviews)
-
-
+  //HTML Output
   return (
     <>
      <NavBar />
@@ -53,6 +49,4 @@ function App() {
       </div>
     </>
   )
-}
-
-export default App
+}

Week-14-Props_State_Events_and_Lifecycle_Methods/src/Leave Review.jsx

@@ -1,37 +1,52 @@
+//Imports
 import { useState } from "react"
 import StarRating from "./StarRating";
+import { v4 as uuidv4 } from 'uuid';
 
+//Leave Review Component
 export default function LeaveReview({ id, handlePost}){
-   //States to pull from form
+  //States to pull from form
   const [userName, setUserName] = useState("");
   const [review, setReview] = useState("");
 
+  //Random Key Generator
+  const v4options = {
+   random: [
+     0x10, 0x91, 0x56, 0xbe, 0xc4, 0xfb, 0xc1, 0xea, 0x71, 0xb4, 0xef, 0xe1, 0x67, 0x1c, 0x58, 0x36,
+   ],
+ };
+
+   //On Submit Function from the form
   const postReview = (e) => {
    e.preventDefault();
 
-
-
+   //Variables to be passed back to App to update Array
    let index = id;
    let newReview = {
       author: userName,
-      stars: selectedRating,
+      stars: rating,
       review: review
    }
 
+//Callback Function from App component
 handlePost(index, newReview);
 
+//Clear the form fields
 setUserName("");
 setReview("");
-
-handleRatingChange(0);
+setRating(0);
  };
 
- const [selectedRating, setSelectedRating] = useState();
+//State for the Star Component
+const [rating, setRating] = useState(0);
 
- const handleRatingChange = (rating) => {
-   setSelectedRating(() => rating);
- };
-  //html form
+const handleRatingChange = (newRating) => {
+   setRating(newRating);
+};
+
+
+
+   //HTML Output
    return (
 
       <>
@@ -51,7 +66,7 @@ handleRatingChange(0);
                onChange={(e) => setReview(e.target.value)} />
                 <br/>
                 <label>How Many Stars Would You Give?</label>
-                <StarRating key={selectedRating} defaultValue={0} onRatingChange={handleRatingChange}/>
+                <StarRating key={uuidv4(v4options)} value={rating} onChange={handleRatingChange}/>
                <br/>
                <button id="post" className="btn btn-secondary" type="submit">Post Review</button>
                <br/>
@@ -61,4 +76,4 @@ handleRatingChange(0);
       </div>
       </>
    )
-}
+};

Week-14-Props_State_Events_and_Lifecycle_Methods/src/MovieCard.jsx

@@ -1,26 +1,35 @@
+//Imports
 import React, { useState } from 'react';
-
+import { v4 as uuidv4 } from 'uuid';
 import Reviews from "./Reviews"
 
+//Movie Card Component
+export default function MovieCard( {title, synopsis, image, reviews, director, writer, starring, handlePost, rating, id} ){
 
-export default function MovieCard( 
-  {title, synopsis, image, reviews, director, writer, starring, handlePost, rating, id} ){
-
-  //console.log(id);
-
+  //Random Key Generator
+  const v4options = {
+    random: [
+      0x10, 0x91, 0x56, 0xbe, 0xc4, 0xfb, 0xc1, 0xea, 0x71, 0xb4, 0xef, 0xe1, 0x67, 0x1c, 0x58, 0x36,
+    ],
+  };
+
+  //State for Review Modal
   const [show, setShow] = useState(false)
 
+  //State for Hover over Synopsis
   const [isHovering, setIsHovering] = useState(false);
 
+  //Synopsis On
   const handleMouseOver = () => {
     setIsHovering(true);
   };
 
+  //Hover Off
   const handleMouseOut = () => {
     setIsHovering(false);
   };
 
-
+  //HTML Output
     return(
       <>
 
@@ -47,7 +56,7 @@ export default function MovieCard(
               <p className="card-text"><b>Rated:</b> {rating}</p>
               <div>
               <button className='btn btn-secondary' onClick={ () => setShow(true) }>Reviews</button>
-              <Reviews onClose={ () => setShow(false)} 
+              <Reviews key={uuidv4(v4options)} onClose={ () => setShow(false)} 
               show={show}
               reviews={reviews}
               handlePost={handlePost}

Week-14-Props_State_Events_and_Lifecycle_Methods/src/NavBar.jsx

@@ -1,4 +1,7 @@
+//Nav Bar Component
 export default function NavBar(){
+
+    //HTML Output
     return(
         <nav>
             90's Scifi in no particular order!

Week-14-Props_State_Events_and_Lifecycle_Methods/src/Review.css

@@ -1,3 +1,4 @@
+/* CSS for the Review Modal */
 .modal {
     position: fixed;
     left: 0;

Week-14-Props_State_Events_and_Lifecycle_Methods/src/Reviews.jsx

@@ -1,13 +1,24 @@
+//imports
 import LeaveReview from "./Leave Review";
 import "./Review.css"
 import StarRating from "./StarRating";
+import { v4 as uuidv4 } from 'uuid';
 
+//Reviews Component (modal)
 export default function Reviews ( {show, reviews, handlePost, onClose, id} ) {
+    //if show is false, the modal is hidden
     if (!show){
         return null
     }
-
+
+    //random generator for key
+    const v4options = {
+        random: [
+          0x10, 0x91, 0x56, 0xbe, 0xc4, 0xfb, 0xc1, 0xea, 0x71, 0xb4, 0xef, 0xe1, 0x67, 0x1c, 0x58, 0x36,
+        ],
+      };
 
+    //HTML Output
     return (
         <div className="modal">
             <div className="modal-content">
@@ -16,12 +27,12 @@ export default function Reviews ( {show, reviews, handlePost, onClose, id} ) {
                 </div>
                 <div className="modal-body">
                     <div>
-                        <LeaveReview id={id} handlePost={handlePost} />
+                        <LeaveReview key={uuidv4(v4options)} id={id} handlePost={handlePost} />
                     </div>
                     {reviews.map((review, index) => (
                         <div key={index}>
                             <h5>{review.author}</h5>
-                            <StarRating defaultRating={review.stars}/>
+                            <StarRating value={review.stars}/>
                             <p>{review.review}</p> 
                         </div>
                     ))}

Week-14-Props_State_Events_and_Lifecycle_Methods/src/StarRating.jsx

@@ -1,21 +1,23 @@
-import React, { useState } from 'react';
+//imports
+//import React, { useState } from 'react';
 import "./star.css"
 
-export default function StarRating ({ defaultRating, onRatingChange }) {
-    const [rating, setRating] = useState(defaultRating);
-
-    const handleStarClick = (selectedRating) => {
-      setRating(selectedRating);
-      onRatingChange(selectedRating);
+//Star Rating Component
+export default function StarRating ({ value, onChange }) {
+    
+    //Callback function to Leave Review Component
+    const handleStarClick = (rating) => {
+      onChange(rating);
     };
-
+
+    //Html Output
     return (
       <div className="star-rating">
-        {[1, 2, 3, 4, 5].map((star) => (
+        {[1, 2, 3, 4, 5].map((rating) => (
           <span
-            key={star}
-            className={star <= rating ? 'star active' : 'star'}
-            onClick={() => handleStarClick(star)}
+            key={rating}
+            className={rating <= value ? 'star active' : 'star'}
+            onClick={() => handleStarClick(rating)}
           >
             &#9733;
           </span>

Week-14-Props_State_Events_and_Lifecycle_Methods/src/data.jsx

@@ -1,3 +1,4 @@
+//Main Data Array
 export const movies = [
     {
        id: 1,

Week-14-Props_State_Events_and_Lifecycle_Methods/src/main.jsx

@@ -1,6 +1,6 @@
+//Imports
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-
 // Bootstrap CSS
 import "bootstrap/dist/css/bootstrap.min.css";
 // Bootstrap Bundle JS

Week-14-Props_State_Events_and_Lifecycle_Methods/src/star.css

@@ -1,8 +1,10 @@
+/* unclicked stars */
 .star {
     color: black;
     cursor: pointer;
   }
-
+
+/* clicked stars */
   .star.active {
     color: yellow;
   }