ironhackbcn · JdeJ · Mar 25, 2019
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,9 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "bulma": "^0.7.4",
     "react": "^16.8.1",
     "react-dom": "^16.8.1",
-    "react-scripts": "2.1.5"
+    "react-scripts": "^2.1.8"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/public/index.html b/public/index.html
@@ -23,6 +23,54 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>React App</title>
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
+    <style type="text/css">
+      .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;
+      }
+    </style>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.js b/src/App.js
@@ -1,25 +1,100 @@
 import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
+import 'bulma/css/bulma.css';
+import allFoods from './data/foods.json';
+import FoodBox from './component/foodBox';
+import AddFood from './component/addFood';
+import SearchFood from './component/search';
+import TodayList from './component/todayList';
 
 class App extends Component {
+
+  state = {
+    showForm: false,
+    foods: allFoods,
+    selected: [],
+  }
+
+  showForm = ()=> {
+    this.setState({
+      showForm: true,
+    });
+  }
+
+  hideForm = () => {
+    this.setState({
+      showForm: false,
+    });
+  }
+
+  newFood = (food) => {
+    this.setState({
+      foods: [...this.state.foods, food],
+    });
+    this.hideForm();
+  }
+
+  searchFood = (query) => {
+    const filteredFoods = allFoods.filter((food) => {
+        return food.name.toLowerCase().indexOf(query.toLowerCase()) > -1;
+    })
+    this.setState({
+      foods: [...filteredFoods],
+    });
+  }
+
+  addFoodToList = (food) => {
+    this.setState({
+      selected: this.sumDuplicates(this.state.selected, food),
+    });
+  }
+
+  sumDuplicates = (arr, food) => {
+
+    let result = arr;
+
+    const index = arr.findIndex((element)=>{
+      return element.name === food.name;
+    });
+
+    if (index > -1){
+      result[index].quantity = parseInt(result[index].quantity) + parseInt(food.quantity);
+      result[index].calories = parseInt(result[index].calories) + parseInt(food.calories);
+    } else {
+      result.push(food);
+    }
+
+    return result;
+
+  }
+
+  removeSelected = (index) => {
+    this.state.selected.splice(index,1);
+    this.setState({
+      selected: this.state.selected,
+    });
+  }
+
   render() {
     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 className="App container">
+        <h1 className="title">IronNutrition</h1>
+        <SearchFood search={this.searchFood}/>
+        <div className="column">
+          <button onClick={this.showForm}>Add food</button>
+        </div>
+        {
+          this.state.showForm && <AddFood new={this.newFood}/>
+        }
+        <div className="columns">
+          <div className="column">
+            {this.state.foods.map((element, index) => {
+              return <FoodBox key={index} index={index} food={element} addToList={this.addFoodToList}/>
+            })}
+          </div>
+          <TodayList select={this.state.selected} remove={this.removeSelected}/>
+        </div>
       </div>
     );
   }

diff --git a/src/component/addFood.js b/src/component/addFood.js
@@ -0,0 +1,39 @@
+import React, { Component } from 'react'
+
+export default class addFood extends Component {
+
+  state = {
+    name: '',
+    calories: '',
+    image: '',
+    quantity: '',
+  };
+
+  handleAdd = (e) => {
+    this.props.new(this.state);
+  }
+
+  handleChange = (e) => {
+    const { name, value } = e.target;
+    this.setState({
+      [name]: value,
+    });
+  }
+
+  render() {
+    return (
+      <div className="column">
+        <h2>New food</h2>
+        <label>Name: </label>
+        <input name="name" onChange={this.handleChange}></input>
+        <label>Calories: </label>
+        <input name="calories" onChange={this.handleChange}></input>
+        <label>Image: </label>
+        <input name="image" onChange={this.handleChange}></input>
+        <label>Quantity: </label>
+        <input name="quantity" onChange={this.handleChange}></input>
+        <button onClick={this.handleAdd}>Add</button>
+      </div>
+    )
+  }
+}
diff --git a/src/component/foodBox.js b/src/component/foodBox.js
@@ -0,0 +1,66 @@
+import React, { Component } from 'react'
+
+export default class foodBox extends Component {
+
+  state = {
+    quantity: this.props.food.quantity,
+  }
+
+  handleChange = (e) => {
+    const { name, value } = e.target;
+    if (value >= 0){
+      this.setState({
+        [name]: value,
+      });
+    }
+  }
+
+  handleClick = (e) => {
+    if (this.state.quantity > 0){
+      const auxFood = Object.assign({}, this.props.food);
+      auxFood.quantity = this.state.quantity;
+      auxFood.calories = auxFood.quantity * auxFood.calories;
+      this.props.addToList(auxFood); 
+    } 
+  }
+
+  render() {
+    return (
+      <div className="box">
+        <article className="media">
+          <div className="media-left">
+            <figure className="image is-64x64">
+              <img src={this.props.food.image} />
+            </figure>
+          </div>
+          <div className="media-content">
+            <div className="content">
+              <p>
+                <strong>{this.props.food.name}</strong> <br />
+                <small>{this.props.food.calories}</small>
+              </p>
+            </div>
+          </div>
+          <div className="media-right">
+            <div className="field has-addons">
+              <div className="control">
+                <input
+                  className="input"
+                  type="number"
+                  name='quantity' 
+                  value={this.state.quantity}
+                  onChange={this.handleChange}
+                />
+              </div>
+              <div className="control">
+                <button className="button is-info" onClick={this.handleClick} >
+                  +
+                </button>
+              </div>
+            </div>
+          </div>
+        </article>
+      </div>
+    )
+  }
+}
diff --git a/src/component/search.js b/src/component/search.js
@@ -0,0 +1,20 @@
+import React, { Component } from 'react'
+
+export default class search extends Component {
+
+  state = {
+    search: '',
+  }
+
+  handleChange = (e) => {
+    this.props.search(e.target.value);
+  }
+
+  render() {
+    return (
+      <div>
+        <input name="search" className="input search-bar" onChange={this.handleChange} placeholder="Search"></input>
+      </div>
+    )
+  }
+}
diff --git a/src/component/todayItem.js b/src/component/todayItem.js
@@ -0,0 +1,16 @@
+import React, { Component } from 'react'
+
+export default class todayItem extends Component {
+  render() {
+    return (
+      <li className="columns">
+      <div className="column">
+        {this.props.food.quantity} {this.props.food.name} = {this.props.food.calories} cal
+      </div>
+      <div className="column">
+        <button onClick={()=>{ this.props.delete(this.props.index) }}><i className="fas fa-trash"></i></button>
+      </div>
+      </li>
+    )
+  }
+}
diff --git a/src/component/todayList.js b/src/component/todayList.js
@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import TodayItem from './todayItem';
+
+export default class todayList extends Component {
+
+  calcCalories = () => {
+    return this.props.select.reduce((sum, food) => { return sum + food.calories; }, 0);
+  }
+
+  render() {
+    return (
+      <div className="column content">
+        <h2 className="subtitle">Today's foods</h2>
+        <ul>
+          {this.props.select.map((element, index) => {
+            return <TodayItem key={index} index={index} food={element} delete={this.props.remove}/>
+          })}          
+        </ul>
+        <strong>Total: {this.calcCalories()} cal</strong>
+      </div>
+    )
+  }
+}