Need to write readme ....

common/orderTotals.js

@@ -0,0 +1,18 @@
+function orderTotals(newOrder, menu) {
+    const itemsCost = Object.values(newOrder).reduce((acc,item) => acc + (menu[item.id].price * item.quantity),0)
+    const deliveryCost = itemsCost > 30? 0:5
+    console.log(deliveryCost + "ddddd");
+
+
+    return {
+        itemsCost: itemsCost,
+        deliveryCost: deliveryCost,
+        discount: itemsCost > 50? itemsCost/10:0,
+        deliveryMessage: itemsCost === 0?'Free delivery on orders over £30':itemsCost<30?`Spend £${30 - itemsCost} more for free delivery`: 'Delivery is Free!'
+          }
+      }
+
+
+module.exports = {
+    orderTotals
+}

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",
@@ -18,6 +19,7 @@
   },
   "dependencies": {
     "body-parser": "^1.18.3",
+    "date-fns": "^1.29.0",
     "express": "^4.16.3",
     "hbs": "^4.0.1",
     "jest": "^22.3.0",
@@ -36,10 +38,10 @@
     "jest": "^22.4.2",
     "jest-fetch-mock": "^1.6.6",
     "node-sass": "^4.9.1",
-    "nodemon": "1.17.5",
+    "nodemon": "^1.17.5",
+    "react-test-renderer": "^16.2.0",
     "sass-loader": "^7.0.3",
     "style-loader": "^0.21.0",
-    "react-test-renderer": "^16.2.0",
     "webpack": "^4.0.1",
     "webpack-cli": "^2.0.9"
   }

server.js

@@ -1,23 +1,107 @@
 const express = require('express');
 const bodyParser = require('body-parser');
+const {orderTotals} = require('./common/orderTotals.js')
+
 const app = express();
 
 app.use(bodyParser.json());
 app.use('/static', express.static('static'));
 app.set('view engine', 'hbs');
 
+let orders = {}
+let orderId = 0
+
 const menu = {
   1: {
     id: 1,
-    name: "Strawberry cheesecake",
-    price: 6
+    name: "Marinara",
+    ingredients: "Tomato sauce, garlic, basil, oregano, olive oil (v)",
+    price: 8
+  },
+  2: {
+    id: 2,
+    name: "Margherita",
+    ingredients: "Tomato sauce, fior di latte, basil, olive oil (v)",
+    price: 9
+  },
+  3: {
+    id: 3,
+    name: "Funghi",
+    ingredients: "White sauce, mushrooms, parmesan, aged mozzarella, roasted garlic, arugula (v)",
+    price: 12
+  },
+  4: {
+    id: 4,
+    name: "Carciofi",
+    ingredients: "Tomato sauce, artichokes, pancetta, cherry tomatoes, parmesan, aged mozzarella, basil ",
+    price: 14
+  },
+  5: {
+    id: 5,
+    name: "Calabrese",
+    ingredients: "Tomato sauce, soppressata, fior di latte, nicoise olives, oregano",
+    price: 14
+  },
+  6: {
+    id: 6,
+    name: "Finnochionna",
+    ingredients: "Tomato sauce, fennel sausage, provolone, parmesan, spicy peppers",
+    price: 15
+  },
+  7: {
+    id: 7,
+    name: "Pistaccio",
+    ingredients: "White sauce, mortadella, fior di latte, parmesan, basil pistachio pesto",
+    price: 13
   }
 };
 
+const users = {
+  1: {
+    id:1,
+    email: 'phil@berryman.org.uk',
+    address: 'Flat 1, 12 Smyrna Road, London, NW6 4LY',
+    phone: '07726 002626'
+  }
+}
+
+const receiveOrder = (orderObject) => {
+  console.log(menu)
+  const totals = orderTotals(orderObject.items,menu)
+  if (Object.keys(orders).length === 0) {
+    orderId = 1
+  } else {
+    orderId = Math.max(...Object.keys(orders)) + 1
+  }
+  orders[parseInt(orderId)] = {
+    orderId : parseInt(orderId),
+    userId : orderObject.userId,
+    items: orderObject.items,
+    dateTime : new Date(),
+    itemsCost: totals.itemsCost,
+    deliveryCost: totals.deliveryCost,
+    discount: totals.discount,
+    totalCost: totals.itemsCost + totals.deliveryCost - totals.discount
+  }
+  console.log(orders)
+  return(orders[orderId])
+}
+
+
+
 app.get('/', function(req, res){
   res.render('index');
 });
 
+app.get('/api/menu', function (req, res) {
+  console.log(orderTotals)
+  res.json(menu);
+});
+
+app.post('/api/order', function (req, res) {
+  res.json(receiveOrder(req.body))
+});
+
 app.listen(8080, function(){
   console.log('Listening on port 8080');
 });

src/components/App.js

@@ -1,16 +1,126 @@
 import React from 'react';
