Clever Niwagaba - Internship

package.json

@@ -1,38 +1,39 @@
-{
-  "name": "lab-react-root-nutrition",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
+{
+  "name": "lab-react-root-nutrition",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@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",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

src/App.css

@@ -1,38 +1,38 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

src/App.js

@@ -1,25 +1,68 @@
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
-  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>
-    </div>
-  );
-}
-
-export default App;
+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">
+        <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>
+
+      <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;

src/App.test.js

@@ -1,8 +1,8 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

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;