From 25d86ffd456b4cb8dbb7072a4e28336b9e41bedf Mon Sep 17 00:00:00 2001 From: Tash Tenner Date: Fri, 11 Oct 2019 20:46:40 +0200 Subject: [PATCH 1/4] working on it --- .env | 1 + package-lock.json | 5 ++++ package.json | 1 + src/App.js | 35 +++++++++++++------------ src/components/AddFood.js | 52 ++++++++++++++++++++++++++++++++++++++ src/components/FoodBox.css | 46 +++++++++++++++++++++++++++++++++ src/components/FoodBox.js | 39 ++++++++++++++++++++++++++++ src/index.js | 13 +++++----- 8 files changed, 168 insertions(+), 24 deletions(-) create mode 100644 .env create mode 100644 src/components/AddFood.js create mode 100644 src/components/FoodBox.css create mode 100644 src/components/FoodBox.js 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..aca693cd0 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", diff --git a/package.json b/package.json index 35c988ded..7db0418e1 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { + "bulma": "^0.7.5", "react": "^16.8.1", "react-dom": "^16.8.1", "react-scripts": "2.1.5" diff --git a/src/App.js b/src/App.js index 7e261ca47..9d734a16a 100755 --- a/src/App.js +++ b/src/App.js @@ -1,25 +1,24 @@ -import React, { Component } from 'react'; -import logo from './logo.svg'; -import './App.css'; +import React, { Component } from "react"; +// import logo from "./logo.svg"; +import "./App.css"; +import foods from "./data/foods.json"; +import Foodbox from "./components/FoodBox"; +import AddFood from "./components/AddFood"; class App extends Component { + // constructor() { + // super(); + // this.state = foods; + // } + render() { + // console.log(foods); return ( -
-
- logo -

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

- - Learn React - -
+
+ + {foods.map((food, index) => { + return ; + })}
); } diff --git a/src/components/AddFood.js b/src/components/AddFood.js new file mode 100644 index 000000000..4bb5a28d5 --- /dev/null +++ b/src/components/AddFood.js @@ -0,0 +1,52 @@ +import React, { Component } from "react"; + +class AddFood extends React.Component { + constructor(props) { + super(props); + this.state = { value: "" }; + + this.handleChange = this.handleChange.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); + } + + handleChange(event) { + this.setState({ value: event.target.value }); + } + + handleSubmit(event) { + alert("A name was submitted: " + this.state.value); + event.preventDefault(); + } + + 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..2e20ac8fb --- /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, quantity } = this.props; + return ( +
+
+
+
+ pic +
+
+
+
+

+ {name}
+ {calories} +

+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ ); + } +} + +export default FoodBox; 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. From a220f457d531d60ef2ef34a6d4daee87da0a9a09 Mon Sep 17 00:00:00 2001 From: Tash Tenner Date: Sun, 13 Oct 2019 18:08:01 +0200 Subject: [PATCH 2/4] iteration 3 done --- src/App.js | 35 ++++++++++++++++++++++++++++++----- src/components/AddFood.js | 37 +++++++++++++++++++++++-------------- src/components/FoodBox.js | 2 +- 3 files changed, 54 insertions(+), 20 deletions(-) diff --git a/src/App.js b/src/App.js index 9d734a16a..1a2d0e14e 100755 --- a/src/App.js +++ b/src/App.js @@ -6,16 +6,41 @@ import Foodbox from "./components/FoodBox"; import AddFood from "./components/AddFood"; class App extends Component { - // constructor() { - // super(); - // this.state = foods; - // } + 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 + }); + }; render() { // console.log(foods); + const { foods, visibilityForm } = this.state; return (
- + + {visibilityForm && ( + + )} {foods.map((food, index) => { return ; })} diff --git a/src/components/AddFood.js b/src/components/AddFood.js index 4bb5a28d5..3c75a2c78 100644 --- a/src/components/AddFood.js +++ b/src/components/AddFood.js @@ -1,22 +1,31 @@ import React, { Component } from "react"; -class AddFood extends React.Component { +class AddFood extends Component { constructor(props) { super(props); - this.state = { value: "" }; - - this.handleChange = this.handleChange.bind(this); - this.handleSubmit = this.handleSubmit.bind(this); + this.state = { name: "", calories: 0, image: "", quantity: 1 }; } - handleChange(event) { - this.setState({ value: event.target.value }); - } + handleChange = event => { + this.setState( + { + [event.target.name]: + event.target.type === "number" + ? parseInt(event.target.value) + : event.target.value + }, + () => console.log(this.state) + ); + }; - handleSubmit(event) { - alert("A name was submitted: " + this.state.value); + handleSubmit = event => { event.preventDefault(); - } + const { newFood, visibility } = this.props; + newFood(this.state); + this.setState({ name: "", calories: 0, image: "", quantity: 1 }, () => + visibility() + ); + }; render() { return ( @@ -26,21 +35,21 @@ class AddFood extends React.Component { diff --git a/src/components/FoodBox.js b/src/components/FoodBox.js index 2e20ac8fb..5a9b7761a 100644 --- a/src/components/FoodBox.js +++ b/src/components/FoodBox.js @@ -3,7 +3,7 @@ import "./FoodBox.css"; class FoodBox extends Component { render() { - const { name, calories, image, quantity } = this.props; + const { name, calories, image } = this.props; return (
From 3b1e66557275ac66b8489277224f213c5c3228d2 Mon Sep 17 00:00:00 2001 From: Tash Tenner Date: Fri, 18 Oct 2019 23:12:35 +0200 Subject: [PATCH 3/4] search done --- src/App.js | 12 +++++++++++- src/components/Search.css | 0 src/components/Search.js | 18 ++++++++++++++++++ 3 files changed, 29 insertions(+), 1 deletion(-) create mode 100644 src/components/Search.css create mode 100644 src/components/Search.js diff --git a/src/App.js b/src/App.js index 1a2d0e14e..1e03e4e68 100755 --- a/src/App.js +++ b/src/App.js @@ -1,9 +1,9 @@ import React, { Component } from "react"; -// import logo from "./logo.svg"; 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() { @@ -29,11 +29,21 @@ class App extends Component { }); }; + 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 (
+ {visibilityForm && ( { + this.props.search(event.target.value); + }; + + render() { + return ( +
+ +
+ ); + } +} + +export default Search; From c252caddeae4ee08e6167534ad1cbb0345c9ab1e Mon Sep 17 00:00:00 2001 From: Tash Tenner Date: Mon, 20 Apr 2020 15:48:48 +0200 Subject: [PATCH 4/4] update npm packages --- package-lock.json | 23 +++++++++++------------ package.json | 4 ++-- 2 files changed, 13 insertions(+), 14 deletions(-) diff --git a/package-lock.json b/package-lock.json index aca693cd0..031b18b17 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12873,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": { @@ -12962,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": { @@ -14100,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 7db0418e1..8cc99b61e 100644 --- a/package.json +++ b/package.json @@ -4,8 +4,8 @@ "private": true, "dependencies": { "bulma": "^0.7.5", - "react": "^16.8.1", - "react-dom": "^16.8.1", + "react": "^16.13.1", + "react-dom": "^16.13.1", "react-scripts": "2.1.5" }, "scripts": {