From 2dbbc38ba4bfe7775166f6c02664a86dc3889825 Mon Sep 17 00:00:00 2001
From: Julien Nahum <julien@nahum.net>
Date: Thu, 25 Jan 2024 05:12:45 +0100
Subject: [PATCH] Optimize API calls, added form loading logs

---
 client/components/global/Navbar.vue            |  2 +-
 .../pages/auth/components/LoginForm.vue        | 18 ++++++++++--------
 client/middleware/01.check-auth.global.js      | 12 ++++++------
 client/pages/forms/[slug]/index.vue            |  1 +
 client/pages/settings/account.vue              |  5 +----
 client/stores/auth.js                          |  7 ++-----
 6 files changed, 21 insertions(+), 24 deletions(-)

diff --git a/client/components/global/Navbar.vue b/client/components/global/Navbar.vue
index 8338e18..2560c17 100644
--- a/client/components/global/Navbar.vue
+++ b/client/components/global/Navbar.vue
@@ -219,7 +219,7 @@ export default {
   methods: {
     async logout() {
       // Log out the user.
-      await this.authStore.logout()
+      this.authStore.logout()
 
       // Reset store
       this.workspacesStore.resetState()
diff --git a/client/components/pages/auth/components/LoginForm.vue b/client/components/pages/auth/components/LoginForm.vue
index eb20a13..4e130a0 100644
--- a/client/components/pages/auth/components/LoginForm.vue
+++ b/client/components/pages/auth/components/LoginForm.vue
@@ -26,7 +26,7 @@
       </div>
 
       <!-- Submit Button -->
-      <v-button dusk="btn_login" :loading="form.busy">
+      <v-button dusk="btn_login" :loading="form.busy || loading">
         Log in to continue
       </v-button>
 
@@ -72,6 +72,7 @@ export default {
       email: '',
       password: ''
     }),
+    loading: false,
     remember: false,
     showForgotModal: false
   }),
@@ -79,23 +80,24 @@ export default {
   methods: {
     login() {
       // Submit the form.
+      this.loading = true
       this.form.post('login').then(async (data) => {
         // Save the token.
         this.authStore.setToken(data.token)
 
-        const userData = await opnFetch('user')
-        this.authStore.setUser(userData)
-
-        const workspaces = await fetchAllWorkspaces()
-        this.workspaceStore.set(workspaces.data.value)
+        const [userDataResponse, workspacesResponse] = await Promise.all([opnFetch('user'), fetchAllWorkspaces()]);
+        this.authStore.setUser(userDataResponse)
+        this.workspaceStore.set(workspacesResponse.data.value)
 
         // Load forms
         this.formsStore.loadAll(this.workspaceStore.currentId)
 
         // Redirect home.
         this.redirect()
-      }).catch(() => {
-
+      }).catch((error) => {
+        console.error(error)
+      }).finally(() => {
+        this.loading = false
       })
     },
 
diff --git a/client/middleware/01.check-auth.global.js b/client/middleware/01.check-auth.global.js
index 1971268..370ebec 100644
--- a/client/middleware/01.check-auth.global.js
+++ b/client/middleware/01.check-auth.global.js
@@ -1,16 +1,16 @@
 import {fetchAllWorkspaces} from "~/stores/workspaces.js";
+import {opnFetch} from "~/composables/useOpnApi.js";
 
 export default defineNuxtRouteMiddleware(async(to, from) => {
   const authStore = useAuthStore()
   authStore.initStore(useCookie('token').value, useCookie('admin_token').value)
 
   if (authStore.token && !authStore.user) {
-    const {data, error} = await useOpnApi('user')
-    authStore.setUser(data.value)
-
-    // Load workspaces
     const workspaceStore = useWorkspacesStore()
-    const {data: workspacesData, error: workspacesError} = await fetchAllWorkspaces()
-    workspaceStore.save(workspacesData.value)
+
+    // Load user data and workspaces
+    const [userDataResponse, workspacesResponse] = await Promise.all([useOpnApi('user'), fetchAllWorkspaces()]);
+    authStore.setUser(userDataResponse.data.value)
+    workspaceStore.save(workspacesResponse.data.value)
   }
 })
diff --git a/client/pages/forms/[slug]/index.vue b/client/pages/forms/[slug]/index.vue
index ccee71a..25fe79b 100644
--- a/client/pages/forms/[slug]/index.vue
+++ b/client/pages/forms/[slug]/index.vue
@@ -92,6 +92,7 @@ const loadForm = async (setup=false) => {
   if (setup) {
     const {data, error} = await formsStore.publicLoad(slug)
     if (error.value) {
+      console.error(`Error loading form [${slug}]:`,error.value)
       formsStore.stopLoading()
       return
     }
diff --git a/client/pages/settings/account.vue b/client/pages/settings/account.vue
index 2556a7c..aae5e1d 100644
--- a/client/pages/settings/account.vue
+++ b/client/pages/settings/account.vue
@@ -35,10 +35,7 @@ const deleteAccount = () => {
     loading = false
     useAlert().success(data.message)
 
-    // Log out the user.
-    await authStore.logout()
-
-    // Redirect to login.
+    authStore.logout()
     router.push({ name: 'login' })
   }).catch((error) => {
     useAlert().error(error.data.message)
diff --git a/client/stores/auth.js b/client/stores/auth.js
index 74a90e1..75c79e4 100644
--- a/client/stores/auth.js
+++ b/client/stores/auth.js
@@ -75,11 +75,8 @@ export const useAuthStore = defineStore('auth', {
       // })
     },
 
-    async logout() {
-      try {
-        await useOpnApi('logout', {method: 'POST'})
-      } catch (e) {
-      }
+    logout() {
+      opnFetch('logout', {method: 'POST'}).catch((error) => {})
 
       this.user = null
       this.setToken(null)