feat: move loading logic from ready to base store

frontend/src/App.vue

@@ -1,10 +1,10 @@
 <template>
 	<Ready>
-		<template v-if="authUser">
+		<template v-if="authStore.authUser">
 			<AppHeader />
 			<ContentAuth />
 		</template>
-		<ContentLinkShare v-else-if="authLinkShare" />
+		<ContentLinkShare v-else-if="authStore.authLinkShare" />
 		<NoAuthWrapper v-else>
 			<RouterView />
 		</NoAuthWrapper>
@@ -49,17 +49,15 @@ import DemoMode from '@/components/home/DemoMode.vue'
 const importAccountDeleteService = () => import('@/services/accountDelete')
 import {success} from '@/message'
 
-const baseStore = useBaseStore()
 const authStore = useAuthStore()
+const baseStore = useBaseStore()
+
 const router = useRouter()
 const route = useRoute()
 
 useBodyClass('is-touch', isTouchDevice())
 const keyboardShortcutsActive = computed(() => baseStore.keyboardShortcutsActive)
 
-const authUser = computed(() => authStore.authUser)
-const authLinkShare = computed(() => authStore.authLinkShare)
-
 const {t} = useI18n({useScope: 'global'})
 
 // setup account deletion verification

frontend/src/components/misc/Ready.vue

@@ -15,12 +15,12 @@
 			<p>{{ $t('offline.text') }}</p>
 		</div>
 	</div>
-	<template v-else-if="ready">
+	<template v-else-if="baseStore.ready">
 		<slot />
 	</template>
-	<section v-else-if="error !== ''">
+	<section v-else-if="baseStore.error !== ''">
 		<NoAuthWrapper :show-api-config="false">
-			<p v-if="error === ERROR_NO_API_URL">
+			<p v-if="baseStore.error === ERROR_NO_API_URL">
 				{{ $t('ready.noApiUrlConfigured') }}
 			</p>
 			<Message
@@ -30,7 +30,7 @@
 			>
 				<p>
 					{{ $t('ready.errorOccured') }}<br>
-					{{ error }}
+					{{ baseStore.error }}
 				</p>
 				<p>
 					{{ $t('ready.checkApiUrl') }}
@@ -38,13 +38,13 @@
 			</Message>
 			<ApiConfig
 				:configure-open="true"
-				@foundApi="load"
+				@foundApi="baseStore.loadApp()"
 			/>
 		</NoAuthWrapper>
 	</section>
 	<CustomTransition name="fade">
 		<section
-			v-if="showLoading"
+			v-if="baseStore.loading"
 			class="vikunja-loading"
 		>
 			<Logo class="logo" />
@@ -57,60 +57,19 @@
 </template>
 
 <script lang="ts" setup>
-import {ref, computed} from 'vue'
-import {useRouter, useRoute} from 'vue-router'
-
 import Logo from '@/assets/logo.svg?component'
 import ApiConfig from '@/components/misc/ApiConfig.vue'
 import Message from '@/components/misc/Message.vue'
 import CustomTransition from '@/components/misc/CustomTransition.vue'
 import NoAuthWrapper from '@/components/misc/NoAuthWrapper.vue'
 
-import {ERROR_NO_API_URL, InvalidApiUrlProvidedError, NoApiUrlProvidedError} from '@/helpers/checkAndSetApiUrl'
+import {ERROR_NO_API_URL} from '@/helpers/checkAndSetApiUrl'
+
 import {useOnline} from '@/composables/useOnline'
-
-import {getAuthForRoute} from '@/router'
-
 import {useBaseStore} from '@/stores/base'
-import {useAuthStore} from '@/stores/auth'
-import {useI18n} from 'vue-i18n'
 
-const router = useRouter()
-const route = useRoute()
-
-const baseStore = useBaseStore()
-const authStore = useAuthStore()
-
-const ready = computed(() => baseStore.ready)
 const online = useOnline()
-
-const error = ref('')
-const showLoading = computed(() => !ready.value && error.value === '')
-
-const {t} = useI18n()
-
-async function load() {
-	try {
-		await baseStore.loadApp()
-		baseStore.setReady(true)
-		const redirectTo = await getAuthForRoute(route, authStore)
-		if (typeof redirectTo !== 'undefined') {
-			await router.push(redirectTo)
-		}
-	} catch (e: unknown) {
-		if (e instanceof NoApiUrlProvidedError) {
-			error.value = ERROR_NO_API_URL
-			return
-		}
-		if (e instanceof InvalidApiUrlProvidedError) {
-			error.value = t('apiConfig.error')
-			return
-		}
-		error.value = String(e.message)
-	}
-}
-
-load()
+const baseStore = useBaseStore()
 </script>
 
 <style lang="scss" scoped>

