Refactor how we recognize routes

Co-authored-by: Stamates <stamates@hotmail.com>

apps/explorer_web/assets/js/lib/from_now.js

@@ -1,7 +1,8 @@
 import $ from 'jquery'
 import moment from 'moment'
+import router from '../router'
 
-moment.locale(window.locale)
+moment.locale(router.locale)
 
 moment.relativeTimeThreshold('M', 12)
 moment.relativeTimeThreshold('d', 30)

apps/explorer_web/assets/js/pages/address.js

@@ -1,16 +1,15 @@
 import $ from 'jquery'
-import URI from 'urijs'
 import humps from 'humps'
 import socket from '../socket'
+import router from '../router'
 
-if (window.page === 'address') {
-  const channel = socket.channel(`addresses:${window.addressHash}`, {})
+router.when('/addresses/:addressHash').then(({ addressHash, blockNumber, filter }) => {
+  const channel = socket.channel(`addresses:${addressHash}`, {})
   channel.join()
-    .receive('ok', resp => { console.log('Joined successfully', `addresses:${window.addressHash}`, resp) })
-    .receive('error', resp => { console.log('Unable to join', `addresses:${window.addressHash}`, resp) })
+    .receive('ok', resp => { console.log('Joined successfully', `addresses:${addressHash}`, resp) })
+    .receive('error', resp => { console.log('Unable to join', `addresses:${addressHash}`, resp) })
 
-  const currentLocation = URI(window.location)
-  if(!currentLocation.hasQuery('block_number')) {
+  if (!blockNumber) {
     const $emptyTransactionsList = $('[data-selector="empty-transactions-list"]')
     if ($emptyTransactionsList) {
       channel.on('transaction', () => {
@@ -27,15 +26,15 @@ if (window.page === 'address') {
           transactionHtml
         } = humps.camelizeKeys(msg)
 
-        if(currentLocation.query(true).filter === 'to' && toAddressHash !== window.addressHash) {
-          return;
+        if (filter === 'to' && toAddressHash !== addressHash) {
+          return
         }
-        if(currentLocation.query(true).filter === 'from' && fromAddressHash !== window.addressHash) {
-          return;
+        if (filter === 'from' && fromAddressHash !== addressHash) {
+          return
         }
 
         $transactionsList.prepend(transactionHtml)
       })
     }
   }
-}
+})

apps/explorer_web/assets/js/router.js

@@ -0,0 +1,19 @@
+import Path from 'path-parser'
+import URI from 'urijs'
+import humps from 'humps'
+
+const { locale } = Path.createPath('/:locale').partialTest(window.location.pathname)
+
+export default {
+  locale,
+  when (pattern) {
+    return new Promise((resolve) => {
+      const match = Path.createPath(`/:locale${pattern}`).partialTest(window.location.pathname)
+      if (match) {
+        const routeParams = humps.camelizeKeys(match)
+        const queryParams = humps.camelizeKeys(URI(window.location).query(true))
+        resolve(Object.assign({}, queryParams, routeParams))
+      }
+    })
+  }
+}

apps/explorer_web/assets/js/socket.js

@@ -1,6 +1,7 @@
 import {Socket} from 'phoenix'
+import router from './router'
 
-const socket = new Socket('/socket', {params: {locale: window.locale}})
+const socket = new Socket('/socket', {params: {locale: router.locale}})
 socket.connect()
 
 export default socket

apps/explorer_web/assets/package-lock.json

@@ -5642,6 +5642,14 @@
       "integrity": "sha1-PBrfhx6pzWyUMbbqK9dKD/BVxME=",
       "dev": true
     },
+    "path-parser": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/path-parser/-/path-parser-4.1.1.tgz",
+      "integrity": "sha512-Wa8H3oVxnt8U5qODVpwg/fZgxFgJADywGqyAsMB6NkiLoc+Up+ryZ9r9/wyL026VDy+GCmF3d5BhfPFFKllOlQ==",
+      "requires": {
+        "search-params": "2.1.3"
+      }
+    },
     "path-type": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-2.0.0.tgz",
@@ -7187,6 +7195,11 @@
         }
       }
     },
+    "search-params": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/search-params/-/search-params-2.1.3.tgz",
+      "integrity": "sha512-hHxU9ZGWpZ/lrFBIHndSnQae2in7ra+m+tBSoeAahSWDDgOgpZqs4bfaTZpljgNgAgTbjiQoJtZW6FKSsfEcDA=="
+    },
     "select": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",

apps/explorer_web/assets/package.json

@@ -26,6 +26,7 @@
     "jquery": "^3.3.1",
     "moment": "^2.22.1",
     "numeral": "^2.0.6",
+    "path-parser": "^4.1.1",
     "phoenix": "file:../../../deps/phoenix",
     "phoenix_html": "file:../../../deps/phoenix_html",
     "popper.js": "^1.14.3",

apps/explorer_web/lib/explorer_web/templates/address/overview.html.eex

@@ -1,8 +1,3 @@
-<script>
-  window.page = 'address'
-  window.addressHash = '<%= @address %>'
-</script>
-
 <section>
   <div class="row mb-3">
     <div class="col-md-2 col-lg-1 order-last order-sm-first">

apps/explorer_web/lib/explorer_web/templates/layout/app.html.eex

@@ -6,9 +6,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title><%= gettext "POA Network Explorer" %></title>
     <link rel="stylesheet" href="<%= static_path(@conn, "/css/app.css") %>">
-    <script>
-     window.locale = '<%= @conn.assigns.locale %>'
-    </script>
   </head>
 
   <body>