vikunja/frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

fix: setting background to state mutation violation
All checks were successful
continuous-integration/drone/pr Build is passing
Details

Browse Source 
state mutations must be synchronous. Using a promise.then handler to set the background is a violation of that.
This commit is contained in:
kolaente 2021-10-16 13:45:33 +02:00
parent 8e1ab8e09b
commit f3c5bbce5a
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
4 changed files with 69 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/home/contentAuth.vue
View File

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

125
src/store/index.js
View File

@ -1,5 +1,6 @@
import { createStore } from 'vuex'
import {createStore} from 'vuex'
import {
BACKGROUND,
CURRENT_LIST,
ERROR_MESSAGE,
HAS_TASKS,
@ -62,64 +63,6 @@ export const store = createStore({
state.online = !!import.meta.env.VITE_IS_ONLINE || online
},
[CURRENT_LIST](state, currentList) {
if (currentList === null) {
state.currentList = {}
state.background = null
return
}
// Not sure if this is the right way to do it but hey, it works
if (
// List changed
currentList.id !== state.currentList.id ||
// 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) {
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
}
}
if (typeof currentList.backgroundInformation === 'undefined' || currentList.backgroundInformation === null) {
state.background = null
}
// Server updates don't return the right. Therefore the right is reset after updating the list which is
// confusing because all the buttons will disappear in that case. To prevent this, we're keeping the right
// when updating the list in global state.
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) {
@ -137,5 +80,69 @@ export const store = createStore({
[QUICK_ACTIONS_ACTIVE](state, active) {
state.quickActionsActive = active
},
[BACKGROUND](state, background) {
state.background = background
},
},
actions: {
[CURRENT_LIST](ctx, currentList) {
if (currentList === null) {
ctx.commit(CURRENT_LIST, {})
ctx.commit(BACKGROUND, null)
return
}
// Not sure if this is the right way to do it but hey, it works
if (
// List changed
currentList.id !== ctx.state.currentList.id ||
// The current list got a new background and didn't have one previously
(
currentList.backgroundInformation &&
!ctx.state.currentList.backgroundInformation
) ||
// The current list got a new background and had one previously
(
currentList.backgroundInformation &&
currentList.backgroundInformation.unsplashId &&
ctx.state.currentList &&
ctx.state.currentList.backgroundInformation &&
ctx.state.currentList.backgroundInformation.unsplashId &&
currentList.backgroundInformation.unsplashId !== ctx.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 &&
ctx.state.currentList &&
ctx.state.currentList.backgroundInformation &&
ctx.state.currentList.backgroundInformation.type
)
) {
if (currentList.backgroundInformation) {
const listService = new ListService()
listService.background(currentList)
.then(b => {
ctx.commit(BACKGROUND, b)
})
.catch(e => {
console.error('Error getting background image for list', currentList.id, e)
})
}
}
if (typeof currentList.backgroundInformation === 'undefined' || currentList.backgroundInformation === null) {
ctx.commit(BACKGROUND, null)
}
// Server updates don't return the right. Therefore the right is reset after updating the list which is
// confusing because all the buttons will disappear in that case. To prevent this, we're keeping the right
// when updating the list in global state.
if (typeof ctx.state.currentList.maxRight !== 'undefined' && (typeof currentList.maxRight === 'undefined' || currentList.maxRight === null)) {
currentList.maxRight = ctx.state.currentList.maxRight
}
ctx.commit(CURRENT_LIST, currentList)
},
},
})

1
src/store/mutation-types.js
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'

2
src/views/list/ShowList.vue
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 => {