Nathan Chan's Lab React OpenNutrition assignment

src/App.js

@@ -1,24 +1,80 @@
-import logo from './logo.svg';
-import './App.css';
+import React, { useState } from 'react';
+import { Row, Button, Divider } from 'antd';
+import foods from './foods.json';
+import FoodBox from './components/FoodBox';
+import AddFoodForm from './components/AddFoodForm';
+import Search from './components/Search';
 
 function App() {
+  const [foodList, setFoodList] = useState(foods);
+  const [filteredFoodList, setFilteredFoodList] = useState(foods);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [isFormVisible, setIsFormVisible] = useState(true); // State to manage form visibility
+
+  // Function to add new food to the list
+  const handleAddFood = (newFood) => {
+    const updatedFoodList = [newFood, ...foodList];
+    setFoodList(updatedFoodList);
+    setFilteredFoodList(updatedFoodList.filter(food => 
+      food.name.toLowerCase().includes(searchTerm.toLowerCase())
+    ));
+  };
+
+  // Function to handle search
+  const handleSearch = (term) => {
+    setSearchTerm(term);
+    const filtered = foodList.filter(food =>
+      food.name.toLowerCase().includes(term.toLowerCase())
+    );
+    setFilteredFoodList(filtered);
+  };
+
+  // Function to delete a food item from the list
+  const handleDeleteFood = (foodName) => {
+    const updatedFoodList = foodList.filter((food) => food.name !== foodName);
+    setFoodList(updatedFoodList);
+    setFilteredFoodList(updatedFoodList); // Update the filtered list as well
+  };
+
+  // Function to toggle form visibility
+  const toggleFormVisibility = () => {
+    setIsFormVisible(!isFormVisible);
+  };
+
   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>
+    <div>
+      <Button onClick={toggleFormVisibility} style={{ marginLeft: '15px', marginBottom: '20px', color: 'blue', borderColor: 'blue' }}>
+        {isFormVisible ? 'Hide Form' : 'Add New Food'}
+      </Button>
+
+      {isFormVisible && (
+        <>
+          <Divider><h3 className="add-food-entry-title">Add Food Entry</h3></Divider>
+          <AddFoodForm onAddFood={handleAddFood} /> {/* Conditionally render the form */}
+        </>
+      )}
+
+      <Divider><h3 className="search-title">Search</h3></Divider>
+      <Search onSearch={handleSearch} /> {/* Render the search bar */}
+
+      <div style={{ textAlign: 'center', margin: '20px' }}>
+      <Divider><h3 className="food-list-title">Food List</h3></Divider>
+      </div>
+
+      {filteredFoodList.length === 0 ? (
+        <div style={{ textAlign: 'center', margin: '20px 0' }}>
+          <h3>Oops! There is no more content to show.</h3>
+          <img src={'/img/zeroImage.jpeg'} alt="No content" style={{ marginTop: '50px', marginBottom: '100px', width: '300px', height: 'auto' }} />
+        </div>
+      ) : (
+        <Row gutter={[16, 16]}>
+          {filteredFoodList.map((food, index) => (
+            <FoodBox key={index} food={food} onDeleteFood={handleDeleteFood} />
+          ))}
+        </Row>
+      )}
+    </div>    
+
   );
 }
 

src/antd/BUG_VERSIONS.json

