From fe29e6aa7bf1294c0289875ab90013b56cda6039 Mon Sep 17 00:00:00 2001 From: Guillem Moreso Date: Tue, 8 Oct 2019 18:47:51 +0200 Subject: [PATCH 1/4] iteration 5 in progress --- package-lock.json | 5 ++ package.json | 1 + src/App.css | 59 +++++++++++++-------- src/App.js | 91 ++++++++++++++++++++++++++------ src/components/AddNewFood.js | 91 ++++++++++++++++++++++++++++++++ src/components/FoodBox.css | 46 ++++++++++++++++ src/components/FoodBox.js | 45 ++++++++++++++++ src/components/SearchBar.js | 23 ++++++++ src/components/TodaysFoodList.js | 16 ++++++ 9 files changed, 338 insertions(+), 39 deletions(-) create mode 100644 src/components/AddNewFood.js create mode 100644 src/components/FoodBox.css create mode 100644 src/components/FoodBox.js create mode 100644 src/components/SearchBar.js create mode 100644 src/components/TodaysFoodList.js 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.css b/src/App.css index b41d297ca..e3d165190 100755 --- a/src/App.css +++ b/src/App.css @@ -1,33 +1,46 @@ -.App { - text-align: center; +.container { + max-width: 900px; + margin-top: 30px; +} + +.search-bar { + margin-bottom: 30px; } -.App-logo { - animation: App-logo-spin infinite 20s linear; - height: 40vmin; - pointer-events: none; +.box { + padding: 0; + max-width: 400px; } -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; +.box .media { + -ms-flex-align: center; align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; } -.App-link { - color: #61dafb; +.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; } -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } +ul { + margin-bottom: 10px; } diff --git a/src/App.js b/src/App.js index 7e261ca47..7a0f38e7e 100755 --- a/src/App.js +++ b/src/App.js @@ -1,25 +1,84 @@ 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 AddNewFood from './components/AddNewFood'; +import SearchBar from './components/SearchBar'; +import TodaysFoodList from './components/TodaysFoodList'; class App extends Component { + constructor(props) { + super(props); + + this.state = { + foods: foods, + showForm: false, + todaysFoodList: [], + }; + } + + /*ITERATION 3 FUNCTIONS*/ + showForm = () => { + this.setState({ + showForm: true, + }); + }; + + hideForm = () => { + this.setState({ + showForm: false, + }); + }; + + AddNewFood = food => { + this.setState({ + foods: [...this.state.foods, food], + }); + this.hideForm(); + }; + + /*ITERATION 4 FUNCTION*/ + searchBar = query => { + const searchedFoods = foods.filter(food => { + return food.name.toLowerCase().search(query.toLowerCase()) !== -1; + }); + this.setState({ + foods: [...searchedFoods], + }); + }; + + /*ITERATION 5 FUNCTION*/ + addFoodToList = food => { + this.state.foods.push(food, 1); + this.setState({ + todaysFoodList: [...this.state.todaysFoodList, food], + }); + console.log('iteration 5'); + }; + render() { return ( -
-
- logo -

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

- - Learn React - -
+
+

List of Foods

+ +
+ + {this.state.showForm && } +
+ {this.state.foods.map((food, index) => { + return ( + + ); + })} +
+
); } diff --git a/src/components/AddNewFood.js b/src/components/AddNewFood.js new file mode 100644 index 000000000..9fb160853 --- /dev/null +++ b/src/components/AddNewFood.js @@ -0,0 +1,91 @@ +import React, { Component } from 'react'; + +export default class AddNewFood extends Component { + constructor(props) { + super(props); + + this.state = { + name: '', + calories: '', + image: '', + quantity: '', + }; + } + + handleNameInput = e => { + this.setState({ + name: e.target.value, + }); + }; + + handleCaloriesInput = e => { + this.setState({ + calories: e.target.value, + }); + }; + + handleImageInput = e => { + this.setState({ + image: e.target.value, + }); + }; + + handleQuantityInput = e => { + this.setState({ + quantity: e.target.value, + }); + }; + + handleFormSubmit = e => { + e.preventDefault(); + this.props.addNew(this.state); + this.setState({ + name: '', + calories: '', + quantity: '', + image: '', + }); + }; + + render() { + return ( +
+
+ + this.handleNameInput(e)} + /> +
+ + this.handleCaloriesInput(e)} + /> +
+ + this.handleQuantityInput(e)} + /> +
+ + this.handleImageInput(e)} + /> +
+ +
+
+ ); + } +} 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..d4af88d83 --- /dev/null +++ b/src/components/FoodBox.js @@ -0,0 +1,45 @@ +import React, { Component } from 'react'; +import './FoodBox.css'; + +export default class FoodBox extends Component { + render() { + const { name, calories, image, quantity, todaysFoodList } = this.props; + + return ( +
+
+
+
+ +
+
+
+
+

+ {name}
+ {calories} +

+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ ); + } +} diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js new file mode 100644 index 000000000..226f111f8 --- /dev/null +++ b/src/components/SearchBar.js @@ -0,0 +1,23 @@ +import React, { Component } from 'react'; + +export default class SearchBar extends Component { + state = { + searchBar: '', + }; + + handleChange = e => { + this.props.searchBar(e.target.value); + }; + + render() { + return ( +
+ +
+ ); + } +} diff --git a/src/components/TodaysFoodList.js b/src/components/TodaysFoodList.js new file mode 100644 index 000000000..dcbe5620c --- /dev/null +++ b/src/components/TodaysFoodList.js @@ -0,0 +1,16 @@ +import React, { Component } from 'react'; + +export default class TodaysFoodList extends Component { + render() { + const { name, calories, image, quantity } = this.props; + + return ( +
+

Today's foods

+
    +
  • {name}
    • +
+
+ ); + } +} From 613740124660f754f7c0c14ea27aed305bbeabd7 Mon Sep 17 00:00:00 2001 From: Guillem Moreso Date: Tue, 8 Oct 2019 20:46:51 +0200 Subject: [PATCH 2/4] Feedback TAs Solved --- src/App.js | 6 +++--- src/components/AddNewFood.js | 8 ++++---- src/components/SearchBar.js | 4 ---- src/components/TodaysFoodList.js | 2 +- src/index.js | 1 + 5 files changed, 9 insertions(+), 12 deletions(-) diff --git a/src/App.js b/src/App.js index 7a0f38e7e..24e631046 100755 --- a/src/App.js +++ b/src/App.js @@ -30,7 +30,7 @@ class App extends Component { }); }; - AddNewFood = food => { + addNewFood = food => { this.setState({ foods: [...this.state.foods, food], }); @@ -49,7 +49,7 @@ class App extends Component { /*ITERATION 5 FUNCTION*/ addFoodToList = food => { - this.state.foods.push(food, 1); + this.state.foods.push(food); this.setState({ todaysFoodList: [...this.state.todaysFoodList, food], }); @@ -65,7 +65,7 @@ class App extends Component { - {this.state.showForm && } + {this.state.showForm && }
{this.state.foods.map((food, index) => { return ( diff --git a/src/components/AddNewFood.js b/src/components/AddNewFood.js index 9fb160853..a129895ac 100644 --- a/src/components/AddNewFood.js +++ b/src/components/AddNewFood.js @@ -56,7 +56,7 @@ export default class AddNewFood extends Component { type="text" name="name" value={this.state.name} - onChange={e => this.handleNameInput(e)} + onChange={this.handleNameInput} />
@@ -64,7 +64,7 @@ export default class AddNewFood extends Component { type="text" name="calories" value={this.state.calories} - onChange={e => this.handleCaloriesInput(e)} + onChange={this.handleCaloriesInput} />
@@ -72,7 +72,7 @@ export default class AddNewFood extends Component { type="text" name="quantity" value={this.state.quantity} - onChange={e => this.handleQuantityInput(e)} + onChange={this.handleQuantityInput} />
@@ -80,7 +80,7 @@ export default class AddNewFood extends Component { type="text" name="image" value={this.state.image} - onChange={e => this.handleImageInput(e)} + onChange={this.handleImageInput} />
diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js index 226f111f8..e20046942 100644 --- a/src/components/SearchBar.js +++ b/src/components/SearchBar.js @@ -1,10 +1,6 @@ import React, { Component } from 'react'; export default class SearchBar extends Component { - state = { - searchBar: '', - }; - handleChange = e => { this.props.searchBar(e.target.value); }; diff --git a/src/components/TodaysFoodList.js b/src/components/TodaysFoodList.js index dcbe5620c..09d9bc717 100644 --- a/src/components/TodaysFoodList.js +++ b/src/components/TodaysFoodList.js @@ -6,7 +6,7 @@ export default class TodaysFoodList extends Component { return (
-

Today's foods

+

Todays foods

diff --git a/src/index.js b/src/index.js index 0c5e75da1..c2c9c4b2d 100755 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; +import 'bulma/css/bulma.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; From 915f59a95e875f214f2f01c7b87fc263a3caf423 Mon Sep 17 00:00:00 2001 From: Guillem Moreso Date: Thu, 10 Oct 2019 12:40:17 +0200 Subject: [PATCH 3/4] Iteration 5 done --- src/App.js | 6 +++--- src/components/FoodBox.js | 27 +++++++++++++++++++++++---- src/components/TodaysFoodItem.js | 15 +++++++++++++++ src/components/TodaysFoodList.js | 17 +++++++++++++---- 4 files changed, 54 insertions(+), 11 deletions(-) create mode 100644 src/components/TodaysFoodItem.js diff --git a/src/App.js b/src/App.js index 24e631046..a4d4df891 100755 --- a/src/App.js +++ b/src/App.js @@ -49,11 +49,9 @@ class App extends Component { /*ITERATION 5 FUNCTION*/ addFoodToList = food => { - this.state.foods.push(food); this.setState({ todaysFoodList: [...this.state.todaysFoodList, food], }); - console.log('iteration 5'); }; render() { @@ -74,11 +72,13 @@ class App extends Component { name={food.name} image={food.image} calories={food.calories} + food={food} + addToList={this.addFoodToList} /> ); })}
- +
); } diff --git a/src/components/FoodBox.js b/src/components/FoodBox.js index d4af88d83..0f13917b7 100644 --- a/src/components/FoodBox.js +++ b/src/components/FoodBox.js @@ -2,8 +2,27 @@ import React, { Component } from 'react'; import './FoodBox.css'; export default class FoodBox extends Component { + constructor(props) { + super(props); + + this.state = { + quantity: this.props.quantity, + }; + } + + handleChange = e => { + this.setState({ + quantity: e.target.value, + }); + }; + + handleClick = e => { + const AddedFood = Object.assign({}, this.props.food); + this.props.addToList(AddedFood); + }; + render() { - const { name, calories, image, quantity, todaysFoodList } = this.props; + const { name, calories, image } = this.props; return (
@@ -27,12 +46,12 @@ export default class FoodBox extends Component {
-
diff --git a/src/components/TodaysFoodItem.js b/src/components/TodaysFoodItem.js new file mode 100644 index 000000000..462ae8ff2 --- /dev/null +++ b/src/components/TodaysFoodItem.js @@ -0,0 +1,15 @@ +import React, { Component } from 'react'; + +export default class TodaysFoodItem extends Component { + render() { + const { name, calories, quantity } = this.props; + return ( +
  • +
    + {quantity} {name} = {calories} cal +
    +
    +
    • + ); + } +} diff --git a/src/components/TodaysFoodList.js b/src/components/TodaysFoodList.js index 09d9bc717..5ef990ee4 100644 --- a/src/components/TodaysFoodList.js +++ b/src/components/TodaysFoodList.js @@ -1,14 +1,23 @@ import React, { Component } from 'react'; +import TodaysFoodItem from './TodaysFoodItem'; export default class TodaysFoodList extends Component { render() { - const { name, calories, image, quantity } = this.props; - return (
    -

    Todays foods

    +

    Today's foods

    ); From 904bd50aa73be8665f31f15739fd3b343ae9136b Mon Sep 17 00:00:00 2001 From: Guillem Moreso Date: Thu, 10 Oct 2019 12:54:57 +0200 Subject: [PATCH 4/4] Remove done --- src/App.js | 12 +++++++++++- src/components/TodaysFoodItem.js | 10 ++++++++-- src/components/TodaysFoodList.js | 1 + 3 files changed, 20 insertions(+), 3 deletions(-) diff --git a/src/App.js b/src/App.js index a4d4df891..090f9cd7e 100755 --- a/src/App.js +++ b/src/App.js @@ -54,6 +54,13 @@ class App extends Component { }); }; + /*ITERATION 7 FUNCTION*/ + removeFoodItem = foodIndex => { + this.state.todaysFoodList.splice(foodIndex, 1); + this.setState({ + todaysFoodList: this.state.todaysFoodList, + }); + }; render() { return (
    @@ -78,7 +85,10 @@ class App extends Component { ); })}
    - +
    ); } diff --git a/src/components/TodaysFoodItem.js b/src/components/TodaysFoodItem.js index 462ae8ff2..91ad48f2f 100644 --- a/src/components/TodaysFoodItem.js +++ b/src/components/TodaysFoodItem.js @@ -6,9 +6,15 @@ export default class TodaysFoodItem extends Component { return (
  • - {quantity} {name} = {calories} cal + {quantity} {name} = {calories} cal +
    -
    • ); } diff --git a/src/components/TodaysFoodList.js b/src/components/TodaysFoodList.js index 5ef990ee4..9393f445f 100644 --- a/src/components/TodaysFoodList.js +++ b/src/components/TodaysFoodList.js @@ -15,6 +15,7 @@ export default class TodaysFoodList extends Component { image={food.image} calories={food.calories} food={food} + delete={this.props.removeFoodItem} /> ); })}