Lab Assigment-17

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.18.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

src/App.js

@@ -1,7 +1,28 @@
 import logo from './logo.svg';
 import './App.css';
+import jsonData from "./foods.json";
+import { useState } from "react";
+import "./App.css";
+import FoodBox from "./Components/FoodBox";
+import { Row, Divider } from "antd";
+import AddFoodForm from "./Components/AddFoodForm";
+import Search from "./Components/Search";
 
 function App() {
+  const [foods, setFoods] = useState(jsonData);
+
+  function handleSearch(searchQuery) {
+    const filterFoods = jsonData.filter((food) =>
+      food.name.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    setFoods(filterFoods);
+  }
+
+  const deleteFood = (calories)=>{
+    const updatedFoods = foods.filter((food) => food.calories!== calories);
+    setFoods(updatedFoods);
+  }
   return (
     <div className="App">
       <header className="App-header">
@@ -18,8 +39,30 @@ function App() {
           Learn React
         </a>
       </header>
+
+      <AddFoodForm foods={foods} addNewFood={setFoods} />
+      <Search handleSearch={handleSearch} />
+      <Divider>
+        <h1>Food List</h1>
+      </Divider>
+      {
+      foods.length>0?
+      (
+      <Row gutter={[16, 16]}>
+        {foods.map((food, index) => (
+          <FoodBox key={index} food={food}  deleteFood={()=>deleteFood(food.calories)}  />
+        ))}
+      </Row>
+      ):
+      (
+      <div style={{textAlign:'center'}}>
+        <h1 >Oop! There is no more content to show</h1>
+        <img src="https://imgs.search.brave.com/LlUypw3emuVXxVmVqVOAFfx3Dy8xf-U-3Ori5tAbsK4/rs:fit:500:0:0/g:ce/aHR0cHM6Ly9pbWcu/ZnJlZXBpay5jb20v/cHJlbWl1bS12ZWN0/b3IvcHJvaGliaXRp/b24tc2lnbi1uby1z/aWduLXdvcmtzcGFj/ZS1iYWNrZ3JvdW5k/XzIzMTc4Ni03NTYz/LmpwZw" alt="" />
+      </div>
+      )   
+    }
     </div>
   );
 }
 
-export default App;
+export default App;

src/Components/AddFoodForm.jsx

@@ -0,0 +1,80 @@
+import React, { useState } from "react";
+import { Form, Input, Button } from "antd";
+
+const AddFoodForm = ({ foods, addNewFood }) => {
+  const [showBtn, setShowBtn] = useState(false);
+  const [form] = Form.useForm();
+  const onFinish = (newFood) => {
+    addNewFood([newFood, ...foods]);
+    form.resetFields();
+  };
+
+  return (
+    <div style={{ margin: "10px" }}>
+      {showBtn ? (
+        <>
+          <Form
+            layout="vertical"
+            form={form}
+            onFinish={onFinish}
+            labelCol={{ span: 8 }}
+            wrapperCol={{ span: 16 }}
+          >
+            <Form.Item
+              label="Name"
+              name="name"
+              rules={[{ required: true, message: "Please enter the name!" }]}
+            >
+              <Input />
+            </Form.Item>
+
+            <Form.Item
+              label="Image"
+              name="image"
+              rules={[
+                { required: true, message: "Please enter the image URL!" },
+              ]}
+            >
+              <Input />
+            </Form.Item>
+
+            <Form.Item
+              label="Calories"
+              name="calories"
+              rules={[
+                { required: true, message: "Please enter the calories!" },
+              ]}
+            >
+              <Input type="number" />
+            </Form.Item>
+
+            <Form.Item
+              label="Servings"
+              name="servings"
+              rules={[
+                { required: true, message: "Please enter the servings!" },
+              ]}
+            >
+              <Input type="number" />
+            </Form.Item>
+
+            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
+              <Button type="primary" htmlType="submit">
+                Create
+              </Button>
+            </Form.Item>
+          </Form>
+          <Button type="primary" ghost onClick={() => setShowBtn(false)}>
+            Hide Form
+          </Button>
+        </>
+      ) : (
+        <Button type="primary" ghost onClick={() => setShowBtn(true)}>
+          Add New Food
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default AddFoodForm;

src/Components/FoodBox.jsx

@@ -0,0 +1,32 @@
+import { Card, Button, Col } from "antd";
+const FoodBox = ({ food , deleteFood }) => {
+  return (
+    <Col xs={24} sm={12} md={8} lg={6}>
+      <Card
+        style={{ margin: 30 }}
+        title={food.name}
+        cover={
+          <img
+            alt={food.name}
+            src={food.image}
+            style={{ width: "100%", height: "200px", objectFit: "contain" }}
+          />
+        }
+      >
+        <p>Servings: {food.servings}</p>
+        <p>
+          <b>Total Calories: {food.calories} Kcal</b>
+        </p>
+        <Button
+          onClick={deleteFood}
+          type="primary"
+          style={{ background: "#1890ff", borderColor: "#1890ff" }}
+        >
+          Delete
+        </Button>
+      </Card>
+    </Col>
+  );
+};
+
+export default FoodBox;

src/Components/Search.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import {Divider,Input} from "antd"
+const Search = ({handleSearch}) => {
+  function handleChange(e){
+    const searchQuery= e.target.value ;
+    handleSearch(searchQuery)
+  }
+  return (
+    <>
+      <Divider>Search</Divider>
+      <label style={{margin:'10px'}}>Search</label>
+
+      <Input style={{ width:"50%", display:'block', padding:'10px 20px', margin:'10px'}}
+       value={undefined}
+       type="text" 
+       onChange={handleChange}
+       />
+    </>
+  )
+}
+
+export default Search