mirror of
https://github.com/array-in-a-matrix/foodie.git
synced 2024-05-23 06:37:22 -04:00
60 lines
1.8 KiB
JavaScript
60 lines
1.8 KiB
JavaScript
import {useState, useEffect, useRef} from 'react'
|
|
import IngredientList from "../Fridge/IngredientList"
|
|
import { v4 as uuidv4 } from 'uuid'
|
|
|
|
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;
|
|
|