BCN-PT-CRIS

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

@@ -1,33 +1,54 @@
+body {
+  font-size: 16px;
+}
 .App {
-  text-align: center;
+  font-size: 1rem;
+}
+
+h1 {
+  font-size: 2em;
+  font-weight: bold;
+  text-align: left;
+  margin-bottom: 1em;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
-  pointer-events: none;
+h2 {
+  font-size: 1.6em;
+  font-weight: 500;
+  margin-bottom: 12px;
 }
 
-.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;
+/**Container**/
+.container {
+  max-width: 900px;
+  margin-top: 30px;
 }
 
-.App-link {
-  color: #61dafb;
+/**Buttons**/
+.is-primary {
+  margin-bottom: 1.5em;
+  margin-top: 1em;
+}
+.right {
+  text-align: right;
+}
+/**Forms**/
+.add-food {
+  margin-bottom: 1.5em;
+}
+.search-container {
+  margin-left: 0em;
+}
+.search-container button {
+  margin-left: 12px;
+}
+.claim {
+  margin-top: 2em;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+/*My nutrition table*/
+.nutrition-containter ul {
+  margin-left: 1.2em;
+  list-style: disc;
+  margin-bottom: 1.5em;
 }

src/App.js

@@ -1,25 +1,120 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React, { Component } from "react";
+import "./App.css";
+import foods from "./data/foods.json";
+import Foodbox from "./components/FoodBox";
+import ButtonAdd from "./components/ButtonAdd";
+import FoodForm from "./components/AddFoodForm";
+import MyNutritionTable from "./components/MyNutritionTable";
 
 class App extends Component {
+  state = {
+    foods: foods,
+    form: false,
+    query: "",
+    myNutritionList: []
+  };
+  handleAdd = food => {
+    const { name, quantity, calories } = food;
+    const { myNutritionList } = this.state;
+    const foodsToday = {
+      name: name,
+      quantity: quantity,
+      calories: calories
+    };
+    if (myNutritionList.length === 0) {
+      this.setState({
+        myNutritionList: [foodsToday, ...myNutritionList]
+      });
+    } else {
+      const isFoodRepeated = myNutritionList.findIndex(food => {
+        return food.name === name;
+      });
+      if (isFoodRepeated === -1) {
+        this.setState({
+          myNutritionList: [foodsToday, ...myNutritionList]
+        });
+      } else {
+        myNutritionList[isFoodRepeated].quantity += quantity;
+        this.setState({
+          myNutritionList: myNutritionList
+        });
+        console.log(this.state);
+      }
+    }
+  };
+  displayForm = () => {
+    if (!this.state.form) {
+      this.setState({
+        form: true
+      });
+    } else {
+      this.setState({
+        form: false
+      });
+    }
+  };
+  addNewFood = food => {
+    console.log("🥘 new food");
+    this.setState({
+      foods: [...this.state.foods, food],
+      form: false
+    });
+  };
+  handleSearch = event => {
+    const { value } = event.target;
+    this.setState({
+      query: value
+    });
+  };
+  handleDelete = foodIndex => {
+    const { foods } = this.state;
+    console.log(foods);
+    const foodsCopy = [...foods];
+    foodsCopy.splice(foodIndex, 1);
+    this.setState({
+      foods: foodsCopy
+    });
+  };
   render() {
+    const { foods, query, myNutritionList } = this.state;
+    const foodFiltered = foods.filter(food => {
+      return food.name.toLowerCase().includes(query.toLowerCase());
+    });
+    const foodlist = foodFiltered.map((ingredient, index) => {
+      return (
+        <Foodbox
+          key={index}
+          name={ingredient.name}
+          calories={ingredient.calories}
+          image={ingredient.image}
+          onCalculator={this.handleAdd}
+          id={index}
+          clickToDelete={() => this.handleDelete(index)}
+        />
+      );
+    });
     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>Ironnutrition</h1>
+        {!this.state.form && (
+          <input
+            className="input column is-full"
+            type="text"
+            name="query"
+            value={this.state.query}
+            placeholder="Search a food"
+            onChange={this.handleSearch}
+          />
+        )}
+        {this.state.form && <FoodForm onSubmitFood={this.addNewFood} />}
+        {!this.state.form && <ButtonAdd action={this.displayForm} />}
+        <div className="columns">
+          <div className="column is-three-fifths">{foodlist}</div>
+          <div className="column my-nutrition">
+            <h2>Today's foods</h2>
+            <MyNutritionTable myNutrition={myNutritionList} />
+          </div>
+        </div>
       </div>
     );
   }

src/components/AddFoodForm.js

@@ -0,0 +1,80 @@
+import React, { Component } from "react";
+
+class FoodForm extends Component {
+  state = {
+    name: "",
+    calories: 0,
+    image: "",
+    quantity: 1
+  };
+  handleInput = event => {
+    const { value, name } = event.target;
+    this.setState({
+      //entre corchetes me pasa el valor dinámicamente
+      [name]: value
+    });
+  };
+  handleSubmit = event => {
+    event.preventDefault();
+    this.props.onSubmitFood(this.state);
+  };
+  render() {
+    return (
+      <form className="add-food" onSubmit={this.handleSubmit}>
+        <div className="field">
+          <label className="label">Name</label>
+          <div className="control">
+            <input
+              className="input"
+              type="text"
+              name="name"
+              onChange={this.handleInput}
+              placeholder="Food's name"
+            />
+          </div>
+        </div>
+        <div className="field">
+          <label className="label">Calories</label>
+          <div className="control">
+            <input
+              className="input"
+              type="number"
+              min="0"
+              name="calories"
+              onChange={this.handleInput}
+              placeholder="0"
+            />
+          </div>
+        </div>
+        <div className="field">
+          <label className="label">Image</label>
+          <div className="file has-name">
+            <div className="control">
+              <label className="file-label">
+                <input
+                  className="file-input"
+                  type="file"
+                  onChange={this.handleInput}
+                  name="image"
+                />
+                <span className="file-cta">
+                  <span className="file-label">Upload an image</span>
+                </span>
+                <span className="file-name">food.jpg</span>
+              </label>
+            </div>
+          </div>
+        </div>
+        <div className="field">
+          <div className="control">
+            <button className="button is-primary" type="submit">
+              Submit
+            </button>
+          </div>
+        </div>
+      </form>
+    );
+  }
+}
+
+export default FoodForm;

src/components/ButtonAdd.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+const ButtonAdd = props => {
+  return (
+    <button className="button is-primary" onClick={props.action}>
+      Add a food
+    </button>
+  );
+};
+
+export default ButtonAdd;

src/components/FoodBox.js

@@ -0,0 +1,78 @@
+import React, { Component } from "react";
+
+class Foodbox extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      name: this.props.name,
+      quantity: 1,
+      calories: this.props.calories,
+      id: this.props.id
+    };
+    this.handleQuantity = this.handleQuantity.bind(this);
+    this.handleAdd = this.handleAdd.bind(this);
+  }
+  handleQuantity(event) {
+    this.setState({
+      quantity: parseInt(event.target.value),
+      name: this.props.name,
+      calories: this.props.calories
+    });
+  }
+  handleAdd(event) {
+    this.props.onCalculator(this.state);
+    this.setState({
+      quantity: 1
+    });
+  }
+  render() {
+    const { name, calories, image, clickToDelete } = this.props;
+    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} cal</small>
+              </p>
+            </div>
+          </div>
+          <div className="media-right">
+            <div className="field has-addons">
+              <div className="control">
+                <input
+                  className="input"
+                  type="number"
+                  value={this.state.quantity}
+                  onChange={this.handleQuantity}
+                  min="0"
+                />
+              </div>
+              <div className="control">
+                <button className="button is-info" onClick={this.handleAdd}>
+                  +
+                </button>
+              </div>
+            </div>
+            <div className="field right">
+              <button
+                className="button is-small is-danger is-outlined"
+                onClick={clickToDelete}
+              >
+                Remove
+              </button>
+            </div>
+          </div>
+        </article>
+      </div>
+    );
+  }
+}
+
+export default Foodbox;