BCN-PT-Tash

.env

@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true

package.json

@@ -3,8 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "react": "^16.8.1",
-    "react-dom": "^16.8.1",
+    "bulma": "^0.7.5",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "react-scripts": "2.1.5"
   },
   "scripts": {

src/App.js

@@ -1,25 +1,59 @@
-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 AddFood from "./components/AddFood";
+import Search from "./components/Search";
 
 class App extends Component {
+  constructor() {
+    super();
+    this.state = { foods: foods, visibilityForm: false };
+  }
+
+  newFood = food => {
+    const { foods } = this.state;
+    const newFoods = [...foods, food];
+
+    this.setState(
+      {
+        foods: newFoods
+      },
+      () => console.log(this.state)
+    );
+  };
+
+  handleVisibilityForm = () => {
+    this.setState({
+      visibilityForm: !this.state.visibilityForm
+    });
+  };
+
+  search = item => {
+    const foundFood = foods.filter(food => {
+      return food.name.toLowerCase().search(item) !== -1;
+    });
+    this.setState({
+      foods: [...foundFood]
+    });
+  };
+
   render() {
+    // console.log(foods);
+    const { foods, visibilityForm } = 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>
+      <div>
+        <Search search={this.search} />
+        <button onClick={this.handleVisibilityForm}>new food</button>
+        {visibilityForm && (
+          <AddFood
+            newFood={this.newFood}
+            visibility={this.handleVisibilityForm}
+          />
+        )}
+        {foods.map((food, index) => {
+          return <Foodbox key={index} {...food} />;
+        })}
       </div>
     );
   }

src/components/AddFood.js

@@ -0,0 +1,61 @@
+import React, { Component } from "react";
+
+class AddFood extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { name: "", calories: 0, image: "", quantity: 1 };
+  }
+
+  handleChange = event => {
+    this.setState(
+      {
+        [event.target.name]:
+          event.target.type === "number"
+            ? parseInt(event.target.value)
+            : event.target.value
+      },
+      () => console.log(this.state)
+    );
+  };
+
+  handleSubmit = event => {
+    event.preventDefault();
+    const { newFood, visibility } = this.props;
+    newFood(this.state);
+    this.setState({ name: "", calories: 0, image: "", quantity: 1 }, () =>
+      visibility()
+    );
+  };
+
+  render() {
+    return (
+      <form onSubmit={this.handleSubmit}>
+        <div>New food:</div>
+        <label>Name:</label>
+        <input
+          type="text"
+          name="name"
+          value={this.state.name}
+          onChange={this.handleChange}
+        />
+        <label>Calories:</label>
+        <input
+          type="number"
+          name="calories"
+          value={this.state.calories}
+          onChange={this.handleChange}
+        />
+        <label>Image:</label>
+        <input
+          type="text"
+          name="image"
+          value={this.state.image}
+          onChange={this.handleChange}
+        />
+        <input type="submit" value="Add" />
+      </form>
+    );
+  }
+}
+
+export default AddFood;

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

src/components/FoodBox.js

@@ -0,0 +1,39 @@
+import React, { Component } from "react";
+import "./FoodBox.css";
+
+class FoodBox extends Component {
+  render() {
+    const { name, calories, image } = this.props;
+    return (
+      <div className="box">
+        <article className="media">
+          <div className="media-left">
+            <figure className="image is-64x64">
+              <img src={image} alt="pic" />
+            </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" value="1" />
+              </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,18 @@
+import React, { Component } from "react";
+import "./Search.css";
+
+class Search extends Component {
+  handleChange = event => {
+    this.props.search(event.target.value);
+  };
+
+  render() {
+    return (
+      <div>
+        <input onChange={this.handleChange} placeholder="Search"></input>
+      </div>
+    );
+  }
+}
+
+export default Search;

src/index.js

@@ -1,10 +1,11 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
+import * as serviceWorker from "./serviceWorker";
+import "bulma/css/bulma.css";
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<App />, document.getElementById("root"));
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.