From 537f4ed3aea54a232d47beffdecd63c2511b209e Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Fri, 18 Nov 2022 17:33:35 +0100
Subject: [PATCH] fix issues with new composable and store methods

---
 src/components/home/TheNavigation.vue  | 4 ++--
 src/router/index.ts                    | 5 +++++
 src/stores/lists.ts                    | 3 +--
 src/views/list/settings/background.vue | 9 ++++-----
 src/views/list/settings/delete.vue     | 5 +++--
 5 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/components/home/TheNavigation.vue b/src/components/home/TheNavigation.vue
index 0852c9098..625cce01e 100644
--- a/src/components/home/TheNavigation.vue
+++ b/src/components/home/TheNavigation.vue
@@ -1,6 +1,6 @@
 <template>
 	<header
-		:class="{'has-background': background, 'menu-active': menuActive}"
+		:class="{'has-background': hasBackground, 'menu-active': menuActive}"
 		aria-label="main navigation"
 		class="navbar main-theme is-fixed-top d-print-none"
 	>
@@ -114,7 +114,7 @@ import {useAuthStore} from '@/stores/auth'
 
 const baseStore = useBaseStore()
 const currentList = computed(() => baseStore.currentList)
-const background = computed(() => baseStore.background)
+const hasBackground = computed(() => Boolean(baseStore.currentList?.backgroundInformation))
 const canWriteCurrentList = computed(() => baseStore.currentList.maxRight > Rights.READ)
 const menuActive = computed(() => baseStore.menuActive)
 
diff --git a/src/router/index.ts b/src/router/index.ts
index f84ec895b..07adbf3bc 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -275,6 +275,7 @@ const router = createRouter({
 			meta: {
 				showAsModal: true,
 			},
+			props: route => ({ namespaceId: Number(route.params.namespaceId as string) }),
 		},
 		{
 			path: '/lists/:listId/settings/edit',
@@ -292,6 +293,7 @@ const router = createRouter({
 			meta: {
 				showAsModal: true,
 			},
+			props: route => ({ listId: Number(route.params.listId as string) }),
 		},
 		{
 			path: '/lists/:listId/settings/duplicate',
@@ -309,6 +311,7 @@ const router = createRouter({
 			meta: {
 				showAsModal: true,
 			},
+			props: route => ({ listId: Number(route.params.listId as string) }),
 		},
 		{
 			path: '/lists/:listId/settings/delete',
@@ -317,6 +320,7 @@ const router = createRouter({
 			meta: {
 				showAsModal: true,
 			},
+			props: route => ({ listId: Number(route.params.listId as string) }),
 		},
 		{
 			path: '/lists/:listId/settings/archive',
@@ -325,6 +329,7 @@ const router = createRouter({
 			meta: {
 				showAsModal: true,
 			},
+			props: route => ({ listId: Number(route.params.listId as string) }),
 		},
 		{
 			path: '/lists/:listId/settings/edit',
diff --git a/src/stores/lists.ts b/src/stores/lists.ts
index 3308994b8..950ee2d65 100644
--- a/src/stores/lists.ts
+++ b/src/stores/lists.ts
@@ -3,6 +3,7 @@ import type {MaybeRef} from '@vueuse/core'
 import {acceptHMRUpdate, defineStore} from 'pinia'
 import {useI18n} from 'vue-i18n'
 import {useRouter} from 'vue-router'
+import router from '@/router'
 
 import type {IList} from '@/modelTypes/IList'
 import type {INamespace} from '@/modelTypes/INamespace'
@@ -36,8 +37,6 @@ export interface ListState {
 }
 
 export const useListStore = defineStore('list', () => {
-	const router = useRouter()
-
 	const baseStore = useBaseStore()
 	const namespaceStore = useNamespaceStore()
 
diff --git a/src/views/list/settings/background.vue b/src/views/list/settings/background.vue
index 7363344e2..86b8ea52b 100644
--- a/src/views/list/settings/background.vue
+++ b/src/views/list/settings/background.vue
@@ -104,19 +104,19 @@ import debounce from 'lodash.debounce'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 import CustomTransition from '@/components/misc/CustomTransition.vue'
+import CreateEdit from '@/components/misc/create-edit.vue'
 
 import {useBaseStore} from '@/stores/base'
 import {useListStore} from '@/stores/lists'
 import {useConfigStore} from '@/stores/config'
 
 import BackgroundUnsplashService from '@/services/backgroundUnsplash'
-import ListService from '@/services/list'
 
 import {useTitle} from '@/composables/useTitle'
 
-import CreateEdit from '@/components/misc/create-edit.vue'
 import type {IBackgroundImage} from '@/modelTypes/IBackgroundImage'
 import type {IList} from '@/modelTypes/IList'
+import {getBlurHash} from '@/helpers/blurhash'
 
 const SEARCH_DEBOUNCE = 300
 
@@ -141,13 +141,12 @@ const debounceNewBackgroundSearch = debounce(newBackgroundSearch, SEARCH_DEBOUNC
 	trailing: true,
 })
 
-const listService = shallowReactive(new ListService())
 const listStore = useListStore()
 const configStore = useConfigStore()
 
 const unsplashBackgroundEnabled = computed(() => configStore.enabledBackgroundProviders.includes('unsplash'))
 const uploadBackgroundEnabled = computed(() => configStore.enabledBackgroundProviders.includes('upload'))
-const hasBackground = computed(() => baseStore.background !== null)
+const hasBackground = computed(() => baseStore.currentList?.backgroundInformation !== undefined)
 
 // Show the default collection of backgrounds
 newBackgroundSearch()
@@ -169,7 +168,7 @@ async function searchBackgrounds(page = 1) {
 	const result = await backgroundService.getAll({}, {s: backgroundSearchTerm.value, p: page})
 	backgroundSearchResult.value = backgroundSearchResult.value.concat(result)
 	result.forEach((background: IBackgroundImage) => {
-		listService.getBlurHash(background.blurHash).then((b) => {
+		getBlurHash(background.blurHash).then((b) => {
 			backgroundBlurHashes.value[background.id] = b
 		})
 
diff --git a/src/views/list/settings/delete.vue b/src/views/list/settings/delete.vue
index 92bff0306..34618cf20 100644
--- a/src/views/list/settings/delete.vue
+++ b/src/views/list/settings/delete.vue
@@ -54,9 +54,10 @@ watch(
 		await taskCollectionService.getAll({listId: currentListId})
 		totalTasks.value = taskCollectionService.totalPages * taskCollectionService.resultCount
 	},
+	{immediate: true},
+
 )
 
-useTitle(() => t('list.delete.title', {list: list?.value?.title}))
-
 const {list, deleteList} = useList(listId)
+useTitle(() => t('list.delete.title', {list: list?.value?.title}))
 </script>