@@ -0,0 +1,60 @@
+{
+  "3.9.3": [
+    "https://github.com/ant-design/ant-design/commit/6550df34b639ab0b3bf2c1cbf9b9828735c1fd41"
+  ],
+  ">= 3.10.0 <=3.10.9": [
+    "https://github.com/ant-design/ant-design/commit/6550df34b639ab0b3bf2c1cbf9b9828735c1fd41"
+  ],
+  ">= 3.11.0 <=3.11.5": [
+    "https://github.com/ant-design/ant-design/commit/6550df34b639ab0b3bf2c1cbf9b9828735c1fd41"
+  ],
+  ">= 4.21.6 < 4.22.0": ["https://github.com/ant-design/ant-design/pull/36682"],
+  ">= 4.22.2 <= 4.22.5": [
+    "https://github.com/ant-design/ant-design/issues/36932",
+    "https://github.com/ant-design/ant-design/pull/36800",
+    "https://github.com/ant-design/ant-design/issues/37024"
+  ],
+  "4.23.0": ["https://github.com/ant-design/ant-design/issues/37461"],
+  "4.23.5": [
+    "https://github.com/ant-design/ant-design/issues/37929",
+    "https://github.com/ant-design/ant-design/issues/37931"
+  ],
+  "4.24.0": ["https://github.com/ant-design/ant-design/issues/38371"],
+  "5.0.4": ["https://github.com/ant-design/ant-design/issues/39284"],
+  "5.0.6": ["https://github.com/ant-design/ant-design/issues/39807"],
+  "5.1.0": ["https://github.com/react-component/drawer/pull/370"],
+  "5.1.2": ["https://github.com/ant-design/ant-design/issues/39949"],
+  "5.1.3": ["https://github.com/ant-design/ant-design/issues/40113"],
+  "5.1.4": ["https://github.com/ant-design/ant-design/issues/40186"],
+  ">= 5.2.3 <= 5.3.0": [
+    "https://github.com/ant-design/ant-design/pull/40719#issuecomment-1453418135"
+  ],
+  "5.4.1": ["https://github.com/ant-design/ant-design/issues/41751"],
+  ">= 5.4.3 <= 5.4.5": [
+    "https://github.com/ant-design/cssinjs/pull/108",
+    "https://github.com/ant-design/ant-design/pull/41993"
+  ],
+  "5.6.2": ["https://github.com/ant-design/ant-design/issues/43113"],
+  "5.6.3": ["https://github.com/ant-design/ant-design/issues/43190"],
+  "5.7.0": ["https://github.com/ant-design/ant-design/issues/43684"],
+  "5.7.1": [
+    "https://github.com/ant-design/ant-design/issues/43654",
+    "https://github.com/ant-design/ant-design/issues/43684"
+  ],
+  "5.8.0": ["https://github.com/ant-design/ant-design/issues/43943"],
+  "5.9.1": ["https://github.com/ant-design/ant-design/issues/44907"],
+  "5.10.0": ["https://github.com/ant-design/ant-design/issues/45289"],
+  "5.11.0": ["https://github.com/ant-design/ant-design/issues/45742"],
+  "5.11.1": ["https://github.com/ant-design/ant-design/issues/45883"],
+  "5.11.2": ["https://github.com/ant-design/ant-design/issues/46005"],
+  "5.11.4": ["https://github.com/ant-design/ant-design/pull/46103"],
+  "5.12.3": ["https://github.com/ant-design/ant-design/issues/46525"],
+  "5.12.6": ["https://github.com/ant-design/ant-design/issues/46719"],
+  "5.13.0": ["https://github.com/ant-design/ant-design/pull/46962"],
+  "5.14.0": ["https://github.com/ant-design/ant-design/issues/47354"],
+  "5.15.0": ["https://github.com/ant-design/ant-design/pull/47504#issuecomment-1980459433"],
+  ">= 5.16.0 <= 5.16.1": ["https://github.com/ant-design/ant-design/issues/48200"],
+  "5.16.3": ["https://github.com/ant-design/ant-design/issues/48568"],
+  "5.17.1": ["https://github.com/ant-design/ant-design/issues/48913"],
+  "5.18.2": ["https://github.com/ant-design/ant-design/pull/49487"]
+}

src/antd/LICENSE

@@ -0,0 +1,22 @@
+MIT LICENSE
+
+Copyright (c) 2015-present Ant UED, https://xtech.antfin.com/
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

src/antd/README.md

