From 95f7e5fa7533e763d19ef8eeb1ff821f0108320b Mon Sep 17 00:00:00 2001 From: Chris Phillips Date: Sat, 20 Oct 2018 15:29:47 +0100 Subject: [PATCH 1/9] added ...spread operator yo!! --- package-lock.json | 46 ++++++++++++---------------------------------- package.json | 20 +++++++++++++++++--- 2 files changed, 29 insertions(+), 37 deletions(-) diff --git a/package-lock.json b/package-lock.json index 167f7e9..5315dea 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "react-testing", + "name": "deliveat-with-db", "version": "1.0.0", "lockfileVersion": 1, "requires": true, @@ -1016,7 +1016,6 @@ "version": "6.24.1", "resolved": "https://registry.npmjs.org/babel-helper-bindify-decorators/-/babel-helper-bindify-decorators-6.24.1.tgz", "integrity": "sha1-FMGeXxQte0fxmlJDHlKxzLxAozA=", - "dev": true, "requires": { "babel-runtime": "^6.22.0", "babel-traverse": "^6.24.1", @@ -1027,7 +1026,6 @@ "version": "6.24.1", "resolved": "https://registry.npmjs.org/babel-helper-builder-binary-assignment-operator-visitor/-/babel-helper-builder-binary-assignment-operator-visitor-6.24.1.tgz", "integrity": "sha1-zORReto1b0IgvK6KAsKzRvmlZmQ=", - "dev": true, "requires": { "babel-helper-explode-assignable-expression": "^6.24.1", "babel-runtime": "^6.22.0", @@ -1073,7 +1071,6 @@ "version": "6.24.1", "resolved": "https://registry.npmjs.org/babel-helper-explode-assignable-expression/-/babel-helper-explode-assignable-expression-6.24.1.tgz", "integrity": "sha1-8luCz33BBDPFX3BZLVdGQArCLKo=", - "dev": true, "requires": { "babel-runtime": "^6.22.0", "babel-traverse": "^6.24.1", @@ -1084,7 +1081,6 @@ "version": "6.24.1", "resolved": "https://registry.npmjs.org/babel-helper-explode-class/-/babel-helper-explode-class-6.24.1.tgz", "integrity": "sha1-fcKjkQ3uAHBW4eMdZAztPVTqqes=", - "dev": true, "requires": { "babel-helper-bindify-decorators": "^6.24.1", "babel-runtime": "^6.22.0", @@ -1096,7 +1092,6 @@ "version": "6.24.1", "resolved": "https://registry.npmjs.org/babel-helper-function-name/-/babel-helper-function-name-6.24.1.tgz", "integrity": "sha1-00dbjAPtmCQqJbSDUasYOZ01gKk=", - "dev": true, "requires": { "babel-helper-get-function-arity": "^6.24.1", "babel-runtime": "^6.22.0", @@ -1109,7 +1104,6 @@ "version": "6.24.1", "resolved": "https://registry.npmjs.org/babel-helper-get-function-arity/-/babel-helper-get-function-arity-6.24.1.tgz", "integrity": "sha1-j3eCqpNAfEHTqlCQj4mwMbG2hT0=", - "dev": true, "requires": { "babel-runtime": "^6.22.0", "babel-types": "^6.24.1" @@ -1150,7 +1144,6 @@ "version": "6.24.1", "resolved": "https://registry.npmjs.org/babel-helper-remap-async-to-generator/-/babel-helper-remap-async-to-generator-6.24.1.tgz", "integrity": "sha1-XsWBgnrXI/7N04HxySg5BnbkVRs=", - "dev": true, "requires": { "babel-helper-function-name": "^6.24.1", "babel-runtime": "^6.22.0", @@ -1238,14 +1231,12 @@ "babel-plugin-syntax-async-functions": { "version": "6.13.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz", - "integrity": "sha1-ytnK0RkbWtY0vzCuCHI5HgZHvpU=", - "dev": true + "integrity": "sha1-ytnK0RkbWtY0vzCuCHI5HgZHvpU=" }, "babel-plugin-syntax-async-generators": { "version": "6.13.0", - "resolved": "https://registry.npmjs.org/babel-plugin-syntax-async-generators/-/babel-plugin-syntax-async-generators-6.13.0.tgz", - "integrity": "sha1-a8lj67FuzLrmuStZbrfzXDQqi5o=", - "dev": true + "resolved": "http://registry.npmjs.org/babel-plugin-syntax-async-generators/-/babel-plugin-syntax-async-generators-6.13.0.tgz", + "integrity": "sha1-a8lj67FuzLrmuStZbrfzXDQqi5o=" }, "babel-plugin-syntax-class-constructor-call": { "version": "6.18.0", @@ -1255,27 +1246,23 @@ }, "babel-plugin-syntax-class-properties": { "version": "6.13.0", - "resolved": "https://registry.npmjs.org/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz", - "integrity": "sha1-1+sjt5oxf4VDlixQW4J8fWysJ94=", - "dev": true + "resolved": "http://registry.npmjs.org/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz", + "integrity": "sha1-1+sjt5oxf4VDlixQW4J8fWysJ94=" }, "babel-plugin-syntax-decorators": { "version": "6.13.0", - "resolved": "https://registry.npmjs.org/babel-plugin-syntax-decorators/-/babel-plugin-syntax-decorators-6.13.0.tgz", - "integrity": "sha1-MSVjtNvePMgGzuPkFszurd0RrAs=", - "dev": true + "resolved": "http://registry.npmjs.org/babel-plugin-syntax-decorators/-/babel-plugin-syntax-decorators-6.13.0.tgz", + "integrity": "sha1-MSVjtNvePMgGzuPkFszurd0RrAs=" }, "babel-plugin-syntax-dynamic-import": { "version": "6.18.0", - "resolved": "https://registry.npmjs.org/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz", - "integrity": "sha1-jWomIpyDdFqZgqRBBRVyyqF5sdo=", - "dev": true + "resolved": "http://registry.npmjs.org/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz", + "integrity": "sha1-jWomIpyDdFqZgqRBBRVyyqF5sdo=" }, "babel-plugin-syntax-exponentiation-operator": { "version": "6.13.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz", - "integrity": "sha1-nufoM3KQ2pUoggGmpX9BcDF4MN4=", - "dev": true + "integrity": "sha1-nufoM3KQ2pUoggGmpX9BcDF4MN4=" }, "babel-plugin-syntax-export-extensions": { "version": "6.13.0", @@ -1303,14 +1290,12 @@ "babel-plugin-syntax-trailing-function-commas": { "version": "6.22.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-6.22.0.tgz", - "integrity": "sha1-ugNgk3+NBuQBgKQ/4NVhb/9TLPM=", - "dev": true + "integrity": "sha1-ugNgk3+NBuQBgKQ/4NVhb/9TLPM=" }, "babel-plugin-transform-async-generator-functions": { "version": "6.24.1", "resolved": "https://registry.npmjs.org/babel-plugin-transform-async-generator-functions/-/babel-plugin-transform-async-generator-functions-6.24.1.tgz", "integrity": "sha1-8FiQAUX9PpkHpt3yjaWfIVJYpds=", - "dev": true, "requires": { "babel-helper-remap-async-to-generator": "^6.24.1", "babel-plugin-syntax-async-generators": "^6.5.0", @@ -1321,7 +1306,6 @@ "version": "6.24.1", "resolved": "https://registry.npmjs.org/babel-plugin-transform-async-to-generator/-/babel-plugin-transform-async-to-generator-6.24.1.tgz", "integrity": "sha1-ZTbjeK/2yx1VF6wOQOs+n8jQh2E=", - "dev": true, "requires": { "babel-helper-remap-async-to-generator": "^6.24.1", "babel-plugin-syntax-async-functions": "^6.8.0", @@ -1343,7 +1327,6 @@ "version": "6.24.1", "resolved": "https://registry.npmjs.org/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.24.1.tgz", "integrity": "sha1-anl2PqYdM9NvN7YRqp3vgagbRqw=", - "dev": true, "requires": { "babel-helper-function-name": "^6.24.1", "babel-plugin-syntax-class-properties": "^6.8.0", @@ -1355,7 +1338,6 @@ "version": "6.24.1", "resolved": "https://registry.npmjs.org/babel-plugin-transform-decorators/-/babel-plugin-transform-decorators-6.24.1.tgz", "integrity": "sha1-eIAT2PjGtSIr33s0Q5Df13Vp4k0=", - "dev": true, "requires": { "babel-helper-explode-class": "^6.24.1", "babel-plugin-syntax-decorators": "^6.13.0", @@ -1602,7 +1584,6 @@ "version": "6.24.1", "resolved": "https://registry.npmjs.org/babel-plugin-transform-exponentiation-operator/-/babel-plugin-transform-exponentiation-operator-6.24.1.tgz", "integrity": "sha1-KrDJx/MJj6SJB3cruBP+QejeOg4=", - "dev": true, "requires": { "babel-helper-builder-binary-assignment-operator-visitor": "^6.24.1", "babel-plugin-syntax-exponentiation-operator": "^6.8.0", @@ -1633,7 +1614,6 @@ "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz", "integrity": "sha1-DzZpLVD+9rfi1LOsFHgTepY7ewY=", - "dev": true, "requires": { "babel-plugin-syntax-object-rest-spread": "^6.8.0", "babel-runtime": "^6.26.0" @@ -1815,7 +1795,6 @@ "version": "6.24.1", "resolved": "https://registry.npmjs.org/babel-preset-stage-2/-/babel-preset-stage-2-6.24.1.tgz", "integrity": "sha1-2eKWD7PXEYfw5k7sYrwHdnIZvcE=", - "dev": true, "requires": { "babel-plugin-syntax-dynamic-import": "^6.18.0", "babel-plugin-transform-class-properties": "^6.24.1", @@ -1827,7 +1806,6 @@ "version": "6.24.1", "resolved": "https://registry.npmjs.org/babel-preset-stage-3/-/babel-preset-stage-3-6.24.1.tgz", "integrity": "sha1-g2raCp56f6N8sTj7kyb4eTSkg5U=", - "dev": true, "requires": { "babel-plugin-syntax-trailing-function-commas": "^6.22.0", "babel-plugin-transform-async-generator-functions": "^6.24.1", diff --git a/package.json b/package.json index a03a776..014e494 100644 --- a/package.json +++ b/package.json @@ -6,17 +6,20 @@ "scripts": { "test": "jest", "dev": "webpack --mode development", - "build": "webpack --mode production" + "build": "webpack --mode production", + "start": "node server.js" }, "author": "", "license": "ISC", "babel": { "presets": [ "babel-preset-react", - "babel-preset-env" + "babel-preset-env", + "babel-preset-stage-2" ] }, "dependencies": { + "babel-preset-stage-2": "^6.24.1", "body-parser": "^1.18.3", "dotenv": "^6.1.0", "express": "^4.16.3", @@ -44,5 +47,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-with-db.git" + }, + "bugs": { + "url": "https://github.com/chrisphillers/delivereat-with-db/issues" + }, + "homepage": "https://github.com/chrisphillers/delivereat-with-db#readme" } From 3d978fec403d11045274ef3693b509d908a28dee Mon Sep 17 00:00:00 2001 From: Chris Phillips Date: Sun, 21 Oct 2018 00:10:31 +0100 Subject: [PATCH 2/9] First commit, menu display, basket functionality --- .gitignore | 1 + SQL rebuild.sql | 84 +++++++++++++++++++++ delivereat-db.code-workspace | 13 ++++ server.js | 60 +++++++++++++-- src/components/App.js | 65 +++++++++++++++-- src/components/Basket.js | 53 ++++++++++++++ src/components/Menu.js | 138 +++++++++++++++++++++++++++++++++++ static/styles.css | 6 ++ 8 files changed, 407 insertions(+), 13 deletions(-) create mode 100644 SQL rebuild.sql create mode 100644 delivereat-db.code-workspace create mode 100644 src/components/Basket.js create mode 100644 src/components/Menu.js diff --git a/.gitignore b/.gitignore index 9d67d47..8ab70e2 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,4 @@ /static/bundle.js /static/bundle.js.map .DS_Store +.env diff --git a/SQL rebuild.sql b/SQL rebuild.sql new file mode 100644 index 0000000..32236a9 --- /dev/null +++ b/SQL rebuild.sql @@ -0,0 +1,84 @@ +DROP TABLE anorder, menu, order_basket + +CREATE TABLE menu ( +id SERIAL, +name TEXT NOT NULL, +price numeric (4,2) default 0 NOT NULL, +quantity numeric (5) default 0 NOT NULL, +type TEXT NOT NULL, +image TEXT, +description TEXT, +more_info TEXT, +PRIMARY KEY (id) +); + +CREATE TABLE order_basket ( +id serial, +time TIMESTAMP default current_timestamp NOT NULL, +cust_name TEXT, +email TEXT NOT NULL, +cust_address TEXT NOT NULL, +postcode TEXT, +phone TEXT, +PRIMARY KEY (id) +); + +CREATE TABLE anorder ( +id serial, +menu_id INT NOT NULL, +quantity NUMERIC(5,0) NOT NULL, +order_basket_id INT NOT NULL, +PRIMARY KEY (id), +FOREIGN KEY (order_basket_id) REFERENCES order_basket (id), +FOREIGN KEY (menu_id) REFERENCES menu (id) +); + +-- INSERT INTO menu VALUES (1, 'Steak Hache', 11, 100, 'main', 'https://media.blueapron.com/recipes/2121/square_newsletter_images/1490637106-4-0003-6001/403_2PRE07-steak-frites-18311_WEB_SQ_hi_res.jpg'); +-- INSERT INTO menu VALUES (2, 'Raclette', 9, 100, 'main', 'https://www.lavenderandlovage.com/wp/wp-content/uploads/2015/02/Tartiflette-15-1024x711.jpg'); +-- INSERT INTO menu VALUES (3, 'Iles flottantes', 4, 100, 'dessert', 'https://www.cookomix.com/wp-content/uploads/2017/11/iles-flottantes-thermomix-800x600.jpg'); +-- INSERT INTO menu VALUES (4, 'Foie Gras', 10, 100, 'starter', 'https://s23991.pcdn.co/wp-content/uploads/2010/12/seared-foie-gras-recipe.jpg'); +-- ALTER SEQUENCE menu_id_seq RESTART WITH 5 INCREMENT BY 1; + + + + +INSERT INTO menu VALUES (0, 'SMASHED AVO, OUR WAY', 7, 100, 'brunch', 'https://media.blueapron.com/recipes/2121/square_newsletter_images/1490637106-4-0003-6001/403_2PRE07-steak-frites-18311_WEB_SQ_hi_res.jpg', 'Smashed avo on Dusty Knuckle seeded rye', 'Smashed avo on Dusty Knuckle seeded rye w/ walnutand sumac crumble, chilli oil and orange zest.', 'Add a poached egg or two £1.25 / £2.50 add hot smoked salmon £4.5'); +INSERT INTO menu VALUES (1, 'VEGAN DREAMING', 8.5, 100, 'brunch', 'https://www.lavenderandlovage.com/wp/wp-content/uploads/2015/02/Tartiflette-15-1024x711.jpg', 'Dusty Knuckle potato sour dough served w/ homemade beetroot relish', 'Dusty Knuckle potato sour dough served w/ homemade beetroot relish, avocado, confit mushrooms, watercress and mixed seed salad with homemade coriander and cashew cream.', 'Un vegan it…add 2 poached eggs £2.5 Seriously un vegan it! add bacon £2.5'); +INSERT INTO menu VALUES (2, 'OKONOMI-YUMMI!', 10.5, 100, 'brunch', 'https://media.blueapron.com/recipes/2121/square_newsletter_images/1490637106-4-0003-6001/403_2PRE07-steak-frites-18311_WEB_SQ_hi_res.jpg', 'Our take on the Japanese classic', 'Our take on the Japanese classic. Thick savoury Japanese pancake (gf) w/ avocado, a poached egg & all the trimmings...think tonkatsu sauce, homemade miso kewpie, bonito fish flakes, fried shallots.', 'Add crispy bacon or halloumi £2.5 Add hot smoked salmon £4.5 Make it veggie just ask ; )'); +INSERT INTO menu VALUES (3, 'CAULIFLOWER TOAST', 9.5, 100, 'brunch', 'https://media.blueapron.com/recipes/2121/square_newsletter_images/1490637106-4-0003-6001/403_2PRE07-steak-frites-18311_WEB_SQ_hi_res.jpg', 'Homemade roasted cauliflower bread (gf)', 'Homemade roasted cauliflower bread (gf) served w/ our fennel jam, avocado, a poached egg drizzled with toasted sunflower tahini.', 'Add halloumi or crispy bacon £2.5'); +INSERT INTO menu VALUES (4, 'AUTUMN HASH', 11.5, 100, 'brunch', 'https://media.blueapron.com/recipes/2121/square_newsletter_images/1490637106-4-0003-6001/403_2PRE07-steak-frites-18311_WEB_SQ_hi_res.jpg', 'Potato and smoked mozzarella pikelet (gf)', 'Potato and smoked mozzarella pikelet (gf) (think hash brown!) served w/ warm celeriac remoulade, bacon crumb, a fried egg and homemade red pepper ketchup', 'Add bacon or halloumi £2.5 Make it veggie...just ask:)'); +INSERT INTO menu VALUES (5, 'UP STREAM DREAM', 9.5, 100, 'brunch', 'https://media.blueapron.com/recipes/2121/square_newsletter_images/1490637106-4-0003-6001/403_2PRE07-steak-frites-18311_WEB_SQ_hi_res.jpg', 'Home hot smoked salmon w/ warm pearled spelt', 'Home hot smoked salmon w/ warm pearled spelt & honeyroasted pumpkin salad, salsa verde and a poached egg.', 'Add avocado £2.5'); +INSERT INTO menu VALUES (6, 'BACON BENEDICT', 9.5, 100, 'brunch', 'https://media.blueapron.com/recipes/2121/square_newsletter_images/1490637106-4-0003-6001/403_2PRE07-steak-frites-18311_WEB_SQ_hi_res.jpg', 'Maple glazed crispy bacon served on a brick lane bagel', 'Maple glazed crispy bacon served on a brick lane bagel w/ spinach, poached eggs and hollandaise sauce', 'Swap bacon for house hot smoked salmon £3 Add Avocado £2.5'); +INSERT INTO menu VALUES (7, 'CHILLI POACHED EGGS', 9.5, 100, 'brunch', 'https://media.blueapron.com/recipes/2121/square_newsletter_images/1490637106-4-0003-6001/403_2PRE07-steak-frites-18311_WEB_SQ_hi_res.jpg', 'Dusty Knuckle potato sour dough served w/ wilted spinach', 'Dusty Knuckle potato sour dough served w/ wilted spinach, whipped garlic yoghurt, poached eggs and chilli & dill butter.', 'Add bacon, halloumi or avocado £2.5'); +INSERT INTO menu VALUES (8, 'CLEMENTINE & CASHEW SMOOTHIE', 5.5, 100, 'drinks', 'https://media.blueapron.com/recipes/2121/square_newsletter_images/1490637106-4-0003-6001/403_2PRE07-steak-frites-18311_WEB_SQ_hi_res.jpg'); +INSERT INTO menu VALUES (9, 'SUPER GREEN SMOOTHIE', 5.5, 100, 'drinks', 'https://media.blueapron.com/recipes/2121/square_newsletter_images/1490637106-4-0003-6001/403_2PRE07-steak-frites-18311_WEB_SQ_hi_res.jpg', 'w/ avocado, spinach, banana, matcha, honey'); +INSERT INTO menu VALUES (10, 'MACADAMIA & BANANA SMOOTHIE', 5.5, 100, 'drinks', 'https://media.blueapron.com/recipes/2121/square_newsletter_images/1490637106-4-0003-6001/403_2PRE07-steak-frites-18311_WEB_SQ_hi_res.jpg'); +INSERT INTO menu VALUES (11, 'ESPRESSO SMOOTHIE', 4.5, 100, 'drinks', 'https://media.blueapron.com/recipes/2121/square_newsletter_images/1490637106-4-0003-6001/403_2PRE07-steak-frites-18311_WEB_SQ_hi_res.jpg', 'w/ espresso, banana, dates, milk'); +INSERT INTO menu VALUES (12, 'ORANGE JUICE', 3, 100, 'drinks', 'https://media.blueapron.com/recipes/2121/square_newsletter_images/1490637106-4-0003-6001/403_2PRE07-steak-frites-18311_WEB_SQ_hi_res.jpg'); +INSERT INTO menu VALUES (13, 'APPLE JUICE', 3, 100, 'drinks', 'https://media.blueapron.com/recipes/2121/square_newsletter_images/1490637106-4-0003-6001/403_2PRE07-steak-frites-18311_WEB_SQ_hi_res.jpg'); +INSERT INTO menu VALUES (14, 'CLEANSE', 3, 100, 'drinks', 'https://media.blueapron.com/recipes/2121/square_newsletter_images/1490637106-4-0003-6001/403_2PRE07-steak-frites-18311_WEB_SQ_hi_res.jpg', 'carrot, lemon and ginger'); +INSERT INTO menu VALUES (15, 'FUEL', 3, 100, 'drinks', 'https://media.blueapron.com/recipes/2121/square_newsletter_images/1490637106-4-0003-6001/403_2PRE07-steak-frites-18311_WEB_SQ_hi_res.jpg', 'beetroot, apple and celery'); +INSERT INTO menu VALUES (16, 'BLONDIE', 3.5, 100, 'dessert', 'https://media.blueapron.com/recipes/2121/square_newsletter_images/1490637106-4-0003-6001/403_2PRE07-steak-frites-18311_WEB_SQ_hi_res.jpg', 'Matcha and White Chocolate' ); +INSERT INTO menu VALUES (16, 'BROWNIE', 3.5, 100, 'dessert', 'https://media.blueapron.com/recipes/2121/square_newsletter_images/1490637106-4-0003-6001/403_2PRE07-steak-frites-18311_WEB_SQ_hi_res.jpg'); + + + + + + +ALTER SEQUENCE menu_id_seq RESTART WITH 5 INCREMENT BY 1; + +INSERT INTO order_basket VALUES (1, '2011-05-16 15:36:38'); +INSERT INTO order_basket VALUES (2, '2011-05-16 15:36:38'); +INSERT INTO order_basket VALUES (3, '2011-05-16 15:36:38'); +ALTER SEQUENCE order_basket_id_seq RESTART WITH 4 INCREMENT BY 1; + +INSERT INTO anorder VALUES (1, 2, 1, 1); +INSERT INTO anorder VALUES (2, 4, 3, 1); +INSERT INTO anorder VALUES (3, 3, 2, 2); +INSERT INTO anorder VALUES (4, 1, 2, 3); +ALTER SEQUENCE anorder_id_seq RESTART WITH 5 INCREMENT BY 1; + + + + diff --git a/delivereat-db.code-workspace b/delivereat-db.code-workspace new file mode 100644 index 0000000..b077a76 --- /dev/null +++ b/delivereat-db.code-workspace @@ -0,0 +1,13 @@ +{ + "folders": [ + { + "path": "." + }, + { + "path": "B:\\MacDocs\\delivereat" + } + ], + "settings": { + "liveServer.settings.multiRootWorkspaceName": "delivereat-with-db" + } +} \ No newline at end of file diff --git a/server.js b/server.js index 89ca1de..cfdc2f1 100644 --- a/server.js +++ b/server.js @@ -1,23 +1,67 @@ -const express = require('express'); +require('dotenv').config(); + const bodyParser = require('body-parser'); +const pgp = require('pg-promise')(); +const express = require('express'); const app = express(); +const db = pgp({ + host: 'localhost', + port: 5432, + database: process.env.DB_NAME, + user: process.env.DB_USERNAME, + password: process.env.DB_PASSWORD +}); 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){ + db.any('SELECT * FROM menu') + .then(function(data){ + res.json(data) + }) + .catch(function(error){ + res.json({error:error.message}) + }) +}) + +app.post("/api/order",(req,res) => { + const {items, name, email, address, postcode, phone} = req.body; + db.one("INSERT INTO order_basket(cust_name, cust_address, email, postcode, phone) VALUES ($1, $2, $3, $4, $5) RETURNING id", [name, address, email, postcode, phone]).then( + result => { + const orderId = result.id; + Promise.all(items.map(item => { + return db.none( + "INSERT INTO anorder (menu_id, order_basket_id, quantity) VALUES ($1, $2, $3)", + [item.menuItemId, orderId, item.quantity] + + ) + }) + ) + .then(() => orderId) + } + + ) + .then(orderId => { + console.log('catch 3'); + res.json({orderId: orderId, success: true, message: 'Listen out for the doorbell'}) + }) + .catch(error => { + console.log(error); + res.json({error: error.message}) + }); +}); + + + + + app.listen(8080, function(){ console.log('Listening on port 8080'); }); diff --git a/src/components/App.js b/src/components/App.js index 2ba4c77..0cbd3d8 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -1,18 +1,73 @@ -import React from 'react'; +import React from "react"; +import Menu from "./Menu"; -import '../styles/App.scss'; +import "../styles/App.scss"; class App extends React.Component { - constructor(){ + constructor() { super(); + + this.state = { + menuItems: [], + customerDetails: { + name: "Chris", + address: "Dekker House", + postcode: "E8 3FS", + email: "chrisphillers@gmail.com", + phone: "07714205581" + } + }; + this.fetchMenuItems = this.fetchMenuItems.bind(this); + this.receiveOrder = this.receiveOrder.bind(this); + } + + componentDidMount() { + this.fetchMenuItems(); + this.postOrder(); + } + + receiveOrder(orderBasket) { + const finalOrder = { + items: orderBasket, + ...this.state.customerDetails + }; + console.log({ finalOrder }); + this.postOrder(finalOrder); + } + + fetchMenuItems() { + fetch("/api/menu") + .then(res => res.json()) + .then(body => { + this.setState({ menuItems: body }); + console.log(this.state.menuItems); + }); + } + + postOrder(currentOrder) { + fetch("/api/order", { + method: "post", + body: JSON.stringify(currentOrder), + headers: { + "Content-Type": "application/json" + } + }) + .then(function(response) { + return response.json(); + }) + .then(data => { + console.log(data); + // handle response + }); } - render(){ + render() { return (
Delivereat app +
- ) + ); } } diff --git a/src/components/Basket.js b/src/components/Basket.js new file mode 100644 index 0000000..f8870a0 --- /dev/null +++ b/src/components/Basket.js @@ -0,0 +1,53 @@ +import React from "react"; + +class Basket extends React.Component { + constructor() { + super(); + this.state = { order: {} }; + } + + render() { + console.log(this.props.basket); + + return ( +
+
    + {this.props.basket.map(item => { + return ( +
  • +

    {item.menuItemId}

    + + + +

    {item.quantity}

    + +     + + {/* {this.props.menu[item.menuItemId].name} + {this.props.menu[item.menuItemId].price * item.quantity} */} +
    • + ); + })} +
+ +
+ ); + } +} + +export default Basket; diff --git a/src/components/Menu.js b/src/components/Menu.js new file mode 100644 index 0000000..45a1ae4 --- /dev/null +++ b/src/components/Menu.js @@ -0,0 +1,138 @@ +import React from "react"; +import Basket from "./Basket"; + +class Menu extends React.Component { + constructor() { + super(); + this.state = { basket: [] }; + this.getCourse = this.getCourse.bind(this); + this.basketReceiveRemove = this.basketReceiveRemove.bind(this); + this.basketReceiveAdd = this.basketReceiveAdd.bind(this); + this.calculate = this.calculate.bind(this); + } + + basketReceiveAdd(id) { + const existingItem = this.state.basket.find(element => { + console.log( + "addtihs", + element.menuItemId === id ? element.menuItemId : "nope" + ); + return element.menuItemId === id; + }); + if (existingItem) { + this.setState( + { + basket: this.state.basket.map(dish => { + if (dish == existingItem) { + return Object.assign({}, dish, { quantity: dish.quantity + 1 }); + } else { + return dish; + } + }) + }, + () => console.log(this.state.basket) + ); + } else { + const item = { menuItemId: id, quantity: 1 }; + this.setState( + { + basket: this.state.basket.concat([item]) + }, + () => console.log(this.state.basket) + ); + } + this.calculate(); + } + + basketReceiveRemove(id) { + const existingItem = this.state.basket.find(element => { + return element.menuItemId === id; + }); + if (existingItem) { + this.setState( + { + basket: this.state.basket.map(dish => { + if (dish == existingItem) { + return Object.assign({}, dish, { quantity: dish.quantity - 1 }); + } else { + return dish; + } + }) + }, + () => console.log(this.state.basket) + ); + } else { + const item = { menuItemId: id, quantity: 0 }; + this.setState( + { + basket: this.state.basket.concat([item]) + }, + () => console.log(this.state.basket) + ); + } + this.calculate(); + } + + // + + // basketSend(){ + + // } + + getCourse(course) { + return this.props.menu + .filter(item => item.type === course) + .map(foodItem => { + return ( +
  • +

    {foodItem.name}

    + + +
    • + ); + }); + } + + calculate() { + let delivery = 5; + let calc = this.state.basket.map(order => { + console.log({ order }); + console.log("woohooh", this.props.menu[order.menuItemId]); + return ( + parseInt(this.props.menu[order.menuItemId - 1].price, 10) * + order.quantity + ); + }); + + console.log(calc); + } + + render() { + return ( +
    +
      +

      Brunch

      + {this.getCourse("brunch")} + +

      Drinks

      + {this.getCourse("drinks")} + +

      Dessert

      + {this.getCourse("dessert")} +
    + + +
    + ); + } +} + +export default Menu; diff --git a/static/styles.css b/static/styles.css index 293d3b1..b1e6f5b 100644 --- a/static/styles.css +++ b/static/styles.css @@ -1,3 +1,9 @@ body { margin: 0; } + +img { + width: 400px; + height: 400px; + object-fit: cover; +} \ No newline at end of file From f4b3c6c02a0296879434797f612d79974677a5fc Mon Sep 17 00:00:00 2001 From: Chris Phillips Date: Sun, 21 Oct 2018 14:03:50 +0100 Subject: [PATCH 3/9] menu layout --- src/components/App.js | 8 ++++++-- src/components/Basket.js | 14 ++++++++------ src/components/Menu.js | 40 +++++++++++++++++++++++++++++++++------- src/styles/App.scss | 24 +++++++++++++++++++++++- static/styles.css | 4 ++-- views/index.hbs | 25 ++++++++++++++----------- 6 files changed, 86 insertions(+), 29 deletions(-) diff --git a/src/components/App.js b/src/components/App.js index 0cbd3d8..08bf376 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -23,7 +23,7 @@ class App extends React.Component { componentDidMount() { this.fetchMenuItems(); - this.postOrder(); + // this.postOrder(); } receiveOrder(orderBasket) { @@ -64,7 +64,11 @@ class App extends React.Component { render() { return (
    - Delivereat app +
    +
    + +
    +
    ); diff --git a/src/components/Basket.js b/src/components/Basket.js index f8870a0..1e66fec 100644 --- a/src/components/Basket.js +++ b/src/components/Basket.js @@ -1,5 +1,7 @@ import React from "react"; +import "../styles/Basket.scss"; + class Basket extends React.Component { constructor() { super(); @@ -10,12 +12,12 @@ class Basket extends React.Component { console.log(this.props.basket); return ( -
    -
      +
      +
        {this.props.basket.map(item => { return (
      • -

        {item.menuItemId}

        + {/*

        {item.menuItemId}

        */} - {/* {this.props.menu[item.menuItemId].name} - {this.props.menu[item.menuItemId].price * item.quantity} */} + {this.props.menu[item.menuItemId].name} + {this.props.menu[item.menuItemId].price * item.quantity}
        • ); })} diff --git a/src/components/Menu.js b/src/components/Menu.js index 45a1ae4..2c463f2 100644 --- a/src/components/Menu.js +++ b/src/components/Menu.js @@ -1,6 +1,8 @@ import React from "react"; import Basket from "./Basket"; +import "../styles/Menu.scss"; + class Menu extends React.Component { constructor() { super(); @@ -83,13 +85,38 @@ class Menu extends React.Component { return this.props.menu .filter(item => item.type === course) .map(foodItem => { + // console.log(this.state.basket); + // let counter = typeof this.state.basket[foodItem.id].quantity === undefined ? 0 : this.state.basket[foodItem.id].quantity; + // const basketQuant = + + // let counter = + // this.state.basket[0].quantity === undefined + // ? 0 + // : this.state.basket[0].quantity; + // console.log(counter); + // foodItem.id + // const inBasket = order.items.length && order.items.map(item => item[0]).includes(menuItem.id); + // const count = inBasket ? order.items.filter(item => item[0] === menuItem.id)[0][1] : 0; + return (
      • -

        {foodItem.name}

        - - +
        +
        +

        {foodItem.name}

        +
        + + {/*

        {counter}

        */} + +
        +
        +

        {foodItem.headline}

        +

        {`£${foodItem.price}`}

        +
        +
        • ); }); @@ -101,8 +128,7 @@ class Menu extends React.Component { console.log({ order }); console.log("woohooh", this.props.menu[order.menuItemId]); return ( - parseInt(this.props.menu[order.menuItemId - 1].price, 10) * - order.quantity + parseInt(this.props.menu[order.menuItemId].price, 10) * order.quantity ); }); diff --git a/src/styles/App.scss b/src/styles/App.scss index 0bdf5c0..f052c12 100644 --- a/src/styles/App.scss +++ b/src/styles/App.scss @@ -1,3 +1,25 @@ +@import "defaults"; + body { - background-color: Cornsilk; + margin: 0; +} + +#root { + width: 100%; +} + +.header { + height: 30vh; + background-image: url("/static/img/header.jpg"); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + position: relative; + + &__logo { + position: absolute; + top: 0; + width: 15vh; + margin: 0; + } } diff --git a/static/styles.css b/static/styles.css index b1e6f5b..cdb90c5 100644 --- a/static/styles.css +++ b/static/styles.css @@ -2,8 +2,8 @@ body { margin: 0; } -img { +/* img { width: 400px; height: 400px; object-fit: cover; -} \ No newline at end of file +} */ diff --git a/views/index.hbs b/views/index.hbs index 8fdb420..69c73ab 100644 --- a/views/index.hbs +++ b/views/index.hbs @@ -1,13 +1,16 @@ - - Let's get some food - - - -
        - -
        - - - + + + Brunswick East Coffee + + + + +
        + +
        + + + + \ No newline at end of file From 1316e32d767963486b31b1cf701b6db413fd8ea6 Mon Sep 17 00:00:00 2001 From: Chris Phillips Date: Sun, 21 Oct 2018 14:11:37 +0100 Subject: [PATCH 4/9] menu layout --- src/components/Menu.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/components/Menu.js b/src/components/Menu.js index 2c463f2..64777e7 100644 --- a/src/components/Menu.js +++ b/src/components/Menu.js @@ -104,6 +104,19 @@ class Menu extends React.Component {

        {foodItem.name}

        +
        this.basketReceiveAdd(foodItem.id)} + class="menuitems__minus" + > + – +
        +
        this.basketReceiveAdd(foodItem.id)} + class="menuitems__plus" + > + + +
        + @@ -113,7 +126,7 @@ class Menu extends React.Component {
        -

        {foodItem.headline}

        +

        {foodItem.headline}

        {`£${foodItem.price}`}

      From c0d3096c1053e8ee6d7624df46a2c3764621f5fd Mon Sep 17 00:00:00 2001 From: Chris Phillips Date: Sun, 21 Oct 2018 23:11:39 +0100 Subject: [PATCH 5/9] modal functionality, basket/more info --- delivereat-db.code-workspace | 27 +++++----- package-lock.json | 41 +++++++++++---- package.json | 1 + src/components/App.js | 24 ++++++--- src/components/Basket.js | 92 +++++++++++++++++++++------------- src/components/Menu.js | 97 +++++++++++++++++++++--------------- src/styles/App.scss | 9 +--- 7 files changed, 177 insertions(+), 114 deletions(-) diff --git a/delivereat-db.code-workspace b/delivereat-db.code-workspace index b077a76..ee986b8 100644 --- a/delivereat-db.code-workspace +++ b/delivereat-db.code-workspace @@ -1,13 +1,16 @@ { - "folders": [ - { - "path": "." - }, - { - "path": "B:\\MacDocs\\delivereat" - } - ], - "settings": { - "liveServer.settings.multiRootWorkspaceName": "delivereat-with-db" - } -} \ No newline at end of file + "folders": [ + { + "path": "." + }, + { + "path": "B:\\MacDocs\\delivereat" + }, + { + "path": "B:\\MacDocs\\react-cinema" + } + ], + "settings": { + "liveServer.settings.multiRootWorkspaceName": "delivereat-with-db" + } +} diff --git a/package-lock.json b/package-lock.json index 5315dea..1023bdb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1235,7 +1235,7 @@ }, "babel-plugin-syntax-async-generators": { "version": "6.13.0", - "resolved": "http://registry.npmjs.org/babel-plugin-syntax-async-generators/-/babel-plugin-syntax-async-generators-6.13.0.tgz", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-async-generators/-/babel-plugin-syntax-async-generators-6.13.0.tgz", "integrity": "sha1-a8lj67FuzLrmuStZbrfzXDQqi5o=" }, "babel-plugin-syntax-class-constructor-call": { @@ -1246,17 +1246,17 @@ }, "babel-plugin-syntax-class-properties": { "version": "6.13.0", - "resolved": "http://registry.npmjs.org/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz", "integrity": "sha1-1+sjt5oxf4VDlixQW4J8fWysJ94=" }, "babel-plugin-syntax-decorators": { "version": "6.13.0", - "resolved": "http://registry.npmjs.org/babel-plugin-syntax-decorators/-/babel-plugin-syntax-decorators-6.13.0.tgz", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-decorators/-/babel-plugin-syntax-decorators-6.13.0.tgz", "integrity": "sha1-MSVjtNvePMgGzuPkFszurd0RrAs=" }, "babel-plugin-syntax-dynamic-import": { "version": "6.18.0", - "resolved": "http://registry.npmjs.org/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz", "integrity": "sha1-jWomIpyDdFqZgqRBBRVyyqF5sdo=" }, "babel-plugin-syntax-exponentiation-operator": { @@ -2661,6 +2661,11 @@ } } }, + "classnames": { + "version": "2.2.6", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", + "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" + }, "cli-boxes": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-1.0.0.tgz", @@ -4781,11 +4786,13 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true + "bundled": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -4798,15 +4805,18 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "concat-map": { "version": "0.0.1", - "bundled": true + "bundled": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -4909,7 +4919,8 @@ }, "inherits": { "version": "2.0.3", - "bundled": true + "bundled": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -4919,6 +4930,7 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -4931,17 +4943,20 @@ "minimatch": { "version": "3.0.4", "bundled": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true + "bundled": true, + "optional": true }, "minipass": { "version": "2.2.4", "bundled": true, + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -4958,6 +4973,7 @@ "mkdirp": { "version": "0.5.1", "bundled": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -5030,7 +5046,8 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -5040,6 +5057,7 @@ "once": { "version": "1.4.0", "bundled": true, + "optional": true, "requires": { "wrappy": "1" } @@ -5145,6 +5163,7 @@ "string-width": { "version": "1.0.2", "bundled": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", diff --git a/package.json b/package.json index 014e494..8f6f95e 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "dependencies": { "babel-preset-stage-2": "^6.24.1", "body-parser": "^1.18.3", + "classnames": "^2.2.6", "dotenv": "^6.1.0", "express": "^4.16.3", "hbs": "^4.0.1", diff --git a/src/components/App.js b/src/components/App.js index 08bf376..891eb48 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -1,5 +1,6 @@ import React from "react"; import Menu from "./Menu"; +import Nav from "./Nav"; import "../styles/App.scss"; @@ -15,15 +16,26 @@ class App extends React.Component { postcode: "E8 3FS", email: "chrisphillers@gmail.com", phone: "07714205581" - } + }, + showBasket: false }; this.fetchMenuItems = this.fetchMenuItems.bind(this); this.receiveOrder = this.receiveOrder.bind(this); + this.closeBasket = this.closeBasket.bind(this); + this.openBasket = this.openBasket.bind(this); } componentDidMount() { this.fetchMenuItems(); - // this.postOrder(); + + } + + openBasket(){ + this.setState({showBasket: true}); + } + + closeBasket() { + this.setState({ showBasket: false }); } receiveOrder(orderBasket) { @@ -35,6 +47,7 @@ class App extends React.Component { this.postOrder(finalOrder); } + fetchMenuItems() { fetch("/api/menu") .then(res => res.json()) @@ -64,12 +77,11 @@ class App extends React.Component { render() { return (
      +
      + + ); + })} +
    + +

    Delivery Charge

    +

    £2.5

    +     + +

    Order Total

    + {/*

    {this.props.calculate}

    */} + {/*

    {this.props.menu[item.menuItemId].price * item.quantity}

    */} +     + +
    + ); } } diff --git a/src/components/Menu.js b/src/components/Menu.js index 64777e7..0a393b2 100644 --- a/src/components/Menu.js +++ b/src/components/Menu.js @@ -1,5 +1,6 @@ import React from "react"; import Basket from "./Basket"; +import MoreInfo from "./MoreInfo"; import "../styles/Menu.scss"; @@ -75,11 +76,6 @@ class Menu extends React.Component { this.calculate(); } - // - - // basketSend(){ - - // } getCourse(course) { return this.props.menu @@ -88,12 +84,12 @@ class Menu extends React.Component { // console.log(this.state.basket); // let counter = typeof this.state.basket[foodItem.id].quantity === undefined ? 0 : this.state.basket[foodItem.id].quantity; // const basketQuant = + // let counter = typeof this.state.basket[foodItem.id] === undefined ? 0: this.state.basket[0].quantity; + let counter = typeof this.state.basket[foodItem.id] === 'undefined' ? 0: this.state.basket[foodItem.id].quantity; + // console.log(this.state.basket[0].quantity); - // let counter = - // this.state.basket[0].quantity === undefined - // ? 0 - // : this.state.basket[0].quantity; - // console.log(counter); + + console.log(counter) // foodItem.id // const inBasket = order.items.length && order.items.map(item => item[0]).includes(menuItem.id); // const count = inBasket ? order.items.filter(item => item[0] === menuItem.id)[0][1] : 0; @@ -102,31 +98,27 @@ class Menu extends React.Component {
  • -

    {foodItem.name}

    -
    -
    this.basketReceiveAdd(foodItem.id)} - class="menuitems__minus" - > - – -
    -
    {foodItem.name} +
    + +
    - - - {/*

    {counter}

    */} -
    -

    {foodItem.headline}

    +

    {foodItem.headline}

    {`£${foodItem.price}`}

    @@ -135,39 +127,62 @@ class Menu extends React.Component { }); } - calculate() { - let delivery = 5; - let calc = this.state.basket.map(order => { - console.log({ order }); - console.log("woohooh", this.props.menu[order.menuItemId]); - return ( - parseInt(this.props.menu[order.menuItemId].price, 10) * order.quantity - ); - }); + // calculate() { + // let delivery = 2.5; + // let calc = this.state.basket.map(order => { + // console.log("hi there", { order }); + // console.log(this.props.menu[order.menuItemId]); + // // return parseInt(this.props.menu[order.menuItemId].price, 10 * order.quantity); + // return this.props.menu[order.menuItemId].price * order.quantity; + // }); + // let calcTotal = calc.reduce((total, amount) => total + amount); - console.log(calc); + // // + + // console.log("calculate", calc, calcTotal); + // } + + calculate() { + const menu = this.props.menu; + console.log(menu); + const calcTotal = this.state.basket + .map( + order => + menu.find(menuItem => menuItem.id === order[0]).price * order[1] + ) + .reduce((total, amount) => total + amount); + return calcTotal; + console.log(calcTotal); } render() { return (
      -

      Brunch

      +

      BRUNCH

      {this.getCourse("brunch")} -

      Drinks

      +

      DRINKS

      {this.getCourse("drinks")} -

      Dessert

      +

      DESSERT

      {this.getCourse("dessert")}
    - + +
    ); diff --git a/src/styles/App.scss b/src/styles/App.scss index f052c12..ef0548f 100644 --- a/src/styles/App.scss +++ b/src/styles/App.scss @@ -14,12 +14,5 @@ body { background-position: center; background-repeat: no-repeat; background-size: cover; - position: relative; - - &__logo { - position: absolute; - top: 0; - width: 15vh; - margin: 0; - } + // position: relative; } From d3e0e27f70de138bfac50632c7b032a17808c31e Mon Sep 17 00:00:00 2001 From: Chris Phillips Date: Mon, 22 Oct 2018 22:49:40 +0100 Subject: [PATCH 6/9] Responsive styling, basket nav state, layout fixes --- server.js | 12 +++- src/components/App.js | 31 ++++++++++- src/components/Basket.js | 2 + src/components/Menu.js | 69 +++++++++++------------ src/components/MoreInfo.js | 23 ++++++++ src/components/Nav.js | 28 ++++++++++ src/components/Oops.js | 20 +++++++ src/styles/Basket.scss | 31 +++++++++++ src/styles/Defaults.scss | 109 +++++++++++++++++++++++++++++++++++++ src/styles/Menu.scss | 39 +++++++++++++ src/styles/MoreInfo.scss | 9 +++ src/styles/Nav.scss | 18 ++++++ src/styles/Oops.scss | 1 + static/img/basket.png | Bin 0 -> 2326 bytes static/img/basket_full.png | Bin 0 -> 6289 bytes static/img/header.jpg | Bin 0 -> 83063 bytes static/img/header2.jpg | Bin 0 -> 25438 bytes static/img/logo.png | Bin 0 -> 40775 bytes static/img/oops.gif | Bin 0 -> 794477 bytes views/404.jade | 5 ++ 20 files changed, 358 insertions(+), 39 deletions(-) create mode 100644 src/components/MoreInfo.js create mode 100644 src/components/Nav.js create mode 100644 src/components/Oops.js create mode 100644 src/styles/Basket.scss create mode 100644 src/styles/Defaults.scss create mode 100644 src/styles/Menu.scss create mode 100644 src/styles/MoreInfo.scss create mode 100644 src/styles/Nav.scss create mode 100644 src/styles/Oops.scss create mode 100644 static/img/basket.png create mode 100644 static/img/basket_full.png create mode 100644 static/img/header.jpg create mode 100644 static/img/header2.jpg create mode 100644 static/img/logo.png create mode 100644 static/img/oops.gif create mode 100644 views/404.jade diff --git a/server.js b/server.js index cfdc2f1..91fa77c 100644 --- a/server.js +++ b/server.js @@ -31,6 +31,7 @@ app.get('/api/menu', function(req, res){ }) }) + app.post("/api/order",(req,res) => { const {items, name, email, address, postcode, phone} = req.body; db.one("INSERT INTO order_basket(cust_name, cust_address, email, postcode, phone) VALUES ($1, $2, $3, $4, $5) RETURNING id", [name, address, email, postcode, phone]).then( @@ -50,7 +51,7 @@ app.post("/api/order",(req,res) => { ) .then(orderId => { console.log('catch 3'); - res.json({orderId: orderId, success: true, message: 'Listen out for the doorbell'}) + res.json({orderId: orderId, success: true, message: 'Brace yourself for the Kale'}) }) .catch(error => { console.log(error); @@ -58,7 +59,14 @@ app.post("/api/order",(req,res) => { }); }); - +app.use(function(req, res, next) { + return res.status(404).send({ message: `Route ${req.url} not found.` }); +}); + // Handle 404 +// app.use(function(req, res) { +// res.status(400); +// res.render('404.jade', {title: '404: File Not Found'}); +// }); diff --git a/src/components/App.js b/src/components/App.js index 891eb48..b4a1264 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -1,8 +1,10 @@ import React from "react"; import Menu from "./Menu"; import Nav from "./Nav"; +import Oops from "./Oops"; import "../styles/App.scss"; +// import { Route, Switch, BrowserRouter } from 'react-router-dom'; class App extends React.Component { constructor() { @@ -17,19 +19,29 @@ class App extends React.Component { email: "chrisphillers@gmail.com", phone: "07714205581" }, - showBasket: false + showBasket: false, + basketStatus: false }; this.fetchMenuItems = this.fetchMenuItems.bind(this); this.receiveOrder = this.receiveOrder.bind(this); this.closeBasket = this.closeBasket.bind(this); this.openBasket = this.openBasket.bind(this); + this.basketStatus = this.basketStatus.bind(this); } + + + + componentDidMount() { this.fetchMenuItems(); } + basketStatus(){ + this.setState({basketStatus: true}); + } + openBasket(){ this.setState({showBasket: true}); } @@ -47,6 +59,8 @@ class App extends React.Component { this.postOrder(finalOrder); } + + fetchMenuItems() { fetch("/api/menu") @@ -70,18 +84,29 @@ class App extends React.Component { }) .then(data => { console.log(data); + alert("15 mins to Kale o'clock!") // handle response }); } render() { + + + return (
    -