Add fetch lifespan to avoid repeated stores refreshes

resources/js_vue3/stores/groups.js

@@ -9,6 +9,7 @@ export const useGroups = defineStore({
     state: () => {
         return {
             items: [],
+            fetchedOn: null,
         }
     },
 
@@ -58,9 +59,17 @@ export const useGroups = defineStore({
          * Fetches the groups collection from the backend
          */
         async fetch() {
+            // We do not want to fetch fresh data multiple times in the same 2s timespan
+            const age = Math.floor(Date.now() - this.fetchedOn)
+            const isNotFresh = age > 2000
+
+            if (isNotFresh) {
+                this.fetchedOn = Date.now()
+
                 await groupService.getAll().then(response => {
                     this.items = response.data
                 })
+            }
         },
 
         /**

resources/js_vue3/stores/twofaccounts.js

@@ -12,6 +12,8 @@ export const useTwofaccounts = defineStore({
             items: [],
             selectedIds: [],
             filter: '',
+            backendWasNewer: false,
+            fetchedOn: null,
         }
     },
 
@@ -69,7 +71,7 @@ export const useTwofaccounts = defineStore({
 
         hasNoneSelected(state) {
             return state.selectedIds.length == 0
-        },
+        }
     },
 
     actions: {
@@ -78,35 +80,36 @@ export const useTwofaccounts = defineStore({
          * Refreshes the accounts collection using the backend
          */
         async fetch() {
-            await twofaccountService.getAll(! useUserStore().preferences.getOtpOnRequest).then(response => {
+            // We do not want to fetch fresh data multiple times in the same 2s timespan
-                this.items = response.data
+            const age = Math.floor(Date.now() - this.fetchedOn)
-            })
+            const isNotFresh = age > 2000
-        },
 
-        /**
+            if (isNotFresh) {
-         * Tells if the store is up-to-date with the backend
+                this.fetchedOn = Date.now()
-         */
+
-        async isUpToDateWithBackend() {
+                await twofaccountService.getAll(! useUserStore().preferences.getOtpOnRequest).then(response => {
-            let isUpToDate = true
+                    // Defines if the store was up-to-date with the backend
-            await twofaccountService.getAll().then(response => {
+                    this.backendWasNewer = response.data.length !== this.items.length
-                isUpToDate = response.data.length === this.items.length
     
                     this.items.forEach((item) => {
                         let matchingBackendItem = response.data.find(e => e.id === item.id)
                         if (matchingBackendItem == undefined) {
-                        isUpToDate = false
+                            this.backendWasNewer = true
                             return;
                         }
                         for (const field in item) {
-                        if (item[field] != matchingBackendItem[field]) {
+                            if (field !== 'otp' && item[field] != matchingBackendItem[field]) {
-                            isUpToDate = false
+                                this.backendWasNewer = true
                                 return;
                             }
                         }
                     })
-            })
     
-            return isUpToDate
+                    // Updates the state
+                    this.items = response.data
+                })
+            }
+            else this.backendWasNewer = false
         },
 
         /**
@@ -148,8 +151,6 @@ export const useTwofaccounts = defineStore({
                     })
                     useNotifyStore().success({ text: trans('twofaccounts.accounts_deleted') })
                 })
-
-                //this.refresh()
             }
         },
 

resources/js_vue3/views/auth/Login.vue

@@ -37,7 +37,7 @@
                 isAdmin: response.data.is_admin,
             })
 
-            router.push({ name: 'accounts', params: { toRefresh: true } })
+            router.push({ name: 'accounts' })
         })
         .catch(error => {
             if( error.response.status === 401 ) {

resources/js_vue3/views/twofaccounts/Accounts.vue

@@ -1,5 +1,4 @@
 <script setup>
-
     import twofaccountService from '@/services/twofaccountService'
     import TotpLooper from '@/components/TotpLooper.vue'
     import GroupSwitch from '@/components/GroupSwitch.vue'
@@ -53,15 +52,16 @@
     })
 
     onMounted(async () => {
-        // This SFC is reached only if the user has some twofaccounts in the store (see the starter middleware).
+        // This SFC is reached only if the user has some twofaccounts (see the starter middleware).
         // This allows to display accounts without latency.
-        // We now check the twofaccounts store state in case the backend data have changed.
+        //
-        const isUpToDate = await twofaccounts.isUpToDateWithBackend()
+        // We sync the store with the backend again to 
-        if (! isUpToDate) {
+        twofaccounts.fetch().then(() => {
-            await twofaccounts.fetch()
+            if (twofaccounts.backendWasNewer) {
                 notify.info({ text: trans('commons.data_refreshed_to_reflect_server_changes'), duration: 10000 })
             }
-        //groups.refresh()
+        })
+        groups.fetch()
     })
 
     /**
@@ -70,7 +70,7 @@
     function postGroupAssignementUpdate() {
         // we fetch the accounts again to prevent the js collection being
         // desynchronize from the backend php collection
-        fetchAccounts(true)
+        twofaccounts.fetch()
         notify.success({ text: trans('twofaccounts.accounts_moved') })
     }