Reduce data display latency using localstorage

resources/js/mixins.js

@@ -14,9 +14,7 @@ Vue.mixin({
 
             await this.axios.get('api/logout')
 
-            localStorage.removeItem('jwt')
-            localStorage.removeItem('user')
-
+            this.$storage.clear()
             delete this.axios.defaults.headers.common['Authorization']
 
             this.$router.push({ name: 'login' })

resources/js/routes.js

@@ -32,7 +32,7 @@ const router = new Router({
 
         { path: '/groups', name: 'groups', component: Groups, meta: { requiresAuth: true }, props: true },
         { path: '/group/create', name: 'createGroup', component: CreateGroup, meta: { requiresAuth: true } },
-        { path: '/group/edit/:groupId', name: 'editGroup', component: EditGroup, meta: { requiresAuth: true } },
+        { path: '/group/edit/:groupId', name: 'editGroup', component: EditGroup, meta: { requiresAuth: true }, props: true },
 
         { path: '/settings', name: 'settings', component: Settings, meta: { requiresAuth: true } },
 
@@ -48,7 +48,16 @@ const router = new Router({
     ],
 });
 
-router.beforeEach((to, from, next) => {
+let isFirstLoad = true;
+
+router.beforeEach((to, from, next) => {   
+
+    if( to.name === 'accounts') {
+        to.params.isFirstLoad = isFirstLoad ? true : false
+        isFirstLoad = false;
+    }
+    
+
     if (to.matched.some(record => record.meta.requiresAuth)) {
         // Accesses to restricted pages without a jwt token are routed to the login page
         if ( !localStorage.getItem('jwt') ) {
@@ -61,9 +70,11 @@ router.beforeEach((to, from, next) => {
             next()
         }
     }
-    else {
-        next()
-    }
+    else next()
+});
+
+router.afterEach(to => {
+    Vue.$storage.set('lastRoute', to.name)
 });
 
 export default router

resources/js/views/Accounts.vue

@@ -277,12 +277,20 @@
 
         },
 
-        props: ['InitialEditMode'],
+        props: ['initialEditMode', 'toRefresh'],
 
         mounted() {
 
-            this.fetchAccounts()
-            this.fetchGroups()
+            if( this.toRefresh || this.$route.params.isFirstLoad ) {
+                this.fetchAccounts()
+                this.fetchGroups()
+            } else {
+                const accounts = this.$storage.get('accounts', null) // use null as fallback if localstorage is empty
+                !accounts ? this.fetchAccounts() : this.accounts = accounts
+
+                const groups = this.$storage.get('groups', null) // use null as fallback if localstorage is empty
+                !groups ? this.fetchGroups() : this.groups = groups
+            }
 
             // stop OTP generation on modal close
             this.$on('modalClose', function() {
@@ -333,6 +341,8 @@
                             group_id : data.group_id,
                         })
                     })
+
+                    this.$storage.set('accounts', this.accounts)
                     
                     // No account yet, we force user to land on the start view.
                     if( this.accounts.length === 0 ) {
@@ -370,18 +380,6 @@
                 this.axios.patch('/api/twofaccounts/reorder', {orderedIds: this.accounts.map(a => a.id)})
             },
 
-            /**
-             * Delete the provided account
-             */
-            deleteAccount(id) {
-                if(confirm(this.$t('twofaccounts.confirm.delete'))) {
-                    this.axios.delete('/api/twofaccounts/' + id)
-
-                    // Remove the deleted account from the collection
-                    this.accounts = this.accounts.filter(a => a.id !== id)
-                }
-            },
-
             /**
              * Delete accounts selected from the Edit mode
              */
@@ -434,6 +432,8 @@
                             count: data.twofaccounts_count
                         })
                     })
+
+                    this.$storage.set('groups', this.groups)
                 })
             },
 

resources/js/views/Groups.vue

@@ -55,7 +55,10 @@
         },
 
         mounted() {
-
+            // Load groups for localstorage at first to avoid latency
+            const groups = this.$storage.get('groups', null) // use null as fallback if localstorage is empty
+            
+            if( groups ) this.groups = groups
             this.fetchGroups()
         },
 
@@ -64,13 +67,17 @@
             async fetchGroups() {
 
                 await this.axios.get('api/groups').then(response => {
+                    const groups = []
+
                     response.data.forEach((data) => {
-                        this.groups.push({
+                        groups.push({
                             id : data.id,
                             name : data.name,
                             count: data.twofaccounts_count
                         })
                     })
+
+                    this.groups = groups
                 })
 
                 // Remove the pseudo 'All' group
@@ -88,5 +95,12 @@
 
         },
 
+        beforeRouteLeave(to, from, next) {
+            // Refresh localstorage
+            this.$storage.set('groups', this.groups)
+
+            next()
+        }
+
     }
 </script>

resources/js/views/twofaccounts/Create.vue

@@ -253,7 +253,7 @@
                 await this.form.post('/api/twofaccounts')
 
                 if( this.form.errors.any() === false ) {
-                    this.$router.push({name: 'accounts', params: { InitialEditMode: false }});
+                    this.$router.push({name: 'accounts', params: { toRefresh: true }});
                 }
 
             },
@@ -273,7 +273,7 @@
                 // clean possible uploaded temp icon
                 this.deleteIcon()
 
-                this.$router.push({name: 'accounts', params: { InitialEditMode: false }});
+                this.$router.push({name: 'accounts'});
             },
 
             async uploadQrcode(event) {

resources/js/views/twofaccounts/Edit.vue

@@ -206,7 +206,7 @@
                 await this.form.put('/api/twofaccounts/' + this.$route.params.twofaccountId)
 
                 if( this.form.errors.any() === false ) {
-                    this.$router.push({name: 'accounts', params: { InitialEditMode: true }})
+                    this.$router.push({name: 'accounts', params: { InitialEditMode: true, toRefresh: true }})
                 }
 
             },