+import Header from './Header'
+import ConfirmationMessage from './ConfirmationMessage';
+import ConfirmationOrder from './ConfirmationOrder';
+
+
+import Menu from './Menu';
+import Order from './Order';
+
+import {orderTotals} from '../../common/orderTotals'
 
 import '../styles/App.scss';
 
 class App extends React.Component {
   constructor(){
     super();
+
+    this.state = {
+      menu:{},
+      userId:1,
+      orderHistory:{},
+      newOrder:{},
+      whichScreen: 'ordering',
+      orderConfirmation: {}
+    }
+
+    this.fetchMenu = this.fetchMenu.bind(this)
+    this.receiverAddToOrder = this.receiverAddToOrder.bind(this)
+    this.sendOrder = this.sendOrder.bind(this)
+    this.calculateTotals = this.calculateTotals.bind(this)
+  }
+
+  componentWillMount() {
+    this.fetchMenu()
   }
 
+  fetchMenu() {
+    fetch('/api/menu').
+    then(response => response.json()).
+      then(body => {
+        this.setState({
+          menu:body
+        })
+      })
+  }
+
+
+  sendOrder() {
+    const orderObject = {
+      items:this.state.newOrder,
+      userId:this.state.userId
+    }
+    console.log(orderObject)
+
+    fetch('http://localhost:8080/api/order', {
+      method: 'post',
+      body: JSON.stringify(orderObject),
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    }).then(function(response) {
+      return response.json();
+    }).then(data => {
+      console.log(data)
+      this.setState ({
+        orderConfirmation:data,
+        whichScreen:'confirmation'
+      })
+    });
+  }
+
+  receiverAddToOrder(item) {
+    const order = Object.assign({}, this.state.newOrder)
+      if (order[item.id]) {
+        order[item.id] = {
+          id: item.id,
+          quantity: order[item.id].quantity + item.quantity,
+        }
+      } else {
+        order[item.id] = {
+          id: item.id,
+          quantity: item.quantity,
+        }
+      }
+
+      if(order[item.id].quantity < 1) {
+        delete order[item.id]
+      }
+
+      this.setState({
+        newOrder:order
+      },()=>console.log(this.state.newOrder))
+    }
+
+  calculateTotals() {
+    return orderTotals(this.state.newOrder, this.state.menu)
+  }
+
+
+
+
+
   render(){
     return (
-      <div>
-        Delivereat app
+      <div className="wrapper">
+        <Header />
+
+        {this.state.whichScreen==='ordering' && (      
+        <Menu menu={this.state.menu} receiverAddToOrder={this.receiverAddToOrder} newOrder={this.state.newOrder} />
+        )}
+
+        {this.state.whichScreen==='confirmation' && (      
+        <ConfirmationMessage />
+        )}
+
+        {this.state.whichScreen==='confirmation' && (      
+        <ConfirmationOrder orderConfirmation={this.state.orderConfirmation} menu={this.state.menu}  />
+        )}
+
+
+        {this.state.whichScreen==='ordering' && (
+         <Order sendOrder={this.sendOrder} orderTotals={orderTotals(this.state.newOrder, this.state.menu)} newOrder={this.state.newOrder} menu={this.state.menu}/>
+        )}
       </div>
     )
   }

src/components/Header.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import '../styles/Header.scss';
+
+
+function Header() {
+  return (
+    <div className="header">
+      <p>90 // 30 Pizza Co</p>
+    </div>
+  )
+};
+
+export default Header;

src/components/Menu.js

@@ -0,0 +1,25 @@
+import React from "react";
+import MenuItem from './MenuItem'
+
+import "../styles/Menu.scss";
+
+class Menu extends React.Component {
+  constructor() {
+    super()
+  }
+
+
+
+    render(){
+      return (
+
+        <ul className="menu">
+            {Object.values(this.props.menu).map(menuItem => {
+                return <MenuItem menuItem={menuItem} key={menuItem.id} receiverAddToOrder={this.props.receiverAddToOrder} quantity={!this.props.newOrder[menuItem.id]?0:this.props.newOrder[menuItem.id].quantity} />
+            })}
+        </ul>
+      )
+    }  
+}
+
+export default Menu;

src/components/MenuItem.js

@@ -0,0 +1,35 @@
+import React from "react";
+
+import '../styles/MenuItem.scss';
+
+class MenuItem extends React.Component {
+  constructor() {
+    super()
+
+    this.handleClick = this.handleClick.bind(this)
+
+    this.state = {
+        quantity: 1
+    }
+  }
+
+  handleClick(quantity) {
+    this.props.receiverAddToOrder({id:this.props.menuItem.id, quantity:quantity==='add'?1:-1})
+    console.log(`quanityt = ${this.props.quantity}`)
+}
+
+    render(){
+      return (
+        <li className="menu__item">
+          <div className="menu__name">{this.props.menuItem.name}</div>
+          <div className="menu__ingredients">{this.props.menuItem.ingredients}</div>
+          <div className="menu__price">£ {this.props.menuItem.price}</div>
+          <div className="menu__down"><button className="search-more__button" onClick={(e)=> this.handleClick('remove', e)}>-</button></div>
+          <div className="menu__up"><button className="search-more__button" onClick={(e)=> this.handleClick('add',e)}>+</button></div>
+          <div className="menu__quantity">{this.props.quantity}</div>
+        </li>
+      )
+    }  
+}
+
+export default MenuItem;