Completed

package.json

@@ -3,9 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@ant-design/icons": "^5.6.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "antd": "^5.24.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

src/App.js

@@ -1,23 +1,63 @@
-import logo from './logo.svg';
-import './App.css';
+import foods from './foods.json'
+import { useEffect, useMemo, useState } from 'react';
+import { Button } from 'antd'
+import { WarningOutlined } from '@ant-design/icons';
+import AddFoddForm from './components/AddFoddForm';
+import Search from './components/Search';
+import FoodList from './components/FoodList';
 
 function App() {
+
+  const [dataFoods, setDataFoods] = useState([])
+  const [filterText, setFilterText] = useState('')
+  const [displayForm, setDisplayForm] = useState(false)
+  const [visibleBtn, setVisibleBtn] = useState(true)
+
+
+  useEffect(() => {
+    setDataFoods(foods)
+  }, [])
+
+  const productsToShow = useMemo(() => {
+    const products = dataFoods.filter(food => 
+      food.name.toLowerCase().includes(filterText.toLowerCase())
+    )
+    return products
+  }, [dataFoods, filterText])
+
+  const addNewFood = (newFood) => {
+    setDataFoods([...dataFoods, newFood])
+  }
+
+  const handleDisplayForm = () => {
+    setDisplayForm(!displayForm)
+    setVisibleBtn(!visibleBtn)
+  }
+
   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>
+      {visibleBtn ? <Button 
+        type='default' 
+        onClick={handleDisplayForm}
+        style={{ margin: '20px' }}
+      >Add New Food</Button> : null}
+      {displayForm ? 
+      <AddFoddForm 
+        addNewFood={addNewFood} 
+        handleDisplayForm={handleDisplayForm}
+      /> : null}
+      <Search 
+        filterText={filterText}
+        setFilterText={setFilterText}
+      />
+      <h1>Food list</h1>
+      <FoodList 
+        productsToShow={productsToShow}
+        dataFoods={dataFoods}
+        setDataFoods={setDataFoods}
+      />
+      {dataFoods.length === 0 ? <><h3>Ooops, there is no more content to show.</h3><WarningOutlined style={{ color: 'red' , fontSize: '300px'}}/></> : null}
+
     </div>
   );
 }

src/components/AddFoddForm.js

@@ -0,0 +1,61 @@
+import { Input, Button, Form } from 'antd'
+
+export default function AddFoddForm({ addNewFood, handleDisplayForm }) {
+
+  const [form] = Form.useForm();
+
+  const handleSubmit = (values) => {
+    const newFood = {
+      name: values.Name,
+      calories: values.Calories,
+      image: values.Image,
+      servings: values.Servings
+    }
+    addNewFood(newFood)
+    form.resetFields()
+  }
+
+  return (
+    <div>
+      <h1>Add new food</h1>
+      <Form
+        name="wrap"
+        labelCol={{ flex: '100px' }}
+        labelAlign="left"
+        labelWrap
+        wrapperCol={{ flex: 1 }}
+        colon={false}
+        style={{ maxWidth: 600 }}
+        onFinish={handleSubmit}
+        form={form}
+      >
+        <Form.Item label="Name" name="Name" rules={[{ required: true }]}>
+          <Input />
+        </Form.Item>
+
+        <Form.Item label="Calories" name="Calories" rules={[{ required: true }]}>
+          <Input />
+        </Form.Item>
+
+        <Form.Item label="Image" name="Image" rules={[{ required: true }]}>
+          <Input />
+        </Form.Item>
+
+        <Form.Item label="Servings" name="Servings" rules={[{ required: true }]}>
+          <Input />
+        </Form.Item>
+
+        <Form.Item style={{ display: 'inline-block' }} label=" ">
+          <Button style={{ display: 'inline-block' }} type="primary" htmlType="submit" >
+            Submit
+          </Button>
+        </Form.Item>
+        <Form.Item label=" " style={{ display: 'inline-block' }}>
+          <Button style={{ display: 'inline-block' }} type="default" htmlType="button" onClick={handleDisplayForm}>
+            Hide Form
+          </Button>
+        </Form.Item>
+      </Form>
+    </div>
+  )
+}

src/components/FoodBox.js

@@ -0,0 +1,26 @@
+import { Card, Button } from "antd"
+
+export default function FoodBox({ 
+  itemImg, 
+  itemName, 
+  itemCalories, 
+  itemServings,
+  dataFoods,
+  setDataFoods
+ }){
+
+  const handleDeleteBtn = () => {
+    const newFoods = dataFoods.filter(food => food.name !== itemName)
+    setDataFoods(newFoods)
+  }
+
+  return (
+    <Card title={itemName} style={{ width: 230}} >
+      <img style={{ width: 200 }} src={itemImg} alt={itemName} />
+      <p>Calories: {itemCalories}</p>
+      <p>Servings: {itemServings}</p>
+      <p><strong>Total Calories:</strong> {itemCalories * itemServings}</p>
+      <Button type="primary" onClick={handleDeleteBtn}> Delete </Button>
+    </Card>
+  )
+}

src/components/FoodList.js

@@ -0,0 +1,31 @@
+import { Flex } from 'antd'
+import FoodBox from './FoodBox'
+
+export default function FoodList({ productsToShow, dataFoods, setDataFoods }) {
+
+
+
+  return (
+    <Flex 
+      wrap 
+      gap='large'
+      justify='center'
+      align='center'
+      style={{ width: '80%' , height: '100vh' }}
+    >
+      {productsToShow.map(food => {
+        return (
+          <FoodBox 
+            key={food.name}
+            itemImg={food.image}
+            itemName={food.name}
+            itemCalories={food.calories}
+            itemServings={food.servings}
+            dataFoods={dataFoods}
+            setDataFoods={setDataFoods}
+          />
+        )
+      })}
+      </Flex>
+  )
+}

src/components/Search.js

@@ -0,0 +1,20 @@
+import { Input } from 'antd'
+
+export default function Search({ filterText, setFilterText }) {
+
+  const handlerFilterTextChange = (e) => {
+    setFilterText(e.target.value)
+  }
+
+  return (
+    <div>
+      <h1>Search</h1>
+      <Input
+        placeholder="Search..." 
+        size='large'
+        value={filterText}
+        onChange={handlerFilterTextChange}
+      />
+    </div>
+  )
+}

src/index.css

@@ -7,6 +7,13 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+.App {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;