First weekend final version

menu.js

@@ -0,0 +1,66 @@
+// #2
+function showMenu() {
+
+  const min = 1;
+  const max = 100;
+
+  // function getRandomInt(min, max) {
+  //   return Math.floor(Math.random() * (max - min + 1)) + min;
+
+
+  const menu = {
+    1 : {
+      id: Math.floor(Math.random() * (max - min + 1)) + min,
+      name: "Strawberry cheesecake",
+      price: 6,
+      image: "http://www.fnstatic.co.uk/images/content/recipe/simply-delicious-strawberry-cake.jpg"
+    },
+    2 : {
+      id: Math.floor(Math.random() * (max - min + 1)) + min,
+      name: "Chocolate cake",
+      price: 5,
+      image:'https://foodess.com/wp-content/uploads/2011/12/MTMxNTk1NDA2NDU4MDAwNjU4.jpg'
+    },
+    3 : {
+      id: Math.floor(Math.random() * (max - min + 1)) + min,
+      name: "Cream cake",
+      price: 4,
+      image: 'https://www.mommyhatescooking.com/wp-content/uploads/2015/09/pumpkin-pie-cake-7-600x844.jpg'
+    },
+    4 : {
+      id: Math.floor(Math.random() * (max - min + 1)) + min,
+      name: "Angel cake",
+      price: 3,
+      image: 'https://ichef.bbci.co.uk/food/ic/food_16x9_832/recipes/angel_food_cake_with_04002_16x9.jpg'
+    },
+    5 : {
+      id: Math.floor(Math.random() * (max - min + 1)) + min,
+      name: "Layer cake",
+      price: 2,
+      image: 'https://images-gmi-pmc.edge-generalmills.com/26668aa9-c04f-4e8c-be11-5c0c11df29b6.jpg'
+    }
+  }
+
+const menuFunctions = {
+
+  // #2 Works
+  getMenu () {
+    return Object.values(menu);
+  },
+
+  // #3 Works
+  getMenuItem(id) {
+    const foodItem = Object.values(menu).find( item => item.id === parseInt(id));
+    if (!menu) {
+      return null;
+    } else {
+    return foodItem;
+  }
+}
+
+}
+
+  return menuFunctions;
+}
+
+ module.exports = showMenu;

order.js

@@ -0,0 +1,90 @@
+
+orderList = [
+  {
+    id: 1,
+    name: "Strawberry cheesecake",
+    price: 6
+  },
+  {
+    id: 2,
+    name: "Chocolate cake",
+    price: 5
+  },
+  {
+    id: 3,
+    name: "Cream cake",
+    price: 4
+  },
+  {
+    id: 4,
+    name: "Angel cake",
+    price: 3
+  }
+]
+
+
+function showOrder() {
+
+
+  const orderFunctions = {
+
+    // #4
+    createNewOrder(order) {
+      const newOrder = {
+        id: orderList.length+1,
+        foodItem: order
+      }
+
+      orderList.push(newOrder);
+      return newOrder;
+    },
+
+    // #5 Works
+    getOrder() {
+      return orderList;
+    }
+
+
+  }
+  return orderFunctions;
+}
+
+module.exports = showOrder;
+
+
+// #6
+// changeOrderItem(id) {
+//   const foodItem = orderList.find( item => item.id === parseInt(id));
+//   if (!foodItem) {
+//     return null;
+//   }
+//   else {
+//     // foodItem.name = id.name;
+//     orderList.push(foodItem);
+//     return foodItem;
+//   }
+// },
+
+// #7
+// deleteFoodItem(id) {
+//   const foodItem = orderList.find( item => item.id === parseInt(req.params.id));
+//   if (!orderList) {
+//     return null;
+//   }
+//   else {
+//     const index = orderList.indexOf(foodItem);
+//     orderList.splice(index, 1);
+//     res.send(foodItem);
+//   }
+// },
+
+// #8
+//   deleteOrder() {
+//     if (!orderList) {
+//       return false;
+//     }
+//     else {
+//       delete orderList;
+//       return "Your order was deleted";
+//   }
+// }

server.js

@@ -2,22 +2,87 @@ const express = require('express');
 const bodyParser = require('body-parser');
 const app = express();
 
