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>
This commit is contained in:
konrad 2021-10-16 15:51:27 +00:00 committed by dpschen
parent 373a766f5c
commit f05e81190f
4 changed files with 39 additions and 32 deletions

View file

@ -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() {

View file

@ -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 = {}
state.background = null
commit(CURRENT_LIST, {})
commit(BACKGROUND, null)
return
}
@ -97,21 +121,18 @@ export const store = createStore({
)
) {
if (currentList.backgroundInformation) {
const listService = new ListService()
listService.background(currentList)
.then(b => {
state.background = b
})
.catch(e => {
console.error('Error getting background image for list', currentList.id, e)
})
} else {
state.background = null
try {
const listService = new ListService()
const background = await listService.background(currentList)
commit(BACKGROUND, background)
} catch(e) {
console.error('Error getting background image for list', currentList.id, e)
}
}
}
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
},
[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
commit(CURRENT_LIST, currentList)
},
},
})

View file

@ -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'

View file

@ -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 => {