BCN - PT antonio Rivera

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

@@ -2,32 +2,47 @@
   text-align: center;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
-  pointer-events: none;
+.wrapper {
+  display: flex;
+  flex-direction: row;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+.food,
+.list {
+  margin: 30px;
+  border: 0px;
 }
 
-.App-link {
-  color: #61dafb;
+.list h2 {
+  font-size: 32px;
+  font-weight: 800;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.list {
+  width: 400px;
 }
+
+button {
+  padding: 5px;
+  background-color: bisque;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.search input {
+  font-size: 16px;
+  padding: 5px;
+  margin: 10px;
+}
+
+.add input {
+  font-size: 16px;
+  padding: 5px;
+  margin: 10px;
+}
+
+input.error {
+  border: 1px solid tomato;
+  color: black;
+  background-color: rgb(240, 185, 183)
+}

src/App.js

@@ -1,25 +1,150 @@
 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 Button from './components/Button';
+import FormNewFood from './components/FormNewFood';
+import SearchName from './components/SearchName';
+import ListFood from './components/ListFood';
 
 class App extends Component {
+  state = {
+    foodsState: foods,
+    foodsFilter: [],
+    selectFoods: [],
+    totalCalories: 0,
+    form: {
+      visibility: false,
+    },
+  };
+
+  handleVisibiltyFromAddFood = () => {
+    const { visibility } = this.state.form;
+
+    this.setState({
+      form: { visibility: !visibility },
+    });
+  };
+
+  handleAddFood = (name, calories, image) => {
+    const { foodsState } = this.state;
+    const newFood = {
+      name: name,
+      calories: calories,
+      image: image,
+      quantity: 0,
+    };
+
+    this.setState(
+      {
+        foodsState: [newFood, ...foodsState],
+      },
+      () => {
+        console.log('TCL: App -> handleAddFood -> foods', foodsState);
+        this.handleState(this.state.foodsState, this.state.foodsFilter);
+      }
+    );
+  };
+
+  handleSearchName = event => {
+    const { foodsState } = this.state;
+    const filterItems = foodsState.filter(
+      element => element.name.toLowerCase().indexOf(event.target.value.toLowerCase()) !== -1
+    );
+
+    this.setState(
+      {
+        foodsFilter: filterItems,
+      },
+      () => {
+        console.log('TCL: App -> handleAddFood -> foodsFilter', this.state.foodsFilter);
+      }
+    );
+  };
+  handleAddFoodlist = (name, calories, quantity) => {
+    const { selectFoods } = this.state;
+    const newFood = {
+      name,
+      calories,
+      quantity,
+    };
+
+    this.setState(
+      {
+        selectFoods: [newFood, ...selectFoods],
+      },
+      () => {
+        const allCalories = this.state.selectFoods
+          .map(food => food.calories * food.quantity)
+          .reduce((ac, cur) => ac + cur);
+        this.setState({
+          totalCalories: allCalories,
+        });
+      }
+    );
+  };
+  handleState = (foodsState, foodsFilter) => {
+    if (foodsFilter.length === 0) {
+      return this.state.foodsState;
+    } else {
+      return this.state.foodsFilter;
+    }
+  };
+
   render() {
+    const { foodsState, form, selectFoods, totalCalories } = this.state;
+
+    const foodsFilter = this.handleState(this.state.foodsState, this.state.foodsFilter);
+
     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="wrapper">
+        <div className="food">
+          <div>
+            <Button onClick={this.handleVisibiltyFromAddFood}>
+              OPEN / CLOSE - Create nuw food
+            </Button>
+          </div>
+          <div className="add">
+            {form.visibility && <FormNewFood onSendForm={this.handleAddFood} />}
+          </div>
+          <div className="search">
+            Search <input defaultValue=" " onChange={this.handleSearchName} />
+          </div>
+          <div>
+            {foodsFilter.map((food, index) => {
+              return (
+                <FoodBox
+                  key={index}
+                  id={index}
+                  name={food.name}
+                  calories={food.calories}
+                  image={food.image}
+                  quantity={food.quantity}
+                  onListElement={this.handleAddFoodlist}
+                />
+              );
+            })}
+          </div>
+        </div>
+
+        <div className="list">
+          <h2>Your list</h2>
+          <div>
+            {selectFoods.map((food, index) => {
+              return (
+                <ListFood
+                  key={index}
+                  id={index}
+                  name={food.name}
+                  calories={food.calories}
+                  quantity={food.quantity}
+                />
+              );
+            })}
+          </div>
+          <div>Total Calories: {totalCalories}</div>
+        </div>
       </div>
     );
   }

src/components/Button.js

@@ -0,0 +1,14 @@
+import React, { Component } from "react";
+
+class Button extends Component {
+  render() {
+    const { children, onClick } = this.props;
+    return (
+      <div>
+        <button onClick={onClick}> {children}</button>
+      </div>
+    );
+  }
+}
+
+export default Button;

src/components/FoodBox.css

@@ -0,0 +1,3 @@
+.box {
+  width: 500px;
+}

src/components/FoodBox.js

@@ -0,0 +1,65 @@
+import React, { Component } from "react";
+import "./FoodBox.css";
+
+class FoodBox extends Component {
+  state = {
+    quantityFood: 1,
+  };
+  handleNumberFood = event => {
+    const newQuantity = event.target.value;
+    console.log(newQuantity);
+    this.setState({
+      quantityFood: newQuantity,
+    });
+  };
+
+  render() {
+    const { id, name, calories, image, onListElement } = this.props;
+    const quantity = this.state.quantityFood;
+    console.log("TCL: FoodBox -> render -> quantity", quantity);
+
+    return (
+      <div className="box">
+        <article className="media">
+          <div className="media-left">
+            <figure className="image is-64x64">
+              <img src={image} />
+            </figure>
+          </div>
+          <div className="media-content">
+            <div className="content">
+              <p>
+                <strong>{name}</strong> <br />
+                <small>{calories} cal</small>
+              </p>
+            </div>
+          </div>
+          <div className="media-right">
+            <div className="field has-addons">
+              <div className="control">
+                <input
+                  className="input"
+                  type="number"
+                  defaultValue="1"
+                  onChange={this.handleNumberFood}
+                />
+              </div>
+              <div className="control">
+                <button
+                  className="button is-info"
+                  onClick={() => {
+                    onListElement(name, calories, quantity);
+                  }}
+                >
+                  +
+                </button>
+              </div>
+            </div>
+          </div>
+        </article>
+      </div>
+    );
+  }
+}
+
+export default FoodBox;