diff --git a/.env b/.env new file mode 100644 index 000000000..7d910f148 --- /dev/null +++ b/.env @@ -0,0 +1 @@ +SKIP_PREFLIGHT_CHECK=true \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index cc5ab3612..031b18b17 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2558,6 +2558,11 @@ "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz", "integrity": "sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=" }, + "bulma": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.7.5.tgz", + "integrity": "sha512-cX98TIn0I6sKba/DhW0FBjtaDpxTelU166pf7ICXpCCuplHWyu6C9LYZmL5PEsnePIeJaiorsTEzzNk3Tsm1hw==" + }, "bytes": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz", @@ -12868,14 +12873,13 @@ } }, "react": { - "version": "16.8.1", - "resolved": "https://registry.npmjs.org/react/-/react-16.8.1.tgz", - "integrity": "sha512-wLw5CFGPdo7p/AgteFz7GblI2JPOos0+biSoxf1FPsGxWQZdN/pj6oToJs1crn61DL3Ln7mN86uZ4j74p31ELQ==", + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react/-/react-16.13.1.tgz", + "integrity": "sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", - "prop-types": "^15.6.2", - "scheduler": "^0.13.1" + "prop-types": "^15.6.2" } }, "react-app-polyfill": { @@ -12957,14 +12961,14 @@ } }, "react-dom": { - "version": "16.8.1", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.1.tgz", - "integrity": "sha512-N74IZUrPt6UiDjXaO7UbDDFXeUXnVhZzeRLy/6iqqN1ipfjrhR60Bp5NuBK+rv3GMdqdIuwIl22u1SYwf330bg==", + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz", + "integrity": "sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", "prop-types": "^15.6.2", - "scheduler": "^0.13.1" + "scheduler": "^0.19.1" } }, "react-error-overlay": { @@ -14095,9 +14099,9 @@ "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==" }, "scheduler": { - "version": "0.13.1", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.1.tgz", - "integrity": "sha512-VJKOkiKIN2/6NOoexuypwSrybx13MY7NSy9RNt8wPvZDMRT1CW6qlpF5jXRToXNHz3uWzbm2elNpZfXfGPqP9A==", + "version": "0.19.1", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz", + "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1" diff --git a/package.json b/package.json index 35c988ded..8cc99b61e 100644 --- a/package.json +++ b/package.json @@ -3,8 +3,9 @@ "version": "0.1.0", "private": true, "dependencies": { - "react": "^16.8.1", - "react-dom": "^16.8.1", + "bulma": "^0.7.5", + "react": "^16.13.1", + "react-dom": "^16.13.1", "react-scripts": "2.1.5" }, "scripts": { diff --git a/src/App.js b/src/App.js index 7e261ca47..1e03e4e68 100755 --- a/src/App.js +++ b/src/App.js @@ -1,25 +1,59 @@ -import React, { Component } from 'react'; -import logo from './logo.svg'; -import './App.css'; +import React, { Component } from "react"; +import "./App.css"; +import foods from "./data/foods.json"; +import Foodbox from "./components/FoodBox"; +import AddFood from "./components/AddFood"; +import Search from "./components/Search"; class App extends Component { + constructor() { + super(); + this.state = { foods: foods, visibilityForm: false }; + } + + newFood = food => { + const { foods } = this.state; + const newFoods = [...foods, food]; + + this.setState( + { + foods: newFoods + }, + () => console.log(this.state) + ); + }; + + handleVisibilityForm = () => { + this.setState({ + visibilityForm: !this.state.visibilityForm + }); + }; + + search = item => { + const foundFood = foods.filter(food => { + return food.name.toLowerCase().search(item) !== -1; + }); + this.setState({ + foods: [...foundFood] + }); + }; + render() { + // console.log(foods); + const { foods, visibilityForm } = this.state; return ( -
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
+
+ + + {visibilityForm && ( + + )} + {foods.map((food, index) => { + return ; + })}
); } diff --git a/src/components/AddFood.js b/src/components/AddFood.js new file mode 100644 index 000000000..3c75a2c78 --- /dev/null +++ b/src/components/AddFood.js @@ -0,0 +1,61 @@ +import React, { Component } from "react"; + +class AddFood extends Component { + constructor(props) { + super(props); + this.state = { name: "", calories: 0, image: "", quantity: 1 }; + } + + handleChange = event => { + this.setState( + { + [event.target.name]: + event.target.type === "number" + ? parseInt(event.target.value) + : event.target.value + }, + () => console.log(this.state) + ); + }; + + handleSubmit = event => { + event.preventDefault(); + const { newFood, visibility } = this.props; + newFood(this.state); + this.setState({ name: "", calories: 0, image: "", quantity: 1 }, () => + visibility() + ); + }; + + render() { + return ( +
+
New food:
+ + + + + + + +
+ ); + } +} + +export default AddFood; diff --git a/src/components/FoodBox.css b/src/components/FoodBox.css new file mode 100644 index 000000000..e3d165190 --- /dev/null +++ b/src/components/FoodBox.css @@ -0,0 +1,46 @@ +.container { + max-width: 900px; + margin-top: 30px; +} + +.search-bar { + margin-bottom: 30px; +} + +.box { + padding: 0; + max-width: 400px; +} + +.box .media { + -ms-flex-align: center; + align-items: center; +} + +.box img { + height: 100%; + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; +} + +.box input { + width: 100px; + text-align: center; + border: 0px white; + -webkit-box-shadow: inset 0 1px 2px white; + box-shadow: inset 0 1px 2px white; +} + +.box .button { + width: 64px; + font-size: 1.3em; +} + +.box input, +.box .button { + height: 64px; +} + +ul { + margin-bottom: 10px; +} diff --git a/src/components/FoodBox.js b/src/components/FoodBox.js new file mode 100644 index 000000000..5a9b7761a --- /dev/null +++ b/src/components/FoodBox.js @@ -0,0 +1,39 @@ +import React, { Component } from "react"; +import "./FoodBox.css"; + +class FoodBox extends Component { + render() { + const { name, calories, image } = this.props; + return ( +
+
+
+
+ pic +
+
+
+
+

+ {name}
+ {calories} +

+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ ); + } +} + +export default FoodBox; diff --git a/src/components/Search.css b/src/components/Search.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/Search.js b/src/components/Search.js new file mode 100644 index 000000000..7e63dc140 --- /dev/null +++ b/src/components/Search.js @@ -0,0 +1,18 @@ +import React, { Component } from "react"; +import "./Search.css"; + +class Search extends Component { + handleChange = event => { + this.props.search(event.target.value); + }; + + render() { + return ( +
+ +
+ ); + } +} + +export default Search; diff --git a/src/index.js b/src/index.js index 0c5e75da1..0e74af8ca 100755 --- a/src/index.js +++ b/src/index.js @@ -1,10 +1,11 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import './index.css'; -import App from './App'; -import * as serviceWorker from './serviceWorker'; +import React from "react"; +import ReactDOM from "react-dom"; +import "./index.css"; +import App from "./App"; +import * as serviceWorker from "./serviceWorker"; +import "bulma/css/bulma.css"; -ReactDOM.render(, document.getElementById('root')); +ReactDOM.render(, document.getElementById("root")); // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls.