Fixed async pagination + hack to prevent user from changing items per page

src/router/index.js

@@ -21,16 +21,20 @@ const router = new VueRouter({
 
 router.beforeEach( async (to, from, next) => {
   if(to.query.access_code){
-    console.log("route contains access code...")
-    store.dispatch('exchangeAccessCode', to.query.access_code).then(() => next("/")).catch(err => console.warn("exchange failed", err))
-  }
-  else {
-    store.dispatch("getUser").then(to => next(to))
+    // If the route contains an access code, exchange it and go home.
+    store.dispatch('exchangeAccessCode', to.query.access_code)
+      .then(() => next("/"))
       .catch(err => {
-        console.warn("get user failed",err)
+        console.warn("exchange failed", err);
         next("/")
       })
   }
+  else {
+    // Check on every route change if you still have access.
+    store.dispatch("getUser")
+      .then(to => next(to))
+      .catch(err => next("/"))
+  }
 })
 
 export default router

src/store/index.js

@@ -73,7 +73,13 @@ export default new Vuex.Store({
     },
     handleStreamSelection(context, stream) {
       context.commit("setCurrentStream", stream)
-      return getStreamCommits(stream.id, 10, null)
+      return getStreamCommits(stream.id, 5, null)
+        .then(json => {
+          context.commit("setCommits", json.data.stream.commits)
+        })
+    },
+    getCommits(context, cursor) {
+      return getStreamCommits(context.state.currentStream.id, 5, cursor)
         .then(json => {
           context.commit("setCommits", json.data.stream.commits)
         })

src/views/Home.vue

@@ -51,7 +51,8 @@ export default {
       options: {
         itemsPerPage: 5
       },
-      selectedKeys: ["id", "message"]
+      selectedKeys: ["id", "message", "branchName", "authorName"],
+      prevCursors: [null]
     }
   },
   methods: {
@@ -82,8 +83,23 @@ export default {
   },
   watch: {
     options: {
-      handler() {
-        console.log('options have changed', this.options)
+      handler(val, oldval) {
+        if(oldval.page && val.page != oldval.page){
+          if(val.page > oldval.page) {
+            this.loading = true
+            this.prevCursors.push(this.$store.state.latestCommits.cursor)
+            this.$store.dispatch("getCommits", this.$store.state.latestCommits.cursor).then(() => {
+              this.loading = false
+            })
+          }
+          else {
+            console.log("page down")
+            this.loading = true
+            this.$store.dispatch("getCommits", this.prevCursors[val.page - 1]).then(() => {
+              this.loading = false
+            })
+          }
+        }
       },
       deep: true
     }
@@ -95,4 +111,7 @@ export default {
 #viewer {
   min-height: 500px;
 }
+.v-data-footer__select {
+  display: none !important;
+}
 </style>

vue.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   transpileDependencies: [
-    'vuetify'
+    'vuetify',
+    'vuex-persist'
   ]
 }