upgrade a bunch of things and deal with the wreckage

Author: leprechaun

docker-compose.yml

@@ -2,7 +2,7 @@ version: "3"
 
 services:
   bare: &app
-    image: node:10
+    image: node:16
     command: bash
     working_dir: /app/
     command: yarn dev

package.json

@@ -2,7 +2,6 @@
   "name": "snacker-tracker-ui",
   "version": "0.1.0",
   "private": true,
-  "dependencies": {},
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
@@ -31,14 +30,15 @@
     "d3": "^5.15.0",
     "d3-tip": "^0.9.1",
     "dayjs": "^1.8.16",
-    "react": "^16.11.0",
+    "react": "^18.2.0",
     "react-bootstrap": "^1.0.0-beta.16",
     "react-charts": "^2.0.0-beta.4",
     "react-dom": "^16.11.0",
     "react-router-bootstrap": "^0.25.0",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "^4.0.2",
+    "react-scripts": "^5.0.1",
     "reactstrap": "^8.2.0",
-    "source-map-explorer": "^2.1.2"
+    "source-map-explorer": "^2.1.2",
+    "url": "^0.11.0"
   }
 }

src/components/NavBar.js

@@ -4,10 +4,10 @@ import Nav from 'react-bootstrap/Nav'
 import Navbar from 'react-bootstrap/Navbar'
 import NavItem from 'react-bootstrap/NavItem'
 import Button from 'react-bootstrap/Button'
-//import Form from 'react-bootstrap/Form'
-//import FormControl from 'react-bootstrap/FormControl'
 import Dropdown from 'react-bootstrap/Dropdown'
 
+import { LocationContext } from '../lib/LocationContext'
+
 
 import { useAuth0 } from "../react-auth0-spa";
 
@@ -23,23 +23,6 @@ const NavBar = () => {
     await getTokenSilently()
   })()
 
