open nutrition lab react practise

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "antd": "^5.21.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

src/AddFoodForm.jsx

@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+import { Input, Button, Col, Card } from 'antd';
+
+export default function AddFoodForm({ addFood }) {
+  const [name, setName] = useState('');
+  const [image, setImage] = useState('');
+  const [calories, setCalories] = useState('');
+  const [servings, setServings] = useState('');
+
+  const handleSubmit = (e) => {
+    e.preventDefault(); //prevent reload after submitting
+    if (name && image && calories && servings) { //checking if everythin is in
+  // obj with data collected
+  const newFood = { 
+    name, 
+    image, 
+    calories: Number(calories), 
+    servings: Number(servings) 
+};
+
+// passing the new food object
+addFood(newFood); 
+//clear after submission
+      setName('');
+      setImage('');
+      setCalories('');
+      setServings('');
+    } else {
+      alert('Please fill all fields');
+    }
+  };
+
+  return (
+    <Col span={6}>
+      <Card className='food-card addFoodButton'>
+        <form className='form-add-food' >
+          <Input value={name} placeholder="Name" onChange={(e) => setName(e.target.value)} />
+          <Input value={image} placeholder="Image URL" onChange={(e) => setImage(e.target.value)} />
+          <Input value={calories} type="number" placeholder="Calories" onChange={(e) => setCalories(e.target.value)} />
+                  <Input value={servings} type="number" placeholder="Servings" onChange={(e) => setServings(e.target.value)} />
+
+          <Button onClick={handleSubmit} className='btn' type="submit">Add Food</Button>
+        </form>
+      </Card>
+    </Col>
+  );
+}

src/App.css

@@ -1,38 +1,63 @@
 .App {
-  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+gap: 2rem;
+  padding: 20px;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+.ant-row {
+  display: flex;
+  align-items: center;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+
+.food-card{
+  border: 1.4px solid #1d1002; 
+  min-width: 15rem;
+
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+.btn{
+background-color: #d98628 ;
+color: rgb(255, 255, 255);  
+}
+
+.flex-foodcard{
+display: flex;
+justify-content: center;
+align-items: center;
+flex-direction: column;
+text-align: center;
+}
+
+.col-foodbox{
   display: flex;
-  flex-direction: column;
-  align-items: center;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+  flex-wrap: wrap;
+  align-items: center;
 }
 
-.App-link {
-  color: #61dafb;
+.search-bar{
+  width: 70rem;
+
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+
+.form-add-food{
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
 }
+
+
+
+.btn-add-food{
+  border: 1px solid black;
+}
+
+
+

src/App.js

@@ -1,23 +1,62 @@
-import logo from './logo.svg';
+import React, { useState } from 'react';
 import './App.css';
+import FoodBox from './FoodBox';
+import AddFoodForm from './AddFoodForm';
+import Search from './SearchBar'; // Make sure your Search component is implemented correctly
+import foods from './foods.json';
+import { Row, Button, Empty } from 'antd';
 
 function App() {
+  const [foodList, setFoodList] = useState(foods);
+  const [filteredFood, setFilteredFood] = useState(foods);
+  const [formVisible, setFormVisible] = useState(true);
+
+  const addFood = (newFood) => {
+    // newfood? valid before adding it to the list
+    console.log("Adding food:", newFood); // Check what is being added
+
+    if (newFood.name && newFood.image && newFood.calories && newFood.servings) {
+      const updatedFoodList = [...foodList, newFood];
+      setFoodList(updatedFoodList);
+      setFilteredFood(updatedFoodList); 
+    } else {
+      alert('Please fill all fields before adding food.'); 
+    }
+  };
+
+  const filterFood = (searchTerm) => {
+    const filtered = foodList.filter((food) => 
+      food.name.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+    setFilteredFood(filtered);
+  };
+
+  const deleteFood = (foodName) => {
+    const updatedFoodList = foodList.filter((food) => food.name !== foodName);
+    setFoodList(updatedFoodList);
+    setFilteredFood(updatedFoodList); 
+  };
+
+  const toggleFormVisibility = () => {
+    setFormVisible(!formVisible);
+  };
+
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <Button className='btn' type='button' onClick={toggleFormVisibility}>
+        {formVisible ? 'Hide Form' : 'Add New Food'}
+      </Button>
+      {formVisible && <AddFoodForm addFood={addFood} />}
+      <Search filterFood={filterFood} />
+      {filteredFood.length === 0 ? (
+        <Empty description="No foods available" />
+      ) : (
+        <Row className='row-searched-food'>
+          {filteredFood.map((food) => (
+            <FoodBox food={food} deleteFood={deleteFood} key={food.name} />
+          ))}
+        </Row>
+      )}
     </div>
   );
 }

src/FoodBox.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { Button, Col, Card } from 'antd';
+
+
+export default function FoodBox({food, deleteFood}) {
+    return (
+    <>
+            <Col span={6} key={food.name} className='col-foodbox'>
+              <Card
+                    className="food-card flex-foodcard" 
+                style={{ width: 230, height: 300, margin: 10 }}
+                >
+                    <p style={{ fontWeight: "bolder", fontSize: "1"  }}
+                    >{food.name.toUpperCase()}</p>
+                <img src={food.image} height={70} alt={food.name} />
+                <p>Calories: {food.calories}</p>
+                <p>Servings: {food.servings}</p>
+                <p>
+                  <b>Total Calories: {food.calories * food.servings}</b> kcal
+                </p>
+                <Button className='btn' type='submit' onClick={() => deleteFood(food.name)}>Delete</Button>
+                </Card>
+            </Col>
+            </>
+  )
+}

src/SearchBar.jsx

@@ -0,0 +1,20 @@
+import React, { useState } from 'react';
+import { Input, Card } from 'antd';
+
+export default function Search({ filterFood }) {
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const handleSearch = (e) => {
+    setSearchTerm(e.target.value);
+    filterFood(e.target.value);
+  };
+
+    return (
+        <>
+            <Card className='food-card search-bar'>
+                <Input placeholder="Search food" value={searchTerm} onChange={handleSearch} />
+            </Card>
+        </>
+    )
+
+}

src/index.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
+import 'antd/dist/reset.css';
+
 import App from './App';
 import reportWebVitals from './reportWebVitals';