CP Delivereat

package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "test": "jest",
     "dev": "webpack --mode development",
-    "build": "webpack --mode production"
+    "build": "webpack --mode production",
+    "start": "node server.js"
   },
   "author": "",
   "license": "ISC",
@@ -18,7 +19,7 @@
   },
   "dependencies": {
     "body-parser": "^1.18.3",
-    "express": "^4.16.3",
+    "express": "^4.16.4",
     "hbs": "^4.0.1",
     "jest": "^22.3.0",
     "react": "^16.2.0",
@@ -42,5 +43,16 @@
     "react-test-renderer": "^16.2.0",
     "webpack": "^4.0.1",
     "webpack-cli": "^2.0.9"
-  }
+  },
+  "directories": {
+    "test": "tests"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chrisphillers/delivereat.git"
+  },
+  "bugs": {
+    "url": "https://github.com/chrisphillers/delivereat/issues"
+  },
+  "homepage": "https://github.com/chrisphillers/delivereat#readme"
 }

server.js

@@ -2,22 +2,29 @@ const express = require('express');
 const bodyParser = require('body-parser');
 const app = express();
 
+const {getMenu} = require('./storage')
+
 app.use(bodyParser.json());
 app.use('/static', express.static('static'));
 app.set('view engine', 'hbs');
 
-const menu = {
-  1: {
-    id: 1,
-    name: "Strawberry cheesecake",
-    price: 6
-  }
-};
-
+//
 app.get('/', function(req, res){
   res.render('index');
 });
 
+app.get('/api/menu', function(req, res){
+  const menu = getMenu();
+    res.json(menu);
+  });
+
+  app.post('/api/order', function(req, res){
+    const order = order(req.body);
+    createOrder(order);
+    res.json(order)
+    console.log(req.body)
+    });
+
 app.listen(8080, function(){
   console.log('Listening on port 8080');
 });

src/components/App.js

@@ -1,16 +1,63 @@
 import React from 'react';
-
+import Menu from './Menu';
 import '../styles/App.scss';
 
 class App extends React.Component {
   constructor(){
     super();
+
+    this.state = {menuItems:[]};
+    this.fetch = this.fetch.bind(this);
+    this.receiveOrder = this.receiveOrder.bind(this);
+    this.postOrder = this.postOrder.bind(this);
   }
 
+componentDidMount(){
+  this.fetch()
+}
+
+receiveOrder(){
+  this.setState();
+  postOrder(this.state.order)
+}
+
+postOrder(order){
+
+  fetch('http://localhost:8080/api/order', {
+    method: 'post',
+    body: JSON.stringify(order),
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  }).then(function(response) {
+    return response.json();
+  }).then(data => {
+    console.log(data)
+    // handle response
+  });
+
+
+}
+
+fetch(){
+
+  fetch('/api/menu')
+  .then(res => res.json())
+  .then(body => {
+    console.log(body)
+    this.setState({menuItems: body})
+    console.log(this.state.menuItems);
+
+  })
+
+}
+
   render(){
     return (
       <div>
         Delivereat app
+        <Menu menu={this.state.menuItems} receiveOrder={this.receiveOrder}/>
+
       </div>
     )
   }

src/components/Basket.js

@@ -0,0 +1,67 @@
+import React from "react";
+
+
+class Basket extends React.Component {
+  constructor() {
+    super();
+     this.basketAdd = this.basketAdd.bind(this);
+    this.basketRemove = this.basketRemove.bind(this);
+    this.state = {order:{}}
+
+  }
+
+  basketAdd(foodItem){
+    const newBasket = Object.assign({}, this.state.basket);
+    if (this.state.basket[foodItem.id]) {
+      newBasket[foodItem.id] += 1
+    } else {
+      newBasket[foodItem.id] = 1
+    }
+
+    this.setState({ basket: newBasket }, () => {
+      console.log(this.state);
+    })    
+  }
+
+  basketRemove(foodItem){
+    const newBasket = Object.assign({}, this.props.basket);
+    if (this.props.basket[foodItem.id]) {
+      newBasket[foodItem.id] -= 1
+    } else {
+      newBasket[foodItem.id] = 0
+    }
+
+    this.props.setState({ basket: newBasket }, () => {
+      console.log(this.props.state);
+    })
+  }
+
+
+
+
+  render() {
+
+    return (
+        <div>
+            <ul className="basket">
+
+            {Object.entries(this.props.basket).map(([id, quantity]) => 
+                <li key={id} >
+
+
+                    <span>{quantity} x {id} </span>
+                    {/* {this.props.menu[id]}  */}
+                   <button onClick={() => this.basketRemove(id)}>Remove>-</button> 
+                    <button>+</button>
+                </li>
+            )}
+
+            </ul>
+            <button>Place Order</button>
+        </div>
+
+    )
+    }
+}
+
+export default Basket;