refactor: move groupware account loading to store

packages/web-app-mail/src/views/Inbox.vue

@@ -28,28 +28,34 @@ import { ref, unref, onMounted, onUnmounted } from 'vue'
 import MailList from '../components/MailList.vue'
 import MailDetails from '../components/MailDetails.vue'
 import MailWidget from '../components/MailWidget.vue'
-import { AppLoadingSpinner, queryItemAsString, useEventBus } from '@opencloud-eu/web-pkg'
+import {
+  AppLoadingSpinner,
+  queryItemAsString,
+  useClientService,
+  useEventBus
+} from '@opencloud-eu/web-pkg'
 import { useRouteQuery } from '@opencloud-eu/web-pkg'
 import { useMailsStore } from '../composables/piniaStores/mails'
-import { useGroupwareAccountsStore, useLoadAccounts } from '@opencloud-eu/web-pkg'
+import { useGroupwareAccountsStore } from '@opencloud-eu/web-pkg'
 import { storeToRefs } from 'pinia'
 import { useMailboxesStore } from '../composables/piniaStores/mailboxes'
 import { useLoadMailboxes } from '../composables/useLoadMailboxes'
 import { useLoadMails } from '../composables/useLoadMails'
 import { useLoadMail } from '../composables/useLoadMail'
+import { Mailbox } from '../types'
 
 const accountsStore = useGroupwareAccountsStore()
 const mailboxesStore = useMailboxesStore()
 const mailsStore = useMailsStore()
 const eventBus = useEventBus()
+const { httpAuthenticated } = useClientService()
 
-const { accounts, currentAccount } = storeToRefs(accountsStore)
-const { setCurrentAccount } = accountsStore
+const { currentAccount } = storeToRefs(accountsStore)
+const { loadCurrentAccount } = accountsStore
 const { mailboxes, currentMailbox } = storeToRefs(mailboxesStore)
 const { setCurrentMailbox } = mailboxesStore
 const { currentMail } = storeToRefs(mailsStore)
 
-const { loadAccounts } = useLoadAccounts()
 const { loadMailboxes } = useLoadMailboxes()
 const { loadMails } = useLoadMails()
 const { loadMail } = useLoadMail()
@@ -72,44 +78,43 @@ const onCloseCompose = () => {
   showCompose.value = false
 }
 
