fix: properly set list backgrounds when switching between lists

Probably caused by the blur hash feature, switching between lists would not work if the list background was set via unsplash. I've refactored the whole decision tree which checks if a background should be loaded or not. It actually does not matter where the background is from (unsplash or upload) or if we had one in the last list - we only need to know if the current list has a background or if we just changed it and need to update right away.

src/store/index.ts

@@ -95,64 +95,40 @@ export const store = createStore({
 		},
 	},
 	actions: {
-		async [CURRENT_LIST]({state, commit}, currentList) {
+		async [CURRENT_LIST]({state, commit}, {list, forceUpdate = false}) {
 
-			if (currentList === null) {
+			if (list === null) {
 				commit(CURRENT_LIST, {})
 				commit(BACKGROUND, null)
 				commit(BLUR_HASH, null)
 				return
 			}
 
-			// Not sure if this is the right way to do it but hey, it works
+			// The forceUpdate parameter is used only when updating a list background directly because in that case 
-			if (
+			// the current list stays the same, but we want to show the new background right away.
-				// List changed
+			if (list.id !== state.currentList.id || forceUpdate) {
-				currentList.id !== state.currentList.id ||
+				if (list.backgroundInformation) {
-				// The current list got a new background and didn't have one previously
-				(
-					currentList.backgroundInformation &&
-					!state.currentList.backgroundInformation
-				) ||
-				// The current list got a new background and had one previously
-				(
-					currentList.backgroundInformation &&
-					currentList.backgroundInformation.unsplashId &&
-					state.currentList &&
-					state.currentList.backgroundInformation &&
-					state.currentList.backgroundInformation.unsplashId &&
-					currentList.backgroundInformation.unsplashId !== state.currentList.backgroundInformation.unsplashId
-				) ||
-				// The new list has a background which is not an unsplash one and did not have one previously
-				(
-					currentList.backgroundInformation &&
-					currentList.backgroundInformation.type &&
-					state.currentList &&
-					state.currentList.backgroundInformation &&
-					state.currentList.backgroundInformation.type
-				)
-			) {
-				if (currentList.backgroundInformation) {
 					try {
-						const blurHash = await getBlobFromBlurHash(currentList.backgroundBlurHash)
+						const blurHash = await getBlobFromBlurHash(list.backgroundBlurHash)
 						if (blurHash) {
 							commit(BLUR_HASH, window.URL.createObjectURL(blurHash))
 						}
 
 						const listService = new ListService()
-						const background = await listService.background(currentList)
+						const background = await listService.background(list)
 						commit(BACKGROUND, background)
 					} catch (e) {
-						console.error('Error getting background image for list', currentList.id, e)
+						console.error('Error getting background image for list', list.id, e)
 					}
 				}
 			}
 
-			if (typeof currentList.backgroundInformation === 'undefined' || currentList.backgroundInformation === null) {
+			if (typeof list.backgroundInformation === 'undefined' || list.backgroundInformation === null) {
 				commit(BACKGROUND, null)
 				commit(BLUR_HASH, null)
 			}
 
-			commit(CURRENT_LIST, currentList)
+			commit(CURRENT_LIST, list)
 		},
 		async loadApp({dispatch}) {
 			await checkAndSetApiUrl(window.API_URL)

src/views/list/ListWrapper.vue

@@ -146,14 +146,14 @@ async function loadList(listIdToLoad: number) {
 	if (listFromStore !== null) {
 		store.commit(BACKGROUND, null)
 		store.commit(BLUR_HASH, null)
-		store.commit(CURRENT_LIST, listFromStore)
+		store.dispatch(CURRENT_LIST, {list: listFromStore})
 	}
 
 	// We create an extra list object instead of creating it in list.value because that would trigger a ui update which would result in bad ux.
 	const list = new ListModel(listData)
 	try {
 		const loadedList = await listService.value.get(list)
-		await store.dispatch(CURRENT_LIST, loadedList)
+		await store.dispatch(CURRENT_LIST, {list: loadedList})
 	} finally {
 		loadedListId.value = props.listId
 	}

src/views/list/settings/background.vue

@@ -153,7 +153,7 @@ export default defineComponent({
 			}
 
 			const list = await this.backgroundService.update({id: backgroundId, listId: this.$route.params.listId})
-			await this.$store.dispatch(CURRENT_LIST, list)
+			await this.$store.dispatch(CURRENT_LIST, {list, forceUpdate: true})
 			this.$store.commit('namespaces/setListInNamespaceById', list)
 			this.$store.commit('lists/setList', list)
 			this.$message.success({message: this.$t('list.background.success')})
@@ -165,7 +165,7 @@ export default defineComponent({
 			}
 
 			const list = await this.backgroundUploadService.create(this.$route.params.listId, this.$refs.backgroundUploadInput.files[0])
-			await this.$store.dispatch(CURRENT_LIST, list)
+			await this.$store.dispatch(CURRENT_LIST, {list, forceUpdate: true})
 			this.$store.commit('namespaces/setListInNamespaceById', list)
 			this.$store.commit('lists/setList', list)
 			this.$message.success({message: this.$t('list.background.success')})
@@ -173,7 +173,7 @@ export default defineComponent({
 
 		async removeBackground() {
 			const list = await this.listService.removeBackground(this.currentList)
-			await this.$store.dispatch(CURRENT_LIST, list)
+			await this.$store.dispatch(CURRENT_LIST, {list, forceUpdate: true})
 			this.$store.commit('namespaces/setListInNamespaceById', list)
 			this.$store.commit('lists/setList', list)
 			this.$message.success({message: this.$t('list.background.removeSuccess')})

src/views/list/settings/edit.vue

@@ -105,7 +105,7 @@ export default defineComponent({
 
 		async save() {
 			await this.$store.dispatch('lists/updateList', this.list)
-			await this.$store.dispatch(CURRENT_LIST, this.list)
+			await this.$store.dispatch(CURRENT_LIST, {list: this.list})
 			this.setTitle(this.$t('list.edit.title', {list: this.list.title}))
 			this.$message.success({message: this.$t('list.edit.success')})
 			this.$router.back()

src/views/list/settings/share.vue

@@ -61,7 +61,7 @@ const userIsAdmin = computed(() => 'owner' in list.value && list.value.owner.id
 async function loadList(listId: number) {
 	const listService = new ListService()
 	const newList = await listService.get(new ListModel({id: listId}))
-	await store.dispatch(CURRENT_LIST, newList)
+	await store.dispatch(CURRENT_LIST, {list: newList})
 	list.value = newList
 }
 

src/views/tasks/TaskDetailView.vue

@@ -520,7 +520,7 @@ export default defineComponent({
 			handler(parent) {
 				const parentList = parent !== null ? parent.list : null
 				if (parentList !== null) {
-					this.$store.commit(CURRENT_LIST, parentList)
+					this.$store.dispatch(CURRENT_LIST, {list: parentList})
 				}
 			},
 			immediate: true,