weekend za delivereat

package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "test": "jest",
     "dev": "webpack --mode development",
-    "build": "webpack --mode production"
+    "build": "webpack --mode production",
+    "start": "nodemon server.js"
   },
   "author": "",
   "license": "ISC",

server.js

@@ -2,22 +2,41 @@ const express = require('express');
 const bodyParser = require('body-parser');
 const app = express();
 
+const {getMenu, getItem, postOrder, getOrders } = 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('/menu', function(req, res){
+  menu = getMenu();
+  res.json(menu)
+});
+
+app.get('/menu/:itemId', function(req, res){
+  const menuItem = getItem(req.params.itemId)
+  if(req.params.itemId){
+    res.json(menuItem)
+  } else {
+    res.status(404).json({error: 'Lost in the fridge'});
+  }
+})
+
+app.post('/order', function(req, res){
+  const newOrder = req.body;
+  res.json(postOrder(newOrder))
+})
+
+app.get('/order', function(req, res){
+  orders = getOrders()
+  res.json(orders)
+})
+
 app.listen(8080, function(){
   console.log('Listening on port 8080');
 });

src/components/AddOrderModal.js

@@ -0,0 +1,64 @@
+import React from 'react';
+
+import '../styles/AddOrderModal.scss';
+
+class AddOrderModal extends React.Component {
+  constructor(){
+    super();
+
+    this.state= {
+      quantity: 1,
+    }
+
+    this.handleClick = this.handleClick.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+
+  handleClick(event) {
+    this.props.receiveModalCloseBtn();
+    this.setState({
+      quantity: 1,
+    })
+  }
+
+  handleSubmit(event) {
+    event.preventDefault()
+    this.props.updateOrder(this.props.modalDetails.id, this.state.quantity);
+    this.props.receiveModalCloseBtn();
+    this.setState({
+      quantity: 1,
+    })
+  }
+
+  handleChange(event) {
+    this.setState({
+      quantity: parseInt(event.target.value, 10),
+    })
+  }
+
+render(){
+  return(
+  <div className={this.props.className} id="addOrderModal">
+    <div className="modal-content">
+      <div className="modal-header">
+        <span className="closeBtn" onClick={this.handleClick}>&times;</span>
+        <h2>Add to Order</h2>
+      </div>
+      <div className="modal-body">
+        <img src={"/static/"+this.props.modalDetails.photoUrl} />
+        <h3>{this.props.modalDetails.description}</h3>
+        <form className="itemOrder" onSubmit={this.handleSubmit}>
+          <input onChange={this.handleChange} value={this.state.quantity} type="number" step="1" max="10" min="1"/>
+          <button>Add to Order</button>
+        </form>
+      </div>
+      </div>
+    </div>
+  )
+}
+
+}
+
+export default AddOrderModal

src/components/App.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import Menu from './Menu.js'
 
 import '../styles/App.scss';
 
@@ -10,7 +11,8 @@ class App extends React.Component {
   render(){
     return (
       <div>
-        Delivereat app
+        <h1 className="mainHeading">Diabetes</h1>
+        <Menu />
       </div>
     )
   }

src/components/Menu.js

@@ -0,0 +1,122 @@
+import React from 'react';
+import AddOrderModal from './AddOrderModal.js'
+import Order from './Order.js'
+
+// import '../styles/Menu.scss';
+
+class Menu extends React.Component {
+    constructor(){
+      super();
+
+      this.state ={
+        menu: [],
+        modalDetails: "",
+        modalOpen: false,
+        order: {},
+        total: ""
+      }
+
+    this.menuCall = this.menuCall.bind(this);
+    this.itemCall = this.itemCall.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+    this.updateOrder = this.updateOrder.bind(this);
+    this.receiveModalCloseBtn = this.receiveModalCloseBtn.bind(this);
+    this.receiveOrderSubmit = this.receiveOrderSubmit.bind(this);
+    this.receiveRemoveItem = this.receiveRemoveItem.bind(this);
+    }
+
+componentDidMount(){
+  this.menuCall()
+}
+
+menuCall(){
+  fetch(`/menu`)
+    .then(function(response) {
+      return response.json();
+    })
+    .then(body => {
+      this.setState({
+        menu: body
+      })
+    })
+}
+
+itemCall(menuId){
+  fetch(`/menu/${menuId}`)
+    .then(function(response) {
+      return response.json();
+    })
+    .then(body => {
+      this.setState({
+        modalDetails: body
+      })
+    })
+}
+
+handleClick(menuId) {
+  this.itemCall(menuId);
+  this.setState({
+    modalOpen: true
+  })
+}
+
+receiveModalCloseBtn(){
+  this.setState({
+    modalOpen: false,
+  })
+}
+
+updateOrder(itemId, itemQuantity){
+  const newOrder = Object.assign({}, this.state.order);
+
+  if (newOrder[itemId]) {
+    newOrder[itemId] = newOrder[itemId] + itemQuantity
+  } else {
+    newOrder[itemId] = itemQuantity
+  }
+
+  Object.entries(this.order).reduce()
+
+  this.setState({
+    order: newOrder,
+    total: ""
+  })
+}
+
+receiveOrderSubmit(){
+  fetch(`/order`, {method:"POST", headers: {
+            "Content-Type": "application/json; charset=utf-8",
+        }, body: JSON.stringify(this.state.order)})
+        this.setState({
+          order: {}
+        })
+}
+
+receiveRemoveItem(menuItem){
+  const orderEntries = Object.entries(this.state.order);
+  console.log(menuItem)
+  // this.setState{(
+  //   order:
+  // )}
+}
+
+render(){
+  return(
+  <div>
+    {this.state.menu.map (item => {
+      return(
+        <div onClick={() => this.handleClick(item.id)}>
+          {item.name}{item.price}
+          {item.vegetarian ? <img className="vegan" src="static/vegan.png" /> : null}
+        </div>
+      )
+    })}
+    <div><AddOrderModal receiveModalCloseBtn={this.receiveModalCloseBtn} updateOrder={this.updateOrder} className= {this.state.modalOpen ? "modal2" : "modal"}  modalDetails={this.state.modalDetails}/></div>
+    <div><Order receiveRemoveItem={this.receiveRemoveItem} receiveOrderSubmit={this.receiveOrderSubmit} order={this.state.order} menu={this.state.menu} /></div>
+  </div>
+)
+
+}
+}
+
+export default Menu;

src/components/Order.js

@@ -0,0 +1,52 @@
+import React from 'react';
+
+class Order extends React.Component {
+  constructor(){
+    super();
+
+    this.state= {
+    }
+
+    this.handleClick=this.handleClick.bind(this);
+    this.handleClick2=this.handleClick2.bind(this);
+  }
+
+handleClick(){
+  this.props.receiveOrderSubmit();
+}
+
+handleClick2(id){
+  this.props.receiveRemoveItem(id);
+}
+
+  render(){
+    return(
+      <div>
+        <h3>Your Order Basket</h3>
+        <div>
+          {Object.entries(this.props.order).map (([id, quantity]) => {
+            const menuItem = this.props.menu.find(item => item.id.toString() === id)
+            return(
+              <div data-id={id}>
+                {quantity}x {id} x {menuItem.name} x £{menuItem.price}
+                <button
+                  data-id={id}
+                  key={menuItem.id}
+                  receiveRemoveItem={this.props.receiveRemoveItem}
+                  onClick={event => this.handleClick2(id)}>Remove Item</button>
+              </div>
+            )
+          })}
+        </div>
+        <div>
+          <button onClick={this.handleClick} >Submit</button>
+        </div>
+        <div>
+          <button onClick={this.handleClick} >Submit</button>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default Order