FridgeList updated view

package.json

@@ -13,7 +13,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-player": "^2.11.0",
-    "react-router-dom": "^5.3.4"
+    "react-router-dom": "^5.3.4",
+    "uuid": "^9.0.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.17",

src/ExampleData.json

@@ -1,7 +0,0 @@
-{
-    "id": 1,
-    "name": "Onion Salad",
-    "ingredients": {"Onion": 0.5, "carrot": 2},
-    "linkToVid": "https//www.youtube.com",
-    "linkToPic": "https://images.pexels.com/photos/1640777/pexels-photo-1640777.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
-}

src/List.jsx

@@ -1,10 +0,0 @@
-import React from 'react'
-import Receipe from './receipe'
-
-export default function List({receipes}) {
-    return (
-        receipes.map(receipe => {
-            return <Receipe key = {receipe.id} receipe = {receipe} />
-        })
-    )
-}

src/components/Fridge/Ingredient.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+export default function Ingredient({ingredient, ingredientChecked}) {
+
+    function handleIngredientClicked(){
+        ingredientChecked(ingredient.id)
+    }
+
+    const amountStyle = {
+        left: "200px",
+        position: "fixed"
+    }
+
+    const divStyle = {
+        paddingTop: "10px",
+        paddingLeft: "10px"
+    }
+    return (
+        <div style = {divStyle}>
+        <label>
+            <input type="checkbox" checked={ingredient.complete} onChange={handleIngredientClicked}></input>
+            {ingredient.name}
+        </label>
+        <label style={amountStyle}>
+        x{ingredient.amount}
+        </label>
+        </div>
+    )
+}

src/components/Fridge/IngredientList.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import Ingredient from './Ingredient'
+
+export default function ReceipeList({ingredients, ingredientChecked}) {
+    return (
+        ingredients.map(ingredient => {
+           return <Ingredient key = {ingredient.id} ingredient = {ingredient} ingredientChecked={ingredientChecked}/>
+        })
+    )
+}

src/components/pages/FridgeList.jsx

@@ -1,9 +1,60 @@
-function FridgeList() {
-    return <section>
-      <h1>Fridge List</h1>
+import {useState, useEffect, useRef} from 'react'
+import IngredientList from "../Fridge/IngredientList"
+import { v4 as uuidv4 } from 'uuid'
 
-    </section>;
+function FridgeList() {
+  const heading = {
+    paddingTop: "20px",
+    paddingLeft: "20px"
+}
+  let id = 0
+  const [ingredients,setIngredients] = useState([])
+  const ingredientNameRef = useRef()
+  const localStorageKey = 'FridgeList.ingredients'
+  const amountRef = useRef()
+
+  useEffect(() =>{
+    const storedIngredients = JSON.parse(localStorage.getItem(localStorageKey))
+    if (storedIngredients) setIngredients(storedIngredients)
+  }, [])
+
+  useEffect(() => {
+    localStorage.setItem(localStorageKey, JSON.stringify(ingredients))
+  }, [ingredients])
+
+  function handleAddIngredient(e){
+    const name = ingredientNameRef.current.value
+    const amount = amountRef.current.value
+    if (name === '' || amount == '') return
+    setIngredients(prevIngredients => {
+      return [...prevIngredients, {id: uuidv4(), name: name, complete: false, amount: amount}]
+    })
+    ingredientNameRef.current.value = null
+    amountRef.current.value = null
   }
+
+  function ingredientChecked(id){
+    const newIngredients = [...ingredients]
+    const ingredient = newIngredients.find(ingredient => ingredient.id === id)
+    ingredient.complete = !ingredient.complete
+    setIngredients(newIngredients)
+  }
+
+  function handleClear(){
+    setIngredients([])
+  }
+
+    return(<>
+    <h1 style={heading}>Ingredient List</h1>
+    <input ref={ingredientNameRef}type="text"></input>
+    <input ref={amountRef}type="text"></input>
+    <button onClick={handleAddIngredient}>Add Ingredient</button>
+    <button onClick={handleClear}>Clear Ingredients</button>
+    <IngredientList ingredients = {ingredients} ingredientChecked={ingredientChecked}></IngredientList>
+    </>
+    )
+  }
+
   
   export default FridgeList;
   

src/receipe.jsx

@@ -1,19 +0,0 @@
-import React from 'react'
-
-export default function receipe({receipe}) {
-    const image = {
-        height: "200px",
-        width: "200px"
-    }
-
-    const receipestyle = {
-        position: "absolute"
-    }
-    return (
-        <div>
-            <h1>Receipe List</h1>
-            <img src = {receipe.urlPic} style={image}></img>
-            <h1 style={receipestyle}>{receipe.name}</h1>
-        </div>
-    )
-}