refactor: convert userDashboardStore to proper store

- removes the composable wrapper from `useUserDashboardStore`
- makes sure that all refs from the store are properly converted with `storeToRefs`

frontend/components/dashboard/DashboardControls.vue

@@ -9,7 +9,6 @@ import {
   faUsers,
 } from '@fortawesome/pro-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-
 import type { DynamicDialogCloseOptions } from 'primevue/dynamicdialogoptions'
 import {
   BcDialogConfirm,
@@ -44,10 +43,12 @@ const {
   setDashboardKey,
 } = useDashboardKey()
 const { refreshOverview } = useValidatorDashboardOverviewStore()
+const userDashboardStore = useUserDashboardStore()
 const {
-  dashboards, getDashboardLabel, refreshDashboards, updateGuestDashboardKey,
-}
-  = useUserDashboardStore()
+  getDashboardLabel, refreshDashboards, updateGuestDashboardKey,
+} = userDashboardStore
+
+const { dashboards } = storeToRefs(userDashboardStore)
 
 const { t: $t } = useTranslation()
 const { width } = useWindowSize()

frontend/components/dashboard/DashboardHeader.vue

@@ -2,7 +2,6 @@
 import type {
   MenuBarButton, MenuBarEntry,
 } from '~/types/menuBar'
-import { useUserDashboardStore } from '~/stores/dashboard/useUserDashboardStore'
 import {
   type Dashboard, type DashboardKey, type DashboardType, GUEST_DASHBOARD_ID, type GuestDashboard,
 } from '~/types/dashboard'
@@ -14,7 +13,7 @@ const router = useRouter()
 const { has } = useFeatureFlag()
 
 const { isLoggedIn } = useUserStore()
-const { dashboards } = useUserDashboardStore()
+const { dashboards } = storeToRefs(useUserDashboardStore())
 const {
   dashboardKey, dashboardType, isSharedDashboard, setDashboardKey,
 } = useDashboardKey()

frontend/components/dashboard/GroupManagementModal.vue

@@ -8,7 +8,6 @@ import type { DataTableSortEvent } from 'primevue/datatable'
 import {
   BcDialogConfirm, BcPremiumModal,
 } from '#components'
-import { useValidatorDashboardOverviewStore } from '~/stores/dashboard/useValidatorDashboardOverviewStore'
 import type { ApiPagingResponse } from '~/types/api/common'
 import type { VDBOverviewGroup } from '~/types/api/validator_dashboard'
 import type {
@@ -34,7 +33,7 @@ const visible = defineModel<boolean>()
 
 const { refreshOverview } = useValidatorDashboardOverviewStore()
 const { groups } = useValidatorDashboardGroups()
-const { dashboards } = useUserDashboardStore()
+const { dashboards } = storeToRefs(useUserDashboardStore())
 const { user } = useUserStore()
 
 const cursor = ref<Cursor>(0)

frontend/components/dashboard/SharedDashboardModal.vue

@@ -8,7 +8,7 @@ const cookiePreference = useCookie<CookiesPreference>(
   { default: () => undefined },
 )
 const { isSharedDashboard } = useDashboardKey()
-const { dashboards } = useUserDashboardStore()
+const { dashboards } = storeToRefs(useUserDashboardStore())
 const { t: $t } = useTranslation()
 const route = useRoute()
 

frontend/components/dashboard/creation/DashboardCreationController.vue

@@ -7,11 +7,16 @@ import {
 import { type ChainIDs } from '~/types/network'
 import { API_PATH } from '~/types/customFetch'
 
+const userDashboardStore = useUserDashboardStore()
 const {
-  createAccountDashboard, createValidatorDashboard,
-}
-  = useUserDashboardStore()
-const { dashboards } = useUserDashboardStore()
+  createAccountDashboard,
+  createValidatorDashboard,
+} = userDashboardStore
+
+const {
+  dashboards,
+} = storeToRefs(userDashboardStore)
+
 const {
   isLoggedIn, user,
 } = useUserStore()

frontend/components/notifications/NotificationsTableEmpty.vue

@@ -21,10 +21,15 @@ const handleClick = () => {
   }
   emit('openDialog')
 }
