Merchant web interface to view all incoming orders

[zshanhui]

Some features that may be important and up for discussion:

• Realtime updating so Merchant does not have to refresh the page for new orders
• Orders should be ordered by DESC based on pickup time, with nearest pickup time being above pickup times later in the day
• Pickup time visible like: "In 15 minutes" (from current time)
• Large readable fonts that can be glanced and understood by busy staff

[Geno117]

You can assign this to me.
I'll be exploring some dashboard frameworks.
I'll work on the 4 pointers given first and see how it goes.

[zshanhui]

Great! like me know how it goes. I think there's a bunch of free ones like Bootstrap or AntD for admin dashboards.

[zshanhui]

How's things going? I updated the initial models and some helper methods as well as some empty @todos methods that might be related to what you're working on.

For real time updates, we could either use client-side polling or I could implement Server Side Events: https://alligator.io/nodejs/server-sent-events-build-realtime-app

Websockets is an option as well, but not sure we need something that complex and directional for this.

[Geno117]

Thanks @adrienshen. I'll upload something soon. Still rough.

[zshanhui]

Hey, no worries. Rough PRs are good, so can have some code to discuss and refine :)

[Geno117]

I'll work on creating components on the following:
1.DisplayOrder - display an order.
2.TimeForPickup - find pick up timing.
3.TimeLeft - computer time remaining.

Could you elaborate more on how I should get the orders?

[zshanhui]

@Geno117 I implemented most of that already. We get orders from the Merchant API using fetch. See the src/client/js/api/index.js file.

I have outlined a task in lots of detailed here: #26

You can try this first.

[Geno117]

I'm having issues viewing the merchant page

> sqc-nodejs-demo@0.0.0 dev /home/geno/hackathon/facebook-bizchat-hackathon
> webpack --watch --mode=development & NODE_ENV=development DEBUG=sqc_app* nodemon ./bin/www; kill $!

[nodemon] 2.0.2
[nodemon] to restart at any time, enter `rs`
[nodemon] watching dir(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node ./bin/www`
 
webpack is watching the files…

[nodemon] restarting due to changes...
[nodemon] restarting due to changes...
[nodemon] restarting due to changes...
[nodemon] restarting due to changes...
[nodemon] restarting due to changes...
Hash: 46fe1d7123d282d3f9a7
Version: webpack 4.41.5
Child
    Hash: 46fe1d7123d282d3f9a7
    Time: 9281ms
    Built at: 11/03/2020 7:07:51 pm
        Asset       Size  Chunks             Chunk Names
         0.js    810 KiB       0  [emitted]  
        1.css  243 bytes       1  [emitted]  
         1.js   23.1 KiB       1  [emitted]  
         2.js   1.17 KiB       2  [emitted]  
         3.js   1.26 KiB       3  [emitted]  
         4.js   9.62 KiB       4  [emitted]  
    index.css  506 bytes   index  [emitted]  index
     index.js   1.95 MiB   index  [emitted]  index
    Entrypoint index = index.css index.js
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {index} [built]
    [./node_modules/webpack/buildin/harmony-module.js] (webpack)/buildin/harmony-module.js 573 bytes {index} [built]
    [./src/client/css/Spinner.scss] 39 bytes {index} [built]
    [./src/client/css/pages/MerchantRoutes.scss] 39 bytes {1} [built]
    [./src/client/js/App.js] 1.77 KiB {index} [built]
    [./src/client/js/api/index.js] 5.39 KiB {1} [built]
    [./src/client/js/index.js] 600 bytes {index} [built]
    [./src/client/js/pages/About.js] 184 bytes {2} [built]
    [./src/client/js/pages/CustomerRoutes.js] 227 bytes {3} [built]
    [./src/client/js/pages/HomeLanding.js] 446 bytes {index} [built]
    [./src/client/js/pages/MerchantRoutes.js] 6.49 KiB {1} [built]
    [./src/client/js/pages/Receipts.js] 3.61 KiB {4} [built]
    [./src/shared/orders.js] 1.29 KiB {1} [built]
        + 448 hidden modules
    Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/sass-loader/dist/cjs.js!src/client/css/Spinner.scss:
        Entrypoint mini-css-extract-plugin = *
        [./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/client/css/Spinner.scss] 766 bytes {mini-css-extract-plugin} [built]
            + 1 hidden module
    Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/sass-loader/dist/cjs.js!src/client/css/pages/MerchantRoutes.scss:
        Entrypoint mini-css-extract-plugin = *
        [./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/client/css/pages/MerchantRoutes.scss] 494 bytes {mini-css-extract-plugin} [built]
            + 1 hidden module
[nodemon] restarting due to changes...
[nodemon] restarting due to changes...
[nodemon] restarting due to changes...
[nodemon] starting `node ./bin/www`
GET /about 200 80.356 ms - 1397
GET /dist/index.css 200 5.352 ms - 506
GET /dist/index.js 200 5.406 ms - 2048079
GET /dist/2.js 200 0.483 ms - 1197
GET /favicon.ico 200 1.605 ms - 1397
GET /merchant 304 1.379 ms - -
GET /dist/index.css 304 0.939 ms - -
GET /dist/index.js 304 0.894 ms - -
GET /dist/1.css 200 1.319 ms - 243
GET /dist/1.js 200 1.514 ms - 23627
GET /dist/0.js 200 1.575 ms - 829084
GET /favicon.ico 304 0.769 ms - -
GET /api/merchants/3/orders 304 27.900 ms - -
GET /merchant 304 1.652 ms - -
GET /dist/index.css 304 1.004 ms - -
GET /dist/index.js 304 0.883 ms - -
GET /dist/0.js 304 0.852 ms - -
GET /dist/1.css 304 0.844 ms - -
GET /dist/1.js 304 0.929 ms - -
GET /api/merchants/3/orders 304 3.128 ms - -
GET /favicon.ico 304 0.951 ms - -

[zshanhui]

@Geno117 Are you able to run it now?

Let me know if you still need help.

Doesn't look like there's any errors, so it could be that you need to setup the Postgres database and make sure that the API is returning the data.