BCN FT Makeda-Jorge-Lu

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.js

@@ -1,25 +1,36 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
+import Foodbox from './components/Foodbox';
+import foods from './data/foods.json';
+import Button from './components/Button';
+import Search from './components/Search'
 import './App.css';
 
 class App extends Component {
+  state = {
+    foods,
+    originalFoods: foods,
+    name: '',
+    calories: '',
+    image: '',
+    isAddingNew: false,
+    quantity: []
+  }
+
+  changeFoods = (foods) => {
+    this.setState({foods})
+  }
+
+  showFood = (foods) => {
+    this.setState({foods})
+  }
+
+
   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>
+      <Button />
+      <Search changeFoods={this.changeFoods} originalFoods={this.state.originalFoods}/>
+      <Foodbox foods={this.state.foods} showFood={this.showFood}/>
       </div>
     );
   }

src/components/Button.js

@@ -0,0 +1,66 @@
+import React, {Component} from 'react'
+import Foodbox from './Foodbox'
+
+class Button extends Component  {
+  state = {
+    name: '',
+    calories: '',
+    image: '',
+    foods: [],
+    isAddingNew: false,
+    quantity: []
+  }
+
+addNewFood = (event) => {
+  const {isAddingNew} = this.state;
+    this.setState ({
+   isAddingNew: !isAddingNew
+  })
+ } 
+
+
+handleInputChange = (event) => {
+  event.preventDefault();
+  const {name, value} = event.target
+  this.setState({
+    [name]:value
+  })
+}
+
+handleSubmit = (event) => {
+  event.preventDefault();
+  const {name , calories, image, foods} = this.state;
+  const foodsCopy = [...foods];
+  const newFood = {name, calories, image}
+  foodsCopy.push(newFood)
+  this.setState ({
+    foods: foodsCopy,
+    name: '',
+    calories: '',
+    image: '',
+  },()=>{this.addNewFood()})
+}
+
+  render() {
+    const {name , calories, image, foods, isAddingNew} = this.state
+    return (
+      <>
+       <button onClick={this.addNewFood}>Add new food</button>
+      { isAddingNew ? (<div>
+      <form onSubmit = {this.handleSubmit}>
+      <label htmlFor="name">name</label>
+      <input onChange= {this.handleInputChange} name="name" id="name" type="text" placeholder="food name" value={name}/>
+      <label htmlFor="calories">calories</label>
+      <input onChange= {this.handleInputChange} name="calories" id="calories" type="number" placeholder="food calories" value={calories}/>
+      <label htmlFor="image">image</label>
+      <input onChange= {this.handleInputChange} name="image" id="image" type="text" placeholder="imageurl" value={image}/>
+      <button> Submit new food </button>
+      </form>
+      <Foodbox foods={foods} />
+      </div>) : null}
+     </>
+    )}
+
+}
+
+export default Button;

src/components/Foodbox.js

@@ -0,0 +1,46 @@
+import React, { Component } from 'react'
+
+ class Foodbox extends Component {
+  render() {
+    return (
+        <div className="box">
+        {this.props.foods.map((food, index) => {
+          return (
+          <article key={index} className="media">
+          <div className="media-left">
+            <figure className="image is-64x64">
+            <img src={food.image} alt=""/>
+            </figure>
+        </div>
+      <div className="media-content">
+      <div className="content">
+        <p>
+          <strong>{food.name}</strong> <br />
+          <small>{food.calories} calories</small>
+        </p>
+      </div>
+      </div>
+      <div className="media-right">
+      <div className="field has-addons">
+        <div className="control">
+          <input
+            className="input"
+            type="number" 
+            value={food.quantity}
+          />
+        </div>
+        <div className="control">
+          <button className="button is-info">
+            +
+          </button>
+        </div>
+      </div>
+      </div>
+      </article>
+        )})}
+    </div>
+    )
+ }
+}
+export default Foodbox;
+

src/components/Search.js

@@ -0,0 +1,21 @@
+import React, { Component } from 'react'
+
+ class Search extends Component {
+
+
+   handleSearchBar = (event) => {
+     const name = event.target.value;
+     let newFoods = this.props.originalFoods;
+     let filteredFoods = newFoods.filter((food => food.name.includes(name)))
+     this.props.changeFoods(filteredFoods)
+   }
+
+  render() {
+    return (
+      <div>
+          <input type="text" name="txtBox" onChange={(e)=>this.handleSearchBar(e)}/>
+      </div>
+    )
+  }
+}
+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';