feat: move list store to pina (#2392)

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

src/store/index.ts

@@ -18,7 +18,6 @@ import auth from './modules/auth'
 import namespaces from './modules/namespaces'
 import kanban from './modules/kanban'
 import tasks from './modules/tasks'
-import lists from './modules/lists'
 import attachments from './modules/attachments'
 
 import ListModel from '@/models/list'
@@ -43,7 +42,6 @@ export const store = createStore<RootStoreState>({
 		namespaces,
 		kanban,
 		tasks,
-		lists,
 		attachments,
 	},
 	state: () => ({

src/store/modules/lists.ts

@@ -1,130 +0,0 @@
-import type { Module } from 'vuex'
-
-import ListService from '@/services/list'
-import {setLoading} from '@/store/helper'
-import {removeListFromHistory} from '@/modules/listHistory'
-import {createNewIndexer} from '@/indexes'
-import type {ListState, RootStoreState} from '@/store/types'
-import type {IList} from '@/modelTypes/IList'
-
-const {add, remove, search, update} = createNewIndexer('lists', ['title', 'description'])
-
-const FavoriteListsNamespace = -2
-
-const listsStore : Module<ListState, RootStoreState>= {
-	namespaced: true,
-	// The state is an object which has the list ids as keys.
-	state: () => ({}),
-	mutations: {
-		setList(state, list: IList) {
-			state[list.id] = list
-			update(list)
-		},
-		setLists(state, lists: IList[]) {
-			lists.forEach(l => {
-				state[l.id] = l
-				add(l)
-			})
-		},
-		removeListById(state, list: IList) {
-			remove(list)
-			delete state[list.id]
-		},
-	},
-	getters: {
-		getListById: (state) => (id: IList['id']) => {
-			if (typeof state[id] !== 'undefined') {
-				return state[id]
-			}
-			return null
-		},
-		findListByExactname: (state) => (name: string) => {
-			const list = Object.values(state).find(l => {
-				return l.title.toLowerCase() === name.toLowerCase()
-			})
-			return typeof list === 'undefined' ? null : list
-		},
-		searchList: (state) => (query: string, includeArchived = false) => {
-			return search(query)
-					?.filter(value => value > 0)
-					.map(id => state[id])
-					.filter(list => list.isArchived === includeArchived)
-				|| []
-		},
-	},
-	actions: {
-		toggleListFavorite(ctx, list: IList) {
-			return ctx.dispatch('updateList', {
-				...list,
-				isFavorite: !list.isFavorite,
-			})
-		},
-
-		async createList(ctx, list: IList) {
-			const cancel = setLoading(ctx, 'lists')
-			const listService = new ListService()
-
-			try {
-				const createdList = await listService.create(list)
-				createdList.namespaceId = list.namespaceId
-				ctx.commit('namespaces/addListToNamespace', createdList, {root: true})
-				ctx.commit('setList', createdList)
-				return createdList
-			} finally {
-				cancel()
-			}
-		},
-
-		async updateList(ctx, list: IList) {
-			const cancel = setLoading(ctx, 'lists')
-			const listService = new ListService()
-
-			try {
-				await listService.update(list)
-				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 {
-					ctx.commit('namespaces/removeListFromNamespaceById', newList, {root: true})
-				}
-				ctx.dispatch('namespaces/loadNamespacesIfFavoritesDontExist', null, {root: true})
-				ctx.dispatch('namespaces/removeFavoritesNamespaceIfEmpty', null, {root: true})
-				return newList
-			} catch (e) {
-				// Reset the list state to the initial one to avoid confusion for the user
-				ctx.commit('setList', {
-					...list,
-					isFavorite: !list.isFavorite,
-				})
-				throw e
-			} finally {
-				cancel()
-			}
-		},
-
-		async deleteList(ctx, list: IList) {
-			const cancel = setLoading(ctx, 'lists')
-			const listService = new ListService()
-
-			try {
-				const response = await listService.delete(list)
-				ctx.commit('removeListById', list)
-				ctx.commit('namespaces/removeListFromNamespaceById', list, {root: true})
-				removeListFromHistory({id: list.id})
-				return response
-			} finally {
-				cancel()
-			}
-		},
-	},
-}
-
-export default listsStore

src/store/modules/namespaces.ts

@@ -6,6 +6,7 @@ import {createNewIndexer} from '@/indexes'
 import type {NamespaceState, RootStoreState} from '@/store/types'
 import type {INamespace} from '@/modelTypes/INamespace'
 import type {IList} from '@/modelTypes/IList'
+import {useListStore} from '@/stores/lists'
 
 const {add, remove, search, update} = createNewIndexer('namespaces', ['title', 'description'])
 
@@ -130,7 +131,8 @@ const namespacesStore : Module<NamespaceState, RootStoreState> = {
 				// Put all lists in the list state
 				const lists = namespaces.flatMap(({lists}) => lists)
 
-				ctx.commit('lists/setLists', lists, {root: true})
+				const listStore = useListStore()
+				listStore.setLists(lists)
 
 				return namespaces
 			} finally {

src/store/modules/tasks.ts

@@ -26,6 +26,7 @@ import type { IList } from '@/modelTypes/IList'
 
 import type { RootStoreState, TaskState } from '@/store/types'
 import { useLabelStore } from '@/stores/labels'
+import { useListStore } from '@/stores/lists'
 
 // IDEA: maybe use a small fuzzy search here to prevent errors
 function findPropertyByValue(object, key, value) {
@@ -292,7 +293,7 @@ const tasksStore : Module<TaskState, RootStoreState>= {
 			return task
 		},
 
-		findListId({ rootGetters }, { list: listName, listId }: {
+		findListId(_, { list: listName, listId }: {
 			list: string,
 			listId: IList['id']
 		}) {
@@ -301,7 +302,8 @@ const tasksStore : Module<TaskState, RootStoreState>= {
 			// Uses the following ways to get the list id of the new task:
 			//  1. If specified in quick add magic, look in store if it exists and use it if it does
 			if (listName !== null) {
-				const list = rootGetters['lists/findListByExactname'](listName)
+				const listStore = useListStore()
+				const list = listStore.findListByExactname(listName)
 				foundListId = list === null ? null : list.id
 			}
 			

src/store/types.ts

@@ -97,7 +97,8 @@ export interface LabelState {
 }
 
 export interface ListState {
-	[id: IList['id']]: IList
+	lists: { [id: IList['id']]: IList },
+	isLoading: boolean,
 }
 
 export interface NamespaceState {