BCN-PT-GUILLEM MORESO

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,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;
 }

src/App.js

@@ -1,25 +1,94 @@
 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.setState({
+      todaysFoodList: [...this.state.todaysFoodList, food],
+    });
+  };
+
+  /*ITERATION 7 FUNCTION*/
+  removeFoodItem = foodIndex => {
+    this.state.todaysFoodList.splice(foodIndex, 1);
+    this.setState({
+      todaysFoodList: this.state.todaysFoodList,
+    });
+  };
   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>
+        <h1>List of Foods</h1>
+        <SearchBar searchBar={this.searchBar} />
+        <div>
+          <button className="add-new-food-btn" onClick={this.showForm}>
+            Add food
+          </button>
+          {this.state.showForm && <AddNewFood addNew={this.addNewFood} />}
+        </div>
+        {this.state.foods.map((food, index) => {
+          return (
+            <FoodBox
+              key={`${food[0]}-${index}`}
+              name={food.name}
+              image={food.image}
+              calories={food.calories}
+              food={food}
+              addToList={this.addFoodToList}
+            />
+          );
+        })}
+        <div className="food-list"></div>
+        <TodaysFoodList
+          todaysFoodList={this.state.todaysFoodList}
+          removeFoodItem={this.removeFoodItem}
+        />
       </div>
     );
   }

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 (
+      <div>
+        <form onSubmit={this.handleFormSubmit}>
+          <label>Food Name:</label>
+          <input
+            type="text"
+            name="name"
+            value={this.state.name}
+            onChange={this.handleNameInput}
+          />
+          <br />
+          <label>Food Calories:</label>
+          <input
+            type="text"
+            name="calories"
+            value={this.state.calories}
+            onChange={this.handleCaloriesInput}
+          />
+          <br />
+          <label>Food Quantity:</label>
+          <input
+            type="text"
+            name="quantity"
+            value={this.state.quantity}
+            onChange={this.handleQuantityInput}
+          />
+          <br />
+          <label>Food Image:</label>
+          <input
+            type="text"
+            name="image"
+            value={this.state.image}
+            onChange={this.handleImageInput}
+          />
+          <br />
+          <input type="submit" value="Submit" />
+        </form>
+      </div>
+    );
+  }
+}

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;
+}