-accountsStore.$onAction(async ({ name }) => {
-  if (name === 'setCurrentAccount' && unref(currentAccount)) {
-    setCurrentMail(null)
-    await loadMailboxes(unref(currentAccount).accountId)
-    setCurrentMailbox(unref(mailboxes)[0])
-    await loadMails(unref(currentAccount).accountId, unref(currentMailbox).id)
-  }
-})
-
-onMounted(async () => {
-  mailComposeEventToken = eventBus.subscribe('app.mail.show-compose-mail', onComposeMail)
-  await loadAccounts()
-  if (unref(currentAccountIdQuery)) {
-    setCurrentAccount(
-      unref(accounts).find((account) => account.accountId === unref(currentAccountIdQuery))
-    )
-  } else {
-    setCurrentAccount(unref(accounts)?.[0])
-  }
-
-  console.log(unref(currentAccount))
+const loadMailboxesAndMails = async () => {
+  isLoading.value = true
+  setCurrentMail(null)
 
+  // load mailboxes
   await loadMailboxes(unref(currentAccount).accountId)
+  let queryMailbox: Mailbox | undefined
   if (unref(currentMailboxIdQuery)) {
-    setCurrentMailbox(
-      unref(mailboxes).find((mailbox) => mailbox.id === unref(currentMailboxIdQuery))
-    )
-  } else {
-    setCurrentMailbox(unref(mailboxes)?.[0])
+    queryMailbox = unref(mailboxes).find(({ id }) => id === unref(currentMailboxIdQuery))
   }
+  setCurrentMailbox(queryMailbox || unref(mailboxes)?.[0])
 
+  // load mails
   await loadMails(unref(currentAccount).accountId, unref(currentMailbox).id)
-
   if (unref(currentMailIdQuery)) {
     await loadMail(unref(currentAccount).accountId, queryItemAsString(unref(currentMailIdQuery)))
   }
 
   isLoading.value = false
+}
+
+accountsStore.$onAction(({ after, name }) => {
+  after(() => {
+    // load mailboxes and mails when the current account is set
+    if (['loadCurrentAccount', 'setCurrentAccount'].includes(name) && unref(currentAccount)) {
+      currentAccountIdQuery.value = unref(currentAccount).accountId
+      loadMailboxesAndMails()
+    }
+  })
+})
+
+onMounted(() => {
+  mailComposeEventToken = eventBus.subscribe('app.mail.show-compose-mail', onComposeMail)
+  loadCurrentAccount({
+    client: httpAuthenticated,
+    query: queryItemAsString(unref(currentAccountIdQuery))
+  })
 })
 
 onUnmounted(() => {

packages/web-pkg/src/components/Groupware/Accounts/AccountsSwitch.vue

@@ -7,7 +7,7 @@
     justify-content="space-between"
     no-hover
   >
-    <app-loading-spinner v-if="isLoading" />
+    <oc-spinner v-if="isLoading" :aria-label="$gettext('Loading accounts')" />
     <div v-else class="flex justify-between items-center w-full">
       <div class="flex items-center truncate">
         <oc-avatar :user-name="currentAccount?.name || ''" />
@@ -56,15 +56,12 @@
 
 <script setup lang="ts">
 import type { GroupwareAccount } from '../../../composables/piniaStores/groupware'
-import { useLoadAccounts } from '../../../composables/groupware/useLoadAccounts'
 import { useGroupwareAccountsStore } from '../../../composables/piniaStores/groupware/accounts'
 import { storeToRefs } from 'pinia'
-import AppLoadingSpinner from '../../../components/AppLoadingSpinner.vue'
 
 const accountsStore = useGroupwareAccountsStore()
-const { accounts, currentAccount } = storeToRefs(accountsStore)
+const { accounts, currentAccount, isLoading } = storeToRefs(accountsStore)
 const { setCurrentAccount } = accountsStore
-const { isLoading } = useLoadAccounts()
 
 const onSelectAccount = (account: GroupwareAccount) => {
   setCurrentAccount(account)

packages/web-pkg/src/composables/index.ts

@@ -13,7 +13,6 @@ export * from './eventBus'
 export * from './fileListHeaderPosition'
 export * from './filesList'
 export * from './folderLink'
-export * from './groupware'
 export * from './isTopBarSticky'
 export * from './keyboardActions'
 export * from './links'

packages/web-pkg/src/composables/piniaStores/groupware/accounts.ts

@@ -1,10 +1,14 @@
 import { defineStore } from 'pinia'
 import { computed, ref, unref } from 'vue'
-import { GroupwareAccount } from './types'
-import { useRouteQuery } from '../../router'
+import { AccountSchema, GroupwareAccount } from './types'
+import { useTask } from 'vue-concurrency'
+import { urlJoin } from '@opencloud-eu/web-client'
+import z from 'zod'
+import { useConfigStore } from '../config'
+import { HttpClient } from '../../../http'
 
 export const useGroupwareAccountsStore = defineStore('accounts', () => {
-  const currentAccountIdQuery = useRouteQuery('accountId')
+  const configStore = useConfigStore()
 
   const accounts = ref<GroupwareAccount[]>([])
   const currentAccountId = ref<string>()
@@ -33,13 +37,11 @@ export const useGroupwareAccountsStore = defineStore('accounts', () => {
 
     if (values.some((v) => v.accountId === unref(currentAccountId))) {
       currentAccountId.value = null
-      currentAccountIdQuery.value = null
     }
   }
 
   const setCurrentAccount = (data: GroupwareAccount) => {
     currentAccountId.value = data.accountId
-    currentAccountIdQuery.value = data?.accountId
   }
 
   const updateAccountField = <T extends GroupwareAccount>({
@@ -60,7 +62,38 @@ export const useGroupwareAccountsStore = defineStore('accounts', () => {
   const reset = () => {
     accounts.value = []
     currentAccountId.value = null
-    currentAccountIdQuery.value = null
+  }
+
+  const isLoading = computed(() => loadAccountsTask.isRunning ?? false)
+
+  const loadAccountsTask = useTask(function* (signal, client: HttpClient) {
+    try {
+      const { data } = yield client.get(urlJoin(configStore.groupwareUrl, `accounts`), { signal })
+      const accounts = z.array(AccountSchema).parse(data)
+      setAccounts(accounts)
+      return accounts
+    } catch (e) {
+      console.error('Failed to load accounts:', e)
+      throw e
+    }
+  }).restartable()
+
+  const loadAccounts = async (client: HttpClient) => {
+    return await loadAccountsTask.perform(client)
+  }
+
+  // loads accounts if not already loaded and sets the current account based on the provided query or defaults to the first account
+  const loadCurrentAccount = async ({ client, query }: { client: HttpClient; query?: string }) => {
+    if (!unref(accounts).length) {
+      await loadAccounts(client)
+    }
+
+    let queryAccount: GroupwareAccount | undefined
+    if (query) {
+      queryAccount = unref(accounts).find(({ accountId }) => accountId === query)
+    }
+
+    setCurrentAccount(queryAccount || unref(accounts)[0])
   }
 
   return {
@@ -71,7 +104,10 @@ export const useGroupwareAccountsStore = defineStore('accounts', () => {
     upsertAccount,
     removeAccounts,
     setCurrentAccount,
-    reset
+    reset,
+    loadAccounts,
+    loadCurrentAccount,
+    isLoading
   }
 })