From e7147ca112536ec743492dce96f7d2435b5121b0 Mon Sep 17 00:00:00 2001 From: Shashank519915 <120128150+Shashank519915@users.noreply.github.com> Date: Sun, 4 Feb 2024 16:25:27 +0530 Subject: [PATCH 1/5] Create AddFoodForm.js --- src/AddFoodForm.js | 78 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 78 insertions(+) create mode 100644 src/AddFoodForm.js diff --git a/src/AddFoodForm.js b/src/AddFoodForm.js new file mode 100644 index 0000000..0f5f7be --- /dev/null +++ b/src/AddFoodForm.js @@ -0,0 +1,78 @@ +import { useState } from 'react'; +import { Divider, Input, Button } from 'antd'; + +function AddFoodForm(props) { + const [newFood, setNewFood] = useState({ + name: '', + image: '', + calories: '', + servings: '', + }); + + const handleInputChange = (e) => { + const { name, value } = e.target; + setNewFood({ ...newFood, [name]: value }); + }; + + const handleSubmit = (e) => { + e.preventDefault(); + + // Check if all fields are filled before adding the new food + if (newFood.name && newFood.image && newFood.calories && newFood.servings) { + // Call the onAddFood function passed from the parent component + props.onAddFood(newFood); + + // Reset the form after submitting + setNewFood({ + name: '', + image: '', + calories: '', + servings: '', + }); + } + }; + + return ( +
+ Add Food Entry + + + + + + + + + + + + + + +
+ ); +} + +export default AddFoodForm; From 18f5437e591898ad7e1a8649c3477079f2cfc46c Mon Sep 17 00:00:00 2001 From: Shashank519915 <120128150+Shashank519915@users.noreply.github.com> Date: Sun, 4 Feb 2024 16:25:51 +0530 Subject: [PATCH 2/5] Update App.css --- src/App.css | 35 ++++++++--------------------------- 1 file changed, 8 insertions(+), 27 deletions(-) diff --git a/src/App.css b/src/App.css index 74b5e05..6bc0a61 100644 --- a/src/App.css +++ b/src/App.css @@ -1,38 +1,19 @@ .App { - text-align: center; + margin: 10px; } -.App-logo { - height: 40vmin; - pointer-events: none; +Button { + margin: 10px 0; } -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; +.feedback { display: flex; flex-direction: column; - align-items: center; justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; + align-items: center; + padding: 50px; } -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } +.feedback span { + font-size: 200px; } From fb21c288d9d22dd9ca7ce27fc109380763df843d Mon Sep 17 00:00:00 2001 From: Shashank519915 <120128150+Shashank519915@users.noreply.github.com> Date: Sun, 4 Feb 2024 16:26:26 +0530 Subject: [PATCH 3/5] Update App.js --- src/App.js | 83 +++++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 67 insertions(+), 16 deletions(-) diff --git a/src/App.js b/src/App.js index 3784575..4c09d09 100644 --- a/src/App.js +++ b/src/App.js @@ -1,25 +1,76 @@ -import logo from './logo.svg'; +// import logo from './logo.svg'; +import { useState } from 'react'; import './App.css'; +import { Row, Divider, Button} from 'antd'; +import FoodBox from './FoodBox'; +import AddFoodForm from './AddFoodForm'; +import Search from './Search'; +import foods from './foods.json'; function App() { + const [foodData, setFoodData] = useState(foods.map((food) => ({ ...food, id: food.name }))); + const [filteredFoodData, setFilteredFoodData] = useState(foodData); + const [showAddForm, setShowAddForm] = useState(false); + + const handleAddFood = (newFood) => { + // Use food name as id + const foodWithId = { ...newFood, id: newFood.name }; + + setFoodData([foodWithId, ...foodData]); + setFilteredFoodData([foodWithId, ...filteredFoodData]); + }; + + const handleDeleteFood = (id) => { + const updatedFoodData = foodData.filter((food) => food.id !== id); + setFoodData(updatedFoodData); + setFilteredFoodData(updatedFoodData); + }; + + const handleSearch = (query) => { + const filteredData = foodData.filter((food) => + food.name.toLowerCase().includes(query.toLowerCase()) + ); + setFilteredFoodData(filteredData); + }; + + const toggleAddForm = () => { + setShowAddForm(!showAddForm); + }; + return (
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
+ + +

Food List

+ + + {/* Display AddFoodForm if showAddForm is true */} + {showAddForm && } + + {/* Toggle display of AddFoodForm */} + + + {/* Display Search component */} + + + Food List + + + {/* Render the list of Food Box components */} + {foodData.length === 0 ? ( +
+

Oops! There is no more content to show.

+ Ø +
+ ) : ( + foodData.map((food) => ( + + )) + )} +
); } - export default App; From f1a8dd2e8354a42d12f8a35b55dadc64aa3fcab1 Mon Sep 17 00:00:00 2001 From: Shashank519915 <120128150+Shashank519915@users.noreply.github.com> Date: Sun, 4 Feb 2024 16:26:52 +0530 Subject: [PATCH 4/5] Create FoodBox.js --- src/FoodBox.js | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 src/FoodBox.js diff --git a/src/FoodBox.js b/src/FoodBox.js new file mode 100644 index 0000000..52060a5 --- /dev/null +++ b/src/FoodBox.js @@ -0,0 +1,29 @@ +import { Card, Col, Button } from 'antd'; + +function FoodBox({ food, onDelete }) { + const handleDelete = () => { + // Call the onDelete function with the food name when the delete button is clicked + onDelete(food.name); + }; + + return ( + + + food +

Calories: {food.calories}

+

Servings: {food.servings}

+

+ Total Calories: {food.calories * food.servings} kcal +

+ + + + ); +} + +export default FoodBox; From 67334ecdbdbb87b878677e17175b1d0c1fb06ed6 Mon Sep 17 00:00:00 2001 From: Shashank519915 <120128150+Shashank519915@users.noreply.github.com> Date: Sun, 4 Feb 2024 16:27:10 +0530 Subject: [PATCH 5/5] Create Search.js --- src/Search.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 src/Search.js diff --git a/src/Search.js b/src/Search.js new file mode 100644 index 0000000..f8dae81 --- /dev/null +++ b/src/Search.js @@ -0,0 +1,18 @@ +import { Divider, Input } from 'antd'; + +function Search({ onSearch }) { + const handleSearch = (e) => { + onSearch(e.target.value); + }; + + return ( + <> + Search + + + + + ); +} + +export default Search;