From 78fa5742c34490bb1f045a244b36ef87879081ec Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <6173598+dpschen@users.noreply.github.com>
Date: Mon, 16 Jun 2025 16:02:59 +0200
Subject: [PATCH] fix: guard null access in composables (#951)

---
 frontend/src/composables/useProjectBackground.ts |  7 +++++--
 frontend/src/composables/useRenewTokenOnFocus.ts |  2 +-
 frontend/src/composables/useRouteWithModal.ts    | 12 ++++++++----
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/frontend/src/composables/useProjectBackground.ts b/frontend/src/composables/useProjectBackground.ts
index 23fcd19ff..17dfb2819 100644
--- a/frontend/src/composables/useProjectBackground.ts
+++ b/frontend/src/composables/useProjectBackground.ts
@@ -3,13 +3,16 @@ import ProjectService from '@/services/project'
 import type {IProject} from '@/modelTypes/IProject'
 import {getBlobFromBlurHash} from '@/helpers/getBlobFromBlurHash'
 
-export function useProjectBackground(project: MaybeRefOrGetter<IProject>) {
+export function useProjectBackground(project: MaybeRefOrGetter<IProject | null>) {
 	const background = ref<string | null>(null)
 	const backgroundLoading = ref(false)
 	const blurHashUrl = ref('')
 
 	watch(
-		() => [toValue(project).id, toValue(project)?.backgroundBlurHash] as [IProject['id'], IProject['backgroundBlurHash']],
+		() => [
+				toValue(project)?.id ?? null,
+				toValue(project)?.backgroundBlurHash ?? null,
+		] as [IProject['id'] | null, IProject['backgroundBlurHash'] | null],
 		async ([projectId, blurHash], oldValue) => {
 			const projectValue = toValue(project)
 			if (
diff --git a/frontend/src/composables/useRenewTokenOnFocus.ts b/frontend/src/composables/useRenewTokenOnFocus.ts
index 5647d1b7e..adbcfe20b 100644
--- a/frontend/src/composables/useRenewTokenOnFocus.ts
+++ b/frontend/src/composables/useRenewTokenOnFocus.ts
@@ -25,7 +25,7 @@ export function useRenewTokenOnFocus() {
 		}
 
 		const nowInSeconds = new Date().getTime() / MILLISECONDS_A_SECOND
-		const expiresIn = userInfo.value !== null
+		const expiresIn = userInfo.value
 			? userInfo.value.exp - nowInSeconds
 			: 0
 
diff --git a/frontend/src/composables/useRouteWithModal.ts b/frontend/src/composables/useRouteWithModal.ts
index 3f26cf2d3..fd5ad58ea 100644
--- a/frontend/src/composables/useRouteWithModal.ts
+++ b/frontend/src/composables/useRouteWithModal.ts
@@ -6,7 +6,7 @@ import {useProjectStore} from '@/stores/projects'
 export function useRouteWithModal() {
 	const router = useRouter()
 	const route = useRoute()
-	const backdropView = computed(() => route.fullPath && window.history.state.backdropView)
+	const backdropView = computed(() => route.fullPath ? window.history.state.backdropView : undefined)
 	const baseStore = useBaseStore()
 	const projectStore = useProjectStore()
 
@@ -55,7 +55,7 @@ export function useRouteWithModal() {
 		currentModal.value = h(component, routeProps)
 	})
 
-	const historyState = computed(() => route.fullPath && window.history.state)
+	const historyState = computed(() => route.fullPath ? window.history.state : undefined)
 
 	function closeModal() {
 
@@ -63,7 +63,9 @@ export function useRouteWithModal() {
 		// we need to reflect that change in the route when they close the task modal.
 		// The last route is only available as resolved string, therefore we need to use a regex for matching here
 		const routeMatch = new RegExp('\\/projects\\/\\d+\\/(\\d+)', 'g')
-		const match = routeMatch.exec(historyState.value.back)
+		const match = historyState.value?.back
+			? routeMatch.exec(historyState.value.back)
+			: null
 		if (match !== null && baseStore.currentProject) {
 			let viewId: string | number = match[1]
 
@@ -86,7 +88,9 @@ export function useRouteWithModal() {
 			router.back()
 		} else {
 			const backdropRoute = historyState.value?.backdropView && router.resolve(historyState.value.backdropView)
-			router.push(backdropRoute)
+			if (backdropRoute) {
+				router.push(backdropRoute)
+			}
 		}
 	}