fix: setting background to state mutation violation (#858)

State mutations must be synchronous. Using a promise.then handler to set the background is a violation of that.

Co-authored-by: kolaente <k@knt.li>
Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/858
Co-authored-by: konrad <k@knt.li>
Co-committed-by: konrad <k@knt.li>

src/components/home/contentAuth.vue

@@ -86,7 +86,7 @@ export default {
 				this.$route.name === 'user.settings' ||
 				this.$route.name === 'namespaces.index'
 			) {
-				this.$store.commit(CURRENT_LIST, null)
+				return this.$store.dispatch(CURRENT_LIST, null)
 			}
 		},
 		renewTokenOnFocus() {

src/store/index.js

@@ -1,5 +1,6 @@
-import { createStore } from 'vuex'
+import {createStore} from 'vuex'
 import {
+	BACKGROUND,
 	CURRENT_LIST,
 	ERROR_MESSAGE,
 	HAS_TASKS,
@@ -62,10 +63,33 @@ export const store = createStore({
 			state.online = !!import.meta.env.VITE_IS_ONLINE || online
 		},
 		[CURRENT_LIST](state, currentList) {
+			state.currentList = currentList
+		},
+		[HAS_TASKS](state, hasTasks) {
+			state.hasTasks = hasTasks
+		},
+		[MENU_ACTIVE](state, menuActive) {
+			state.menuActive = menuActive
+		},
+		toggleMenu(state) {
+			state.menuActive = !state.menuActive
+		},
+		[KEYBOARD_SHORTCUTS_ACTIVE](state, active) {
+			state.keyboardShortcutsActive = active
+		},
+		[QUICK_ACTIONS_ACTIVE](state, active) {
+			state.quickActionsActive = active
+		},
+		[BACKGROUND](state, background) {
+			state.background = background
+		},
+	},
+	actions: {
+		async [CURRENT_LIST]({state, commit}, currentList) {
 
 			if (currentList === null) {
-				state.currentList = {}
+				commit(CURRENT_LIST, {})
-				state.background = null
+				commit(BACKGROUND, null)
 				return
 			}
 
@@ -97,21 +121,18 @@ export const store = createStore({
 				)
 			) {
 				if (currentList.backgroundInformation) {
-					const listService = new ListService()
+					try {
-					listService.background(currentList)
+						const listService = new ListService()
-						.then(b => {
+						const background = await listService.background(currentList)
-							state.background = b
+						commit(BACKGROUND, background)
-						})
+					} catch(e) {
-						.catch(e => {
+						console.error('Error getting background image for list', currentList.id, e)
-							console.error('Error getting background image for list', currentList.id, e)
+					}
-						})
-				} else {
-					state.background = null
 				}
 			}
 
 			if (typeof currentList.backgroundInformation === 'undefined' || currentList.backgroundInformation === null) {
-				state.background = null
+				commit(BACKGROUND, null)
 			}
 
 			// Server updates don't return the right. Therefore the right is reset after updating the list which is
@@ -120,22 +141,7 @@ export const store = createStore({
 			if (typeof state.currentList.maxRight !== 'undefined' && (typeof currentList.maxRight === 'undefined' || currentList.maxRight === null)) {
 				currentList.maxRight = state.currentList.maxRight
 			}
-			state.currentList = currentList
+			commit(CURRENT_LIST, currentList)
-		},
-		[HAS_TASKS](state, hasTasks) {
-			state.hasTasks = hasTasks
-		},
-		[MENU_ACTIVE](state, menuActive) {
-			state.menuActive = menuActive
-		},
-		toggleMenu(state) {
-			state.menuActive = !state.menuActive
-		},
-		[KEYBOARD_SHORTCUTS_ACTIVE](state, active) {
-			state.keyboardShortcutsActive = active
-		},
-		[QUICK_ACTIONS_ACTIVE](state, active) {
-			state.quickActionsActive = active
 		},
 	},
 })

src/store/mutation-types.js

@@ -7,6 +7,7 @@ export const HAS_TASKS = 'hasTasks'
 export const MENU_ACTIVE = 'menuActive'
 export const KEYBOARD_SHORTCUTS_ACTIVE = 'keyboardShortcutsActive'
 export const QUICK_ACTIONS_ACTIVE = 'quickActionsActive'
+export const BACKGROUND = 'background'
 
 export const CONFIG = 'config'
 export const AUTH = 'auth'

src/views/list/ShowList.vue

@@ -141,7 +141,7 @@ export default {
 			const list = new ListModel(listData)
 			this.listService.get(list)
 				.then(r => {
-					this.$store.commit(CURRENT_LIST, r)
+					this.$store.dispatch(CURRENT_LIST, r)
 					this.setTitle(this.getListTitle(r))
 				})
 				.catch(e => {