From 2dc87349807440d0ef92a6ca464d090a4369f3cb Mon Sep 17 00:00:00 2001
From: Bubka <858858+Bubka@users.noreply.github.com>
Date: Thu, 2 Nov 2023 14:54:12 +0100
Subject: [PATCH] Add fetch lifespan to avoid repeated stores refreshes

---
 resources/js_vue3/stores/groups.js            | 15 ++++-
 resources/js_vue3/stores/twofaccounts.js      | 55 ++++++++++---------
 resources/js_vue3/views/auth/Login.vue        |  2 +-
 .../js_vue3/views/twofaccounts/Accounts.vue   | 20 +++----
 4 files changed, 51 insertions(+), 41 deletions(-)

diff --git a/resources/js_vue3/stores/groups.js b/resources/js_vue3/stores/groups.js
index b7054574..d5869ace 100644
--- a/resources/js_vue3/stores/groups.js
+++ b/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() {
-            await groupService.getAll().then(response => {
-                this.items = response.data
-            })
+            // 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
+                })
+            }
         },
 
         /**
diff --git a/resources/js_vue3/stores/twofaccounts.js b/resources/js_vue3/stores/twofaccounts.js
index c43729e3..7588166f 100644
--- a/resources/js_vue3/stores/twofaccounts.js
+++ b/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 => {
-                this.items = response.data
-            })
-        },
+            // 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
 
-        /**
-         * Tells if the store is up-to-date with the backend
-         */
-        async isUpToDateWithBackend() {
-            let isUpToDate = true
-            await twofaccountService.getAll().then(response => {
-                isUpToDate = response.data.length === this.items.length
+            if (isNotFresh) {
+                this.fetchedOn = Date.now()
 
-                this.items.forEach((item) => {
-                    let matchingBackendItem = response.data.find(e => e.id === item.id)
-                    if (matchingBackendItem == undefined) {
-                        isUpToDate = false
-                        return;
-                    }
-                    for (const field in item) {
-                        if (item[field] != matchingBackendItem[field]) {
-                            isUpToDate = false
+                await twofaccountService.getAll(! useUserStore().preferences.getOtpOnRequest).then(response => {
+                    // Defines if the store was up-to-date with the backend
+                    this.backendWasNewer = response.data.length !== this.items.length
+    
+                    this.items.forEach((item) => {
+                        let matchingBackendItem = response.data.find(e => e.id === item.id)
+                        if (matchingBackendItem == undefined) {
+                            this.backendWasNewer = true
                             return;
                         }
-                    }
+                        for (const field in item) {
+                            if (field !== 'otp' && item[field] != matchingBackendItem[field]) {
+                                this.backendWasNewer = true
+                                return;
+                            }
+                        }
+                    })
+    
+                    // Updates the state
+                    this.items = response.data
                 })
-            })
-
-            return isUpToDate
+            }
+            else this.backendWasNewer = false
         },
 
         /**
@@ -148,8 +151,6 @@ export const useTwofaccounts = defineStore({
                     })
                     useNotifyStore().success({ text: trans('twofaccounts.accounts_deleted') })
                 })
-
-                //this.refresh()
             }
         },
 
diff --git a/resources/js_vue3/views/auth/Login.vue b/resources/js_vue3/views/auth/Login.vue
index 7b9fbd25..954ec066 100644
--- a/resources/js_vue3/views/auth/Login.vue
+++ b/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 ) {
diff --git a/resources/js_vue3/views/twofaccounts/Accounts.vue b/resources/js_vue3/views/twofaccounts/Accounts.vue
index 681503fd..6c78cb50 100644
--- a/resources/js_vue3/views/twofaccounts/Accounts.vue
+++ b/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()
-        if (! isUpToDate) {
-            await twofaccounts.fetch()
-            notify.info({ text: trans('commons.data_refreshed_to_reflect_server_changes'), duration: 10000 })
-        }
-        //groups.refresh()
+        //
+        // We sync the store with the backend again to 
+        twofaccounts.fetch().then(() => {
+            if (twofaccounts.backendWasNewer) {
+                notify.info({ text: trans('commons.data_refreshed_to_reflect_server_changes'), duration: 10000 })
+            }
+        })
+        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') })
     }