+
+const userDashboardStore = useUserDashboardStore()
 const {
-  dashboards,
   refreshDashboards,
-} = useUserDashboardStore()
+} = userDashboardStore
+
+const {
+  dashboards,
+} = storeToRefs(userDashboardStore)
 
 if (!dashboards.value) {
   refreshDashboards()

frontend/pages/dashboard/[[id]]/index.vue

@@ -65,15 +65,19 @@ const tabs: HashTabs = [
 const {
   dashboardKey, setDashboardKey,
 } = useDashboardKeyProvider('validator')
+
+const userDashboardStore = useUserDashboardStore()
 const {
-  cookieDashboards,
-  dashboards,
   getDashboardLabel,
   refreshDashboards,
   updateGuestDashboardKey,
-} = useUserDashboardStore()
-// when we run into an error loading a dashboard keep it here to prevent an infinity loop
-const errorDashboardKeys: string[] = []
+} = userDashboardStore
+
+const {
+  cookieDashboards,
+  dashboards,
+} = storeToRefs(userDashboardStore)
+await useAsyncData('user_dashboards', () => refreshDashboards(), { watch: [ isLoggedIn ] })
 
 const seoTitle = computed(() => {
   return getDashboardLabel(dashboardKey.value, 'validator')
@@ -122,12 +126,13 @@ function showDashboardCreationDialog() {
   dashboardCreationControllerModal.value?.show()
 }
 
+// when we run into an error loading a dashboard keep it here to prevent an infinity loop
+const errorDashboardKeys: string[] = []
 const setDashboardKeyIfNoError = (key: string) => {
   if (!errorDashboardKeys.includes(key)) {
     setDashboardKey(key)
   }
 }
-
 watch(
   [
     dashboardKey,

frontend/stores/dashboard/useUserDashboardStore.ts

@@ -1,4 +1,3 @@
-import { defineStore } from 'pinia'
 import { warn } from 'vue'
 import type {
   GetUserDashboardsResponse,
@@ -19,20 +18,12 @@ import {
   isGuestDashboardKey, isSharedDashboardKey,
 } from '~/utils/dashboard/key'
 
-const userDashboardStore = defineStore('user_dashboards_store', () => {
-  const data = ref<null | undefined | UserDashboardsData>()
-  return { data }
-})
-
-export function useUserDashboardStore() {
+export const useUserDashboardStore = defineStore('user_dashboards_store', () => {
   const { fetch } = useCustomFetch()
   const { t: $t } = useTranslation()
-  const { data } = storeToRefs(userDashboardStore())
   const { isLoggedIn } = useUserStore()
   const dashboardCookie = useCookie(COOKIE_KEY.USER_DASHBOARDS)
-
-  const dashboards = computed(() => data.value)
-
+  const dashboards = ref<UserDashboardsData>()
   const cookieDashboards = computed(() => {
     if (dashboardCookie.value) {
       if (typeof dashboardCookie.value === 'object') {
@@ -50,7 +41,7 @@ export function useUserDashboardStore() {
       const res = await fetch<GetUserDashboardsResponse>(
         API_PATH.USER_DASHBOARDS,
       )
-      data.value = res.data
+      dashboards.value = res.data
 
       // add fallback names for dashboards that have no names
       if (dashboards.value) {
@@ -67,13 +58,13 @@ export function useUserDashboardStore() {
       }
     }
     else {
-      data.value = cookieDashboards.value
+      dashboards.value = cookieDashboards.value
     }
     return dashboards.value
   }
 
   // Guest dashboards are saved in a cookie (so that it's accessable during SSR)
-  function saveToCookie(db: null | undefined | UserDashboardsData) {
+  function saveToCookie(db: UserDashboardsData) {
     if (isLoggedIn.value) {
       warn('saveToCookie should only be called when not logged in')
       return
@@ -94,11 +85,11 @@ export function useUserDashboardStore() {
         key: dashboardKey ?? '',
         name: '',
       }
-      data.value = {
+      dashboards.value = {
         account_dashboards: dashboards.value?.account_dashboards || [],
         validator_dashboards: [ gd as ValidatorDashboard ],
       }
-      saveToCookie(data.value)
+      saveToCookie(dashboards.value)
       return gd
     }
     // Create user specific Validator dashboard
@@ -112,7 +103,7 @@ export function useUserDashboardStore() {
       },
     )
     if (res.data) {
-      data.value = {
+      dashboards.value = {
         account_dashboards: dashboards.value?.account_dashboards || [],
         validator_dashboards: [
           ...(dashboards.value?.validator_dashboards || []),
@@ -141,11 +132,11 @@ export function useUserDashboardStore() {
         key: dashboardKey ?? '',
         name: '',
       }
-      data.value = {
+      dashboards.value = {
         account_dashboards: [ gd ],
         validator_dashboards: dashboards.value?.validator_dashboards || [],
       }
-      saveToCookie(data.value)
+      saveToCookie(dashboards.value)
       return gd
     }
     // Create user specific account dashboard
@@ -154,7 +145,7 @@ export function useUserDashboardStore() {
       { body: { name } },
     )
     if (res.data) {
-      data.value = {
+      dashboards.value = {
         account_dashboards: [
           ...(dashboards.value?.account_dashboards || []),
           {
@@ -181,7 +172,7 @@ export function useUserDashboardStore() {
         ...dashboards.value?.validator_dashboards?.[0],
         key,
       }
-      data.value = {
+      dashboards.value = {
         account_dashboards: dashboards.value?.account_dashboards || [],
         validator_dashboards: [ gd as ValidatorDashboard ],
       }
@@ -193,12 +184,12 @@ export function useUserDashboardStore() {
         ...dashboards.value?.account_dashboards?.[0],
         key,
       }
-      data.value = {
+      dashboards.value = {
         account_dashboards: [ gd ],
         validator_dashboards: dashboards.value?.validator_dashboards || [],
       }
     }
-    saveToCookie(data.value)
+    saveToCookie(dashboards.value)
   }
 
   function getDashboardLabel(key: DashboardKey, type: DashboardType): string {
@@ -232,4 +223,4 @@ export function useUserDashboardStore() {
     refreshDashboards,
     updateGuestDashboardKey,
   }
-}
+})