frontend/src/stores/base.ts

@@ -1,11 +1,14 @@
-import { readonly, ref} from 'vue'
+import {ref, computed, readonly} from 'vue'
+import {useI18n} from 'vue-i18n'
+import {useRouter, useRoute} from 'vue-router'
 import {defineStore, acceptHMRUpdate} from 'pinia'
 
+import {getAuthForRoute} from '@/router'
 import {getBlobFromBlurHash} from '@/helpers/getBlobFromBlurHash'
 
 import ProjectModel from '@/models/project'
-import ProjectService from '../services/project'
-import {checkAndSetApiUrl} from '@/helpers/checkAndSetApiUrl'
+import ProjectService from '@/services/project'
+import {checkAndSetApiUrl, ERROR_NO_API_URL, InvalidApiUrlProvidedError, NoApiUrlProvidedError} from '@/helpers/checkAndSetApiUrl'
 
 import {useMenuActive} from '@/composables/useMenuActive'
 
@@ -15,8 +18,16 @@ import type {Right} from '@/constants/rights'
 import type {IProjectView} from '@/modelTypes/IProjectView'
 
 export const useBaseStore = defineStore('base', () => {
-	const loading = ref(false)
+	const authStore = useAuthStore()
+	
+	const {t} = useI18n()
+
+	const router = useRouter()
+	const route = useRoute()
+
 	const ready = ref(false)
+	const error = ref('')
+	const loading = computed(() => !ready.value && error.value === '')
 
 	// This is used to highlight the current project in menu for all project related views
 	const currentProject = ref<IProject | null>(new ProjectModel({
@@ -33,10 +44,6 @@ export const useBaseStore = defineStore('base', () => {
 	const logoVisible = ref(true)
 	const updateAvailable = ref(false)
 
-	function setLoading(newLoading: boolean) {
-		loading.value = newLoading
-	}
-
 	function setCurrentProject(newCurrentProject: IProject | null, currentViewId?: IProjectView['id']) {
 		// Server updates don't return the right. Therefore, the right is reset after updating the project which is
 		// confusing because all the buttons will disappear in that case. To prevent this, we're keeping the right
@@ -91,10 +98,6 @@ export const useBaseStore = defineStore('base', () => {
 		logoVisible.value = visible
 	}
 	
-	function setReady(value: boolean) {
-		ready.value = value
-	}
-	
 	function setUpdateAvailable(value: boolean) {
 		updateAvailable.value = value
 	}
@@ -139,16 +142,36 @@ export const useBaseStore = defineStore('base', () => {
 		setCurrentProject(project, currentProjectViewId)
 	}
 
-	const authStore = useAuthStore()
 	async function loadApp() {
-		await checkAndSetApiUrl(window.API_URL)
-		await authStore.checkAuth()
-		ready.value = true
+		try {
+			await checkAndSetApiUrl(window.API_URL)
+			await authStore.checkAuth()
+			ready.value = true
+			const redirectTo = await getAuthForRoute(route, authStore)
+			if (typeof redirectTo !== 'undefined') {
+				await router.push(redirectTo)
+			}
+		} catch (e: unknown) {
+			if (e instanceof NoApiUrlProvidedError) {
+				error.value = ERROR_NO_API_URL
+				return
+			}
+			if (e instanceof InvalidApiUrlProvidedError) {
+				error.value = t('apiConfig.error')
+				return
+			}
+			error.value = String(e.message)
+		}
 	}
 
+	loadApp()
+
 	return {
+		error: readonly(error),
 		loading: readonly(loading),
 		ready: readonly(ready),
+		loadApp,
+
 		currentProject: readonly(currentProject),
 		currentProjectViewId: readonly(currentProjectViewId),
 		background: readonly(background),
@@ -159,8 +182,6 @@ export const useBaseStore = defineStore('base', () => {
 		logoVisible: readonly(logoVisible),
 		updateAvailable: readonly(updateAvailable),
 
-		setLoading,
-		setReady,
 		setCurrentProject,
 		setCurrentProjectViewId,
 		setHasTasks,
@@ -172,7 +193,6 @@ export const useBaseStore = defineStore('base', () => {
 		setUpdateAvailable,
 
 		handleSetCurrentProject,
-		loadApp,
 
 		...useMenuActive(),
 	}