+const menu = require('./menu.js');
+const {getMenu, getMenuItem} =menu();
+
+const order = require('./order.js');
+const {createNewOrder, changeOrderItem, getOrder, deleteFoodItem, deleteOrder, orderList} = order();
+
+
 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){
+// #1
+app.get('/', (req, res) => {
   res.render('index');
 });
 
-app.listen(8080, function(){
+// #2
+app.get('/menu', (req, res) => {
+  res.json(getMenu())
+});
+
+// #3
+app.get('/menu/:id', (req, res) => {
+  const result = getMenuItem(req.params.id);
+  if (result) {
+    res.json(result);
+  } else {
+    res.status(404).send('The food item with the given ID was not found');
+  }
+});
+
+
+// #4  Works
+app.post('/orders', (req, res) => {
+  res.json(createNewOrder(req.body));
+});
+
+
+// #5
+app.get('/orders', (req, res) => {
+  res.json(getOrder());
+});
+
+app.listen(8080, () => {
   console.log('Listening on port 8080');
 });
+// // #6
+// app.put('/orders/:id' , (req, res) => {
+//   const result = changeOrderItem(req.params.id);
+//   if (result) {
+//     res.json(result)
+//   }
+//   else {
+//      res.status(404).send('The food item with the given ID was not found');
+//   }
+// });
+
+
+
+// #7
+// app.delete('/orders/delete/:id', (req, res) => {
+//   const result = (deleteFoodItem(req.params.id));
+//   if (result) {
+//     res.json(result)
+//   }
+//   else {
+//     res.status(404).send('The food item with the given ID was not found');
+//   }
+// })
+
+
+// #8
+// app.delete('/orders/delete', (req, res) => {
+//   const result = deleteOrder();
+//   if (result) {
+//     res.json(result)
+//   }
+//   else {
+//     res.status(404).send('The order item was not found');
+//   }
+// })
+//
+//

src/components/App.js

@@ -1,19 +1,118 @@
 import React from 'react';
+import MenuComponent from "./MenuComponent";
+import Basket from './Basket';
 
 import '../styles/App.scss';
 
+
 class App extends React.Component {
-  constructor(){
+  constructor() {
     super();
+
+    this.state = {
+      menu : [],
+      currentOrder: [],
+      totalOrder: [],
+      totalPrice: 0,
+      showOrder: false
+    };
+    this.getFetch = this.getFetch.bind(this);
+    this.addOrder = this.addOrder.bind(this);
+    this.removeOrder = this.removeOrder.bind(this);
   }
 
-  render(){
-    return (
-      <div>
-        Delivereat app
-      </div>
-    )
+
+  componentDidMount() {
+    this.getFetch();
+  }
+
+
+  getFetch() {
+    const serverFetch = `http://localhost:8080/menu`
+
+    fetch(serverFetch)
+    .then(response => response.json())
+    .then(content => {
+      console.log("menu content",content)
+      this.setState( {
+        menu : content
+       } )
+     }
+    );
+  }
+
+  addOrder(order) {
+   const newTotalOrder = [...this.state.totalOrder, order];
+   const newTotalPrice = Number(this.state.totalPrice) + order.price;
+   console.log("newTotalPrice",newTotalPrice);
+   this.setState( {
+     currentOrder : order,
+     totalOrder : newTotalOrder,
+     totalPrice : newTotalPrice
+   },this.getFetch())
+  }
+
+
+
+  removeOrder(order) {
+   // console.log("order to remove",order);
+   const ordersBeforeRemoving = this.state.totalOrder;
+   const ordersAfterRemoving = ordersBeforeRemoving.filter( item => item.id !== order.id)
+   let priceAfterRemoving = 0;
+
+   for(let i = 0; i < ordersAfterRemoving.length; i++){
+     priceAfterRemoving = priceAfterRemoving + ordersAfterRemoving[i].price
+   }
+
+   this.setState( {
+     totalOrder : ordersAfterRemoving,
+     totalPrice : priceAfterRemoving
+   }, console.log(this.state.totalOrder) );
   }
+
+
+
+render() {
+  console.log('total order',this.state.totalOrder);
+  const orderNameArray = [];
+
+  let itemQuantity = 0;
+
+  for(let i = 0; i < this.state.totalOrder.length; i++) {
+    if(!orderNameArray.includes(this.state.totalOrder[i].name)) {
+      orderNameArray.push(this.state.totalOrder[i].name);
+    }
+
+    itemQuantity = itemQuantity+this.state.totalOrder[i].quantity;
+  }
+
+
+  return (
+
+    <div>
+      <header><h1 className="app_shoptitle">Siopa Caca Milis!</h1></header>
+      <MenuComponent
+        menu={this.state.menu}
+        addOrder={this.addOrder} />
+        <div className="app_basket">
+         <h2>Your Current Basket</h2>
+
+         <p>Your current order consists of:</p>
+         <ul>
+           <li>{orderNameArray + "  "}</li>
+           <li>Quantity is: {itemQuantity}</li>
+           <li>Your current total: £ {this.state.totalPrice} </li>
+         </ul>
+
+         <Basket
+          totalOrder={this.state.totalOrder}
+          totalPrice={this.state.totalPrice}
+          removeOrder={this.removeOrder} />
+      </div>
+    </div>
+
+  )
+}
 }
 
 export default App;