Simplify router usage

src/main.js

@@ -2,7 +2,7 @@
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 import App from './App.vue'
-import router, {manageRouting} from './router/index'
+import getRouter from './router/index'
 import store from './store'
 
 console.log('use updateRPC(\'http://rpc-endpoint:8545\') to update the identity manager RPC endpoint')
@@ -27,7 +27,7 @@ const IdentityApp = Vue.extend({
   render: h => h(App),
   components: { App },
   store,
-  router,
+  router: getRouter(store),
   methods: {
   },
   beforeCreate: function () {
@@ -37,5 +37,4 @@ const IdentityApp = Vue.extend({
   }
 })
 const vm = new IdentityApp()
-manageRouting(store, router)
 vm.$mount('#app')

src/pages/Setup/Setup.js

@@ -1,5 +1,4 @@
 import lightwallet from 'eth-lightwallet'
-import {PATHS} from '@/router'
 
 import PinInput from '@/components/PinInput/PinInput.vue'
 import { AeButton } from '@aeternity/aepp-components'
@@ -17,8 +16,7 @@ export default {
       password: '',
       regenerateButtonText: 'generate new',
       copyButtonText: 'COPY TO CLIPBOARD',
-      working: false,
-      unlockPath: PATHS.UNLOCK
+      working: false
     }
   },
   computed: {

src/pages/Setup/Setup.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="screen setup">
     <ae-button size='smaller' type='dramatic' v-if='haveKeyStore' class='go-to-unlock'>
-      <router-link :to="{path:unlockPath}">Back to unlock</router-link>
+      <router-link :to="{ name: 'unlock' }">Back to unlock</router-link>
     </ae-button>
     <div v-if="displayGeneratedSeed" class="wrapper">
       <h1 class="title">Account Setup 1/2</h1>

src/pages/Unlock/Unlock.js

@@ -1,6 +1,5 @@
 import { AeButton } from '@aeternity/aepp-components'
 import PinInput from '@/components/PinInput/PinInput.vue'
-import { PATHS } from '@/router/'
 
 export default {
   name: 'unlock',
@@ -12,8 +11,7 @@ export default {
     return {
       password: '',
       token: {},
-      error: false,
-      unlockDifferentPath: PATHS.SETUP
+      error: false
     }
   },
   computed: {
@@ -59,7 +57,7 @@ export default {
     }
   },
   beforeRouteLeave (to, from, next) {
-    if (to.path === PATHS.SETUP) {
+    if (to.name === 'setup') {
       const leaveConfirmed = window.confirm(
         'Your saved account will be overwritten. Please make sure you have a backup of the seed phrase. Do you want to continue?'
       )

src/pages/Unlock/Unlock.vue

@@ -14,7 +14,7 @@
         Unlock
       </ae-button>
         <ae-button size='smaller' type='dramatic' class='unlock-different-keystore'>
-          <router-link :to="{path:unlockDifferentPath}">
+          <router-link :to="{ name: 'setup' }">
           Unlock a different account
           </router-link>
         </ae-button>

src/router/index.js

@@ -10,146 +10,70 @@ import Network from '@/pages/Network.vue'
 
 Vue.use(Router)
 
-export const PATHS = {
-  ROOT: '/',
-  SETUP: '/setup',
-  UNLOCK: '/unlock',
-  EMBEDDED_APP: '/app-browser',
-  TRANSFER: '/transfer',
-  NETWORK: '/network'
-}
-
-const router = new Router({
-  routes: [
-    {
-      name: 'intro',
-      path: PATHS.ROOT,
-      component: Intro
-    },
-    {
-      name: 'setup',
-      path: PATHS.SETUP,
-      component: Setup
-    },
-    {
-      name: 'unlock',
-      path: PATHS.UNLOCK,
-      component: Unlock
-    },
-    {
-      name: 'app-browser',
-      path: PATHS.EMBEDDED_APP,
-      component: AppBrowser
-    },
-    {
-      name: 'transfer',
-      path: PATHS.TRANSFER,
-      component: Transfer,
-      children: [
-        { path: ':txhash', component: Transfer }
-      ]
-    },
-    {
-      name: 'network',
-      path: PATHS.NETWORK,
-      component: Network
-    }
-  ]
-})
-
-export default router
-
-const _actionHandlers = {}
-
-const _mutationHandlers = {
-  'setUnlocked': function (router, state) {
-    if (state.keystore) {
-      if (state.unlocked) {
-        router.push(PATHS.EMBEDDED_APP)
-      } else {
-        router.push(PATHS.UNLOCK)
-      }
-    }
-  },
-  'setKeystore': function (router, state, currentPath) {
-    if (state.keystore) {
-      router.push(PATHS.UNLOCK)
-    } else {
-      const denyAccess = currentPath === PATHS.EMBEDDED_APP
-      if (denyAccess) {
-        router.push(PATHS.SETUP)
-      }
-    }
-  }
-}
-
-const _pathResolvers = {}
-
-_pathResolvers[PATHS.EMBEDDED_APP] = function (state) {
-  if (!state.keystore) {
-    return PATHS.SETUP
-  } else if (!state.unlocked) {
-    return PATHS.UNLOCK
-  }
-}
-
-_pathResolvers[PATHS.UNLOCK] = function (state) {
-  if (!state.keystore) {
-    return PATHS.SETUP
-  } else if (state.unlocked) {
-    return PATHS.EMBEDDED_APP
-  }
-}
-
-_pathResolvers[PATHS.SETUP] = function (state) {
-  // if (state.keystore) {
-    // if (state.unlocked) {
-      // return PATHS.EMBEDDED_APP
-    // } else {
-      // return PATHS.UNLOCK
-    // }
-  // }
-}
-
-export const manageRouting = function (store, router) {
-  router.onReady(function () {
-    const currentPath = router.currentRoute.path
-    const resolver = _pathResolvers[currentPath]
-    if (typeof resolver === 'function') {
-      const result = resolver(store.state, currentPath)
-      if (typeof result === 'string') {
-        router.push(result)
+export default (store) => {
+  const router = new Router({
+    routes: [
+      {
+        name: 'intro',
+        path: '/',
+        component: Intro
+      },
+      {
+        name: 'setup',
+        path: '/setup',
+        component: Setup
+      },
+      {
+        name: 'unlock',
+        path: '/unlock',
+        component: Unlock,
+        beforeEnter (to, from, next) {
+          if (!store.state.keystore) return next({ name: 'setup' })
+          if (store.state.unlocked) return next({ name: 'app-browser' })
+          next()
+        }
+      },
+      {
+        name: 'app-browser',
+        path: '/app-browser',
+        component: AppBrowser,
+        beforeEnter (to, from, next) {
+          if (!store.state.keystore) return next({ name: 'setup' })
+          if (!store.state.unlocked) return next({ name: 'unlock' })
+          next()
+        }
+      },
+      {
+        name: 'transfer',
+        path: '/transfer',
+        component: Transfer,
+        children: [
+          { path: ':txhash', component: Transfer }
+        ]
+      },
+      {
+        name: 'network',
+        path: '/network',
+        component: Network
       }
-    }
+    ]
   })
 
   store.subscribe(function (mutation, state) {
-    const handler = _mutationHandlers[mutation.type]
-    if (typeof handler === 'function') {
-      handler(router, state, router.currentPath)
-    }
-  })
-
-  store.subscribeAction(function (action, state) {
-    const handler = _actionHandlers[action.type]
-    if (typeof handler === 'function') {
-      handler(router, state)
-    }
-  })
-
-  router.beforeEach(function (to, from, next) {
-    if (from.path !== to.path) {
-      const resolver = _pathResolvers[to.path]
-      if (typeof resolver === 'function') {
-        const result = resolver(store.state, from)
-        if (typeof result === 'string') {
-          next({path: result, replace: true})
-        } else {
-          next()
+    switch (mutation.type) {
+      case 'setUnlocked':
+        if (state.keystore) {
+          router.push({
+            name: state.unlocked ? 'app-browser' : 'unlock'
+          })
         }
-      } else {
-        next()
-      }
+        break
+      case 'setKeystore':
+        if (state.keystore) return router.push({ name: 'unlock' })
+        if (router.route.name === 'app-browser') return router.push({ name: 'setup' })
+        break
     }
   })
+
+  return router
 }