-  /*
-  const handleSubmit = event => {
-    alert(JSON.stringify(event))
-    console.log(event, 'this triggered')
-    event.stopPropagation()
-    event.preventDefault()
-    const form = event.currentTarget;
-
-    console.log(form)
-  };
-
-  <Form inline onSubmit={handleSubmit}>
-    <FormControl onChange={updateSearch} type="text" placeholder="Search" className="mr-sm-2" />
-    <Button type="submit">Search</Button>
-  </Form>
-  */
-
   return (
     <Navbar bg="light" expand="lg">
       <Navbar.Brand to="/" as={NavLink}>Snacker-Tracker UI</Navbar.Brand>
@@ -49,28 +32,24 @@ const NavBar = () => {
           <Nav.Link to="/top-scans" as={NavLink}>Top Scans</Nav.Link>
           <Nav.Link to="/last-scans" as={NavLink}>Last Scans</Nav.Link>
           <Nav.Link to="/categories" as={NavLink}>Categories</Nav.Link>
+          <Dropdown drop="down">
+              <LocationContext.Consumer>
+                  {location => (
+                    <Dropdown.Toggle variant="light" id="dropdown-basic">
+                        {location}
+                    </Dropdown.Toggle>
+                  )}
+            </LocationContext.Consumer>
+
+            <Dropdown.Menu>
+                <Dropdown.Item to="?location=thailand:bangkok" as={NavLink}>Thailand</Dropdown.Item>
+                <Dropdown.Item to="?location=singapore" as={NavLink}>Singapore</Dropdown.Item>
+            </Dropdown.Menu>
+          </Dropdown>
         </Nav>
 
         {!isAuthenticated && (
           <NavItem>
-            <Button
-              id="qsLoginBtn"
-              color="primary"
-              className="btn-margin"
-              onClick={() => loginWithRedirect({connection: 'line'})}
-            >
-              Log in (line)
-            </Button>
-
-            <Button
-              id="qsLoginBtn"
-              color="primary"
-              className="btn-margin"
-              onClick={() => loginWithRedirect({connection: 'facebook'})}
-            >
-              Log in (fb)
-            </Button>
-
             <Button
               id="qsLoginBtn"
               color="primary"

src/lib/LocationContext.js

@@ -0,0 +1,3 @@
+import React, { useState, useContext } from 'react'
+
+export const LocationContext = React.createContext("thailand:bangkok")

src/views/CodeDetails.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 
-import queryString from 'query-string'
+import url from 'url'
 
 //import Loading from "../components/Loading";
 
@@ -59,7 +59,11 @@ class CodeDetails extends Component {
   constructor(props) {
     super(props)
 
-    const query = queryString.parse(this.props.location.search)
+    //const query = queryString.parse(this.props.location.search)
+      //
+    const query = {
+        "period": "daily"
+    }
 
     this.state = {
       counts: [],
@@ -74,11 +78,14 @@ class CodeDetails extends Component {
   }
 
   componentDidUpdate(previousProps, previousState) {
-    const query = queryString.parse(this.props.location.search)
-    const period = query.period || 'daily'
-    if(period !== previousState.period) {
+    const q = url.parse(this.props.location.search, true).query
+    const query = {
+        "period": q.period || "daily"
+    }
+
+    if(query.period !== previousState.period) {
       this.setState({period: query.period})
-      this.loadGraph(period)
+      this.loadGraph(query.period)
     }
   }
 
@@ -162,7 +169,7 @@ class CodeDetails extends Component {
               {this.state.counts.length > 0 && (<ScanCountGraph counts={this.state.counts} period={this.state.period_map[this.state.period]} />)}
               <NavLink to={this.makeGraphLink('hourly')}>Hourly</NavLink> | <NavLink to={this.makeGraphLink('weekdaily')}>Weekday</NavLink> | <NavLink to={this.makeGraphLink('daily')}>Daily</NavLink>
             </Container>
-            <ScanCountGraph period={queryString.parse(this.props.location.search).period || 'daily'} counts={this.state.counts.items || []} />
+            <ScanCountGraph period={this.state.period || 'daily'} counts={this.state.counts.items || []} />
           </Col>
         </Row>
       </Container>

src/views/Home.js

@@ -5,7 +5,8 @@ import dayjs from 'dayjs'
 
 import { NavLink } from 'react-router-dom'
 
-import queryString from 'query-string'
+import url from 'url'
+import { LocationContext } from '../lib/LocationContext'
 
 import CanvasJSReact from '../lib/canvasjs.react'
 
@@ -49,31 +50,39 @@ class TopScansGraph extends Component {
   }
 }
 
-/*
-    <Content />
-*/
-
 class Home extends React.Component {
   constructor(props) {
     super(props)
-    const query = queryString.parse(this.props.location.search)
+    const query = url.parse(this.props.location.search, true).query
 
     this.state = {
       code: false,
       scans: false,
-      period: query.period || 'all-time'
+      period: query.period || 'all-time',
+      location: null
     }
   }
 
-  componentDidUpdate(previousProps, previousState) {
-    const query = queryString.parse(this.props.location.search)
+  slugMappings = {
+      'this-week': ["This week", dayjs().startOf('week').toISOString()],
+      'last-7-days': ["Last 7 days", dayjs().subtract(7, 'day').toISOString()],
+      'this-month': ["This month", dayjs().startOf('month').toISOString()],
+      'last-30-days': ["Last 30 days", dayjs().subtract(30, 'day').toISOString()],
+      'year-to-date': ["Year to date", dayjs().startOf('year').toISOString()],
+      'all-time': ["All time", null]
+    }
+
+
+  componentDidUpdate(_previousProps, previousState) {
+    const query = url.parse(this.props.location.search, true).query
     const period = query.period || 'all-time'
     if(period !== previousState.period) {
       this.setState({period})
       this.load()
     }
   }
 
+
   async load() {
     let options = {}
     if(this.props.auth.isAuthenticated) {
@@ -82,33 +91,16 @@ class Home extends React.Component {
       }
     }
 
-    console.log(this.state.period)
-
     const opts = {}
-    switch(this.state.period) {
-      case 'this-week':
-        opts.from_date = dayjs().startOf('week').toISOString()
-        break
-
-      case 'last-7-days':
-        opts.from_date = dayjs().subtract(7, 'day').toISOString()
-        break
-
-      case 'this-month':
-        opts.from_date = dayjs().startOf('month').toISOString()
-        break
-
-      case 'last-30-days':
-        opts.from_date = dayjs().subtract(30, 'day').toISOString()
-        break
-
-      case 'year-to-date':
-        opts.from_date = dayjs().startOf('year').toISOString()
-        break
-
-      case 'all-time':
-      default:
-        break
+
+    if(Object.keys(this.slugMappings).includes(this.state.period)) {
+        if(this.slugMappings[this.state.period][1] != null) {
+            opts.from_date = this.slugMappings[this.state.period][1]
+        }
+    }
+
+    if(opts.from_date == null) {
+        delete opts.from_date
     }
 
     const client = new API(this.props.config.REPORTER_URL, options)
@@ -139,10 +131,19 @@ class Home extends React.Component {
     if(!this.state.scans || !this.state.codes) {
       return ("...")
     } else {
+      const things = Object.entries(this.slugMappings).map( m => {
+        return (<NavLink to={this.makeGraphLink(m[0])}>{m[1][0]}</NavLink> )
+      })
+
+      const len = things.length
+
+      for(let i = 0; i < ((len -1) * 2); i = i + 2) {
+        things.splice(i + 1, 0, " | ")
+      }
+
       return (
         <Fragment>
-          <NavLink to={this.makeGraphLink('this-week')}>This week</NavLink> | <NavLink to={this.makeGraphLink('last-7-days')}>Last 7 days</NavLink> | <NavLink to={this.makeGraphLink('this-month')}>This month</NavLink> | <NavLink to={this.makeGraphLink('last-30-days')}>Last 30 days</NavLink> | <NavLink to={this.makeGraphLink('year-to-date')}>Year to date</NavLink> | <NavLink to={this.makeGraphLink('all-time')}>All Time</NavLink>
-
+        {things}
           <TopScansGraph codes={this.state.codes} topscans={this.state.scans} />
         </Fragment>
       )

src/views/LastScans.js

@@ -38,8 +38,6 @@ class LastScans extends Component {
     this.setState({scans, codes})
   }
 
-
-
   render() {
     let rows = null
     // if we've loaded data, essentially
@@ -65,10 +63,14 @@ class LastScans extends Component {
             <Col>
               {dayjs(s.scanned_at).fromNow()} ({dayjs(s.scanned_at).format('YYYY/MM/DD HH:mm:ss')})
             </Col>
+            <Col>
+              {s.location}
+            </Col>
           </Row>
         )
       })
     }
+
     return (
       <Fragment>
         <Row>
@@ -81,6 +83,9 @@ class LastScans extends Component {
           <Col className="d-none d-sm-block">
             Last Scanned
           </Col>
+          <Col className="d-none d-sm-block">
+            Location
+          </Col>
         </Row>
         {rows}
       </Fragment>