BCN-FT-Sergio-Carlos

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"

src/App.css

@@ -31,3 +31,7 @@
     transform: rotate(360deg);
   }
 }
+
+form{
+  display: none;
+}

src/App.js

@@ -1,25 +1,143 @@
 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 Search from './components/Search';
 
 class App extends Component {
+  state = {
+    name: '',
+    calories: '',
+    image: '',
+    quantity: '0',
+    foods,
+    display: 'none',
+    valueGuai: '',
+    foodsToday: [],
+    totalCalories: '0'
+  }
+
+  handleInputChange = (event) => {
+    const {name, value} = event.target;
+    this.setState({
+      [name]: value 
+    })
+  }
+
+  addFood = (event) => {
+    const {display} = this.state;
+    // event.preventDefault();
+    const newDisplay = (display === 'block') ? 'none' : 'block';
+    this.setState({
+      display: newDisplay
+    })
+  }
+
+  handleSubmit = (event) => {
+    event.preventDefault();
+    const {name, calories, image, quantity, foods} = this.state;
+    const newFoods = [...foods];
+    const newFood = {name, calories, image, quantity}; 
+    newFoods.push(newFood);
+
+    this.setState({
+      foods: newFoods,
+      name:'',
+      calories: '',
+      image:''
+    })
+    this.addFood();    
+  }
+
+  compareValue = (newValue) => {
+    this.setState({
+      valueGuai: newValue
+    })
+  }
+
+  addTodaysFood = (newTodayFood) => {
+    const {foodsToday} = this.state;
+    const newFoodsToday = [...foodsToday];
+    newFoodsToday.push(newTodayFood);
+    const newTotalCalories = newTodayFood.newValue * newTodayFood.calories;
+    this.setState({
+      name: newTodayFood.name,
+      calories: newTodayFood.calories,
+      quantity: newTodayFood.newValue,
+      foodsToday: newFoodsToday,
+      totalCalories: newTotalCalories
+    })
+  }
+
+
   render() {
+    const {name, calories, image, foods, display, valueGuai, totalCalories} = this.state;
     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>
+        <button onClick={this.addFood}>Add food</button>
+        <Search getvalue={this.compareValue}/>
+        <form onSubmit={this.handleSubmit} style={{display}}>
+          <label htmlFor="name">Name</label>
+          <input 
+            type="text"
+            name="name"
+            id="name"
+            placeholder="name"
+            value={name}
+            onChange={this.handleInputChange}
+          />
+
+          <label htmlFor="calories">Calories</label>
+          <input type="number"
+            name="calories"
+            id="calories"
+            placeholder="0"
+            value={calories}
+            onChange={this.handleInputChange}
+          />
+
+          <label htmlFor="image">image</label>
+          <input
+            type="text"
+            name="image"
+            id="image"
+            value={image}
+            onChange={this.handleInputChange}
+          />
+          <button type="submit">add new food</button>
+        </form>
+
+        <div className="columns">
+          <div className="column">
+            { foods.map((food, index) => {
+              if(food.name.toLowerCase().includes(valueGuai)){
+                return(
+                  <FoodBox data={food} key={index} index={index} addParentTodayFood={this.addTodaysFood}/>
+                )
+              } else {
+                return null;
+              }
+            })}
+          </div>
+          <div className="column">
+            <h3>Today's food</h3>
+            <ul>
+              {this.state.foodsToday.map((foodToday, index)=>{
+                return(
+                  <li key={index}>{foodToday.newValue} {foodToday.name} = {totalCalories}</li>
+                )
+              })
+              }
+            </ul>
+
+            <p>Total calories: {totalCalories}</p>
+          </div>
+
+        </div>
+
+
+
+
       </div>
     );
   }

src/components/FoodBox.js

@@ -0,0 +1,73 @@
+import React, { Component } from 'react'
+
+class FoodBox extends Component {
+  state = {
+    value: '0',
+    name: '',
+    calories: '',
+  }
+
+  handleInputChange = (event) => {
+    const {name, value} = event.target;
+    this.setState({
+      [name]: value 
+    })
+  }
+
+  addQauntity = (event) => {
+    const {name, calories} = this.props.data;
+    const newValue = parseInt(event.target.parentElement.parentElement.children[0].children[0].value);
+    const newTodayFood = { newValue, name, calories};
+    console.log(newTodayFood);
+    this.props.addParentTodayFood(newTodayFood);
+    this.setState({
+      value: newValue,
+    })
+  }
+
+
+
+  render() {
+    const { name, calories, image } = this.props.data;
+    return (
+      <div className="box">
+        <article className="media">
+          <div className="media-left">
+            <figure className="image is-64x64">
+              <img src={image} alt={name}/>
+            </figure>
+          </div>
+          <div className="media-content">
+            <div className="content">
+              <p>
+                <strong>{name}</strong> <br />
+                <small>{calories}</small>
+              </p>
+            </div>
+          </div>
+          <div className="media-right">
+            <div className="field has-addons">
+              <div className="control">
+                <input
+                  className="input"
+                  type="number" 
+                  name="value"
+                  value={this.state.value} 
+                  onChange={this.handleInputChange}
+
+                />
+              </div>
+              <div className="control">
+                <button className="button is-info" onClick={this.addQauntity}>
+                  +
+                </button>
+              </div>
+            </div>
+          </div>
+        </article>
+      </div>
+    )
+  }
+}
+
+export default FoodBox;

src/components/Search.js

@@ -0,0 +1,24 @@
+import React, { Component } from 'react'
+
+class Search extends Component {
+  state = {
+    valueInput: ''
+  }
+
+  searchFood = (event) => {
+    const newValue = event.target.value;
+    this.props.getvalue(newValue);
+    this.setState({
+      valueInput: newValue
+    })
+  }
+
+  render() {
+    const {valueInput} = this.state;
+    return (
+      <input type="text" name="" value={valueInput} onChange={this.searchFood} />
+    )
+  }
+}
+
+export default Search;

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';