@@ -0,0 +1,184 @@
+<div align="center"><a name="readme-top"></a>
+
+<img height="180" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg">
+
+<h1>Ant Design</h1>
+
+An enterprise-class UI design language and React UI library.
+
+[![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url]
+
+[![][bundlephobia-image]][bundlephobia-url] [![][jsdelivr-image]][jsdelivr-url] [![FOSSA Status][fossa-image]][fossa-url]
+
+[![Follow Twitter][twitter-image]][twitter-url] [![Renovate status][renovate-image]][renovate-dashboard-url] [![][issues-helper-image]][issues-helper-url] [![dumi][dumi-image]][dumi-url] [![Issues need help][help-wanted-image]][help-wanted-url]
+
+[Changelog](./CHANGELOG.en-US.md) · [Report Bug][github-issues-url] · [Request Feature][github-issues-url] · English · [中文](./README-zh_CN.md)
+
+![](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)
+
+[npm-image]: http://img.shields.io/npm/v/antd.svg?style=flat-square
+[npm-url]: http://npmjs.org/package/antd
+[github-action-image]: https://github.com/ant-design/ant-design/workflows/%E2%9C%85%20test/badge.svg
+[github-action-url]: https://github.com/ant-design/ant-design/actions?query=workflow%3A%22%E2%9C%85+test%22
+[codecov-image]: https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square
+[codecov-url]: https://codecov.io/gh/ant-design/ant-design/branch/master
+[download-image]: https://img.shields.io/npm/dm/antd.svg?style=flat-square
+[download-url]: https://npmjs.org/package/antd
+[fossa-image]: https://app.fossa.io/api/projects/git%2Bgithub.com%2Fant-design%2Fant-design.svg?type=shield
+[fossa-url]: https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield
+[help-wanted-image]: https://flat.badgen.net/github/label-issues/ant-design/ant-design/help%20wanted/open
+[help-wanted-url]: https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22
+[twitter-image]: https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design
+[twitter-url]: https://twitter.com/AntDesignUI
+[jsdelivr-image]: https://data.jsdelivr.com/v1/package/npm/antd/badge
+[jsdelivr-url]: https://www.jsdelivr.com/package/npm/antd
+[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/antd?style=flat-square
+[bundlephobia-url]: https://bundlephobia.com/package/antd
+[issues-helper-image]: https://img.shields.io/badge/using-actions--cool-blue?style=flat-square
+[issues-helper-url]: https://github.com/actions-cool
+[renovate-image]: https://img.shields.io/badge/renovate-enabled-brightgreen.svg?style=flat-square
+[renovate-dashboard-url]: https://github.com/ant-design/ant-design/issues/32498
+[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
+[dumi-url]: https://github.com/umijs/dumi
+[github-issues-url]: https://new-issue.ant.design
+
+</div>
+
+[![](https://user-images.githubusercontent.com/507615/209472919-6f7e8561-be8c-4b0b-9976-eb3c692aa20a.png)](https://ant.design)
+
+## ✨ Features
+
+- 🌈 Enterprise-class UI designed for web applications.
+- 📦 A set of high-quality React components out of the box.
+- 🛡 Written in TypeScript with predictable static types.
+- ⚙️ Whole package of design resources and development tools.
+- 🌍 Internationalization support for dozens of languages.
+- 🎨 Powerful theme customization based on CSS-in-JS.
+
+## 🖥 Environment Support
+
+- Modern browsers
+- Server-side Rendering
+- [Electron](https://www.electronjs.org/)
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Electron |
+| --- | --- | --- | --- | --- |
+| Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
+
+## 📦 Install
+
+```bash
+npm install antd
+```
+
+```bash
+yarn add antd
+```
+
+```bash
+pnpm add antd
+```
+
+## 🔨 Usage
+
+```tsx
+import { Button, DatePicker } from 'antd';
+
+export default () => (
+  <>
+    <Button type="primary">PRESS ME</Button>
+    <DatePicker placeholder="select date" />
+  </>
+);
+```
+
+## 🔗 Links
+
+- [Home page](https://ant.design/)
+- [Components Overview](https://ant.design/components/overview)
+- [Ant Design Pro](http://pro.ant.design/)
+- [Change Log](CHANGELOG.en-US.md)
+- [rc-components](http://react-component.github.io/)
+- [Mobile UI](http://mobile.ant.design)
+- [Mini Program UI](http://mini.ant.design)
+- [Ant Design Pro Components](https://procomponents.ant.design)
+- [Ant Design Charts](https://charts.ant.design)
+- [Ant Design Icons](https://github.com/ant-design/ant-design-icons)
+- [Ant Design Colors](https://github.com/ant-design/ant-design-colors)
+- [Landing Pages](https://landing.ant.design)
+- [Motion](https://motion.ant.design)
+- [Scaffold Market](http://scaffold.ant.design)
+- [Developer Instruction](https://github.com/ant-design/ant-design/wiki/Development)
+- [Versioning Release Note](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
+- [FAQ](https://ant.design/docs/react/faq)
+- [Stackblitz Demo](https://u.ant.design/reproduce) for bug reports
+- [Customize Theme](https://ant.design/docs/react/customize-theme)
+- [How to Apply for Being A Collaborator](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator)
+
+## ⌨️ Development
+
+Use Gitpod, a free online dev environment for GitHub.
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/ant-design/ant-design)
+
+Or use opensumi.run, a free online pure front-end dev environment.
+
+[![opensumi.run](https://custom-icon-badges.demolab.com/badge/opensumi-run-blue.svg?logo=opensumi)](https://opensumi.run/ide/ant-design/ant-design)
+
+Or clone locally:
+
+```bash
+$ git clone git@github.com:ant-design/ant-design.git
+$ cd ant-design
+$ npm install
+$ npm start
+```
+
+Open your browser and visit http://127.0.0.1:8001 , see more at [Development](https://github.com/ant-design/ant-design/wiki/Development).
+
+## 🤝 Contributing [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
+
+<table>
+<tr>
+  <td>
+    <a href="https://next.ossinsight.io/widgets/official/compose-recent-top-contributors?repo_id=34526884" target="_blank" style="display: block" align="center">
+      <picture>
+        <source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-recent-top-contributors/thumbnail.png?repo_id=34526884&image_size=auto&color_scheme=dark" width="280">
+        <img alt="Top Contributors of ant-design/ant-design - Last 28 days" src="https://next.ossinsight.io/widgets/official/compose-recent-top-contributors/thumbnail.png?repo_id=34526884&image_size=auto&color_scheme=light" width="280">
+      </picture>
+    </a>
+  </td>
+  <td rowspan="2">
+    <a href="https://next.ossinsight.io/widgets/official/compose-last-28-days-stats?repo_id=34526884" target="_blank" style="display: block" align="center">
+      <picture>
+        <source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-last-28-days-stats/thumbnail.png?repo_id=34526884&image_size=auto&color_scheme=dark" width="655" height="auto">
+        <img alt="Performance Stats of ant-design/ant-design - Last 28 days" src="https://next.ossinsight.io/widgets/official/compose-last-28-days-stats/thumbnail.png?repo_id=34526884&image_size=auto&color_scheme=light" width="655" height="auto">
+      </picture>
+    </a>
+  </td>
+</tr>
+<tr>
+  <td>
+    <a href="https://next.ossinsight.io/widgets/official/compose-org-active-contributors?period=past_28_days&activity=new&owner_id=12101536&repo_ids=34526884" target="_blank" style="display: block" align="center">
+      <picture>
+        <source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?period=past_28_days&activity=new&owner_id=12101536&repo_ids=34526884&image_size=2x3&color_scheme=dark" width="273" height="auto">
+        <img alt="New participants of ant-design - past 28 days" src="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?period=past_28_days&activity=new&owner_id=12101536&repo_ids=34526884&image_size=2x3&color_scheme=light" width="273" height="auto">
+      </picture>
+    </a>
+  </td>
+</tr>
+</table>
+
+Let's build a better antd together.
+
+We warmly invite contributions from everyone. Before you get started, please take a moment to review our [Contributing Guide](https://ant.design/docs/react/contributing). Feel free to share your ideas through [Pull Requests](https://github.com/ant-design/ant-design/pulls) or [GitHub Issues](https://github.com/ant-design/ant-design/issues). If you're interested in enhancing our codebase, explore the [Development Instructions](https://github.com/ant-design/ant-design/wiki/Development) and enjoy your coding journey! :)
+
+For collaborators, adhere to our [Pull Request Principle](https://github.com/ant-design/ant-design/wiki/PR-principle) and utilize our [Pull Request Template](https://github.com/ant-design/ant-design/wiki/PR-principle#pull-request-template) when creating a Pull Request.
+
+[![Let's fund issues in this repository](https://raw.githubusercontent.com/BoostIO/issuehunt-materials/master/v1/issuehunt-button-v1.svg)](https://issuehunt.io/repos/34526884)
+
+## ❤️ Sponsors and Backers [![](https://opencollective.com/ant-design/tiers/sponsors/badge.svg?label=Sponsors&color=brightgreen)](https://opencollective.com/ant-design#support) [![](https://opencollective.com/ant-design/tiers/backers/badge.svg?label=Backers&color=brightgreen)](https://opencollective.com/ant-design#support)
+
+[![](https://opencollective.com/ant-design/tiers/sponsors.svg?avatarHeight=36)](https://opencollective.com/ant-design#support)
+
+[![](https://opencollective.com/ant-design/tiers/backers.svg?avatarHeight=36)](https://opencollective.com/ant-design#support)