fix: vuex mutation violation from draggable (#674)

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

src/store/index.js

@@ -24,6 +24,7 @@ import ListService from '../services/list'
 Vue.use(Vuex)
 
 export const store = new Vuex.Store({
+	strict: import.meta.env.DEV,
 	modules: {
 		config,
 		auth,

src/store/modules/lists.js

@@ -38,9 +38,10 @@ export default {
 	},
 	actions: {
 		toggleListFavorite(ctx, list) {
-			list.isFavorite = !list.isFavorite
-
-			return ctx.dispatch('updateList', list)
+			return ctx.dispatch('updateList', {
+				...list,
+				isFavorite: !list.isFavorite,
+			})
 		},
 		createList(ctx, list) {
 			const cancel = setLoading(ctx, 'lists')
@@ -61,24 +62,31 @@ export default {
 			const listService = new ListService()
 
 			return listService.update(list)
-				.then(r => {
-					ctx.commit('setList', r)
-					ctx.commit('namespaces/setListInNamespaceById', r, {root: true})
-					if (r.isFavorite) {
-						r.namespaceId = FavoriteListsNamespace
-						ctx.commit('namespaces/addListToNamespace', r, {root: true})
+				.then(() => {
+					ctx.commit('setList', list)
+					ctx.commit('namespaces/setListInNamespaceById', list, {root: true})
+
+					// the returned list from listService.update is the same!
+					// in order to not validate vuex mutations we have to create a new copy
+					const newList = {
+						...list,
+						namespaceId: FavoriteListsNamespace,
+					}
+					if (list.isFavorite) {
+						ctx.commit('namespaces/addListToNamespace', newList, {root: true})
 					} else {
-						r.namespaceId = FavoriteListsNamespace
-						ctx.commit('namespaces/removeListFromNamespaceById', r, {root: true})
+						ctx.commit('namespaces/removeListFromNamespaceById', newList, {root: true})
 					}
 					ctx.dispatch('namespaces/loadNamespacesIfFavoritesDontExist', null, {root: true})
 					ctx.dispatch('namespaces/removeFavoritesNamespaceIfEmpty', null, {root: true})
-					return Promise.resolve(r)
+					return Promise.resolve(newList)
 				})
 				.catch(e => {
 					// Reset the list state to the initial one to avoid confusion for the user
-					list.isFavorite = !list.isFavorite
-					ctx.commit('setList', list)
+					ctx.commit('setList', {
+						...list,
+						isFavorite: !list.isFavorite,
+					})
 					return Promise.reject(e)
 				})
 				.finally(() => cancel())

src/store/modules/namespaces.js

@@ -13,13 +13,13 @@ export default {
 			state.namespaces = namespaces
 		},
 		setNamespaceById(state, namespace) {
-			for (const n in state.namespaces) {
-				if (state.namespaces[n].id === namespace.id) {
-					namespace.lists = state.namespaces[n].lists
-					Vue.set(state.namespaces, n, namespace)
-					return
-				}
+			const namespaceIndex = state.namespaces.findIndex(n => n.id === namespace.id)
+			
+			if (namespaceIndex === -1) {
+				return
 			}
+			
+			Vue.set(state.namespaces, namespaceIndex, namespace)
 		},
 		setListInNamespaceById(state, list) {
 			for (const n in state.namespaces) {