ami/tl-vikunja
1
0
Fork 0
Code Activity

feat: rework loading state of stores

Browse Source
This commit is contained in:
Dominik Pschenitschni
2022-09-30 12:52:21 +02:00
parent 7f281fc5e9
commit 1d7f857070
13 changed files with 59 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/stores/auth.ts
View File

@ -6,14 +6,13 @@ import {objectToSnakeCase} from '@/helpers/case'
import UserModel, { getAvatarUrl } from '@/models/user'
import UserSettingsService from '@/services/userSettings'
import {getToken, refreshToken, removeToken, saveToken} from '@/helpers/auth'
import {setLoadingPinia} from '@/stores/helper'
import {setModuleLoading} from '@/stores/helper'
import {success} from '@/message'
import {redirectToProvider} from '@/helpers/redirectToProvider'
import {AUTH_TYPES, type IUser} from '@/modelTypes/IUser'
import type {IUserSettings} from '@/modelTypes/IUserSettings'
import router from '@/router'
import {useConfigStore} from '@/stores/config'
import {useBaseStore} from '@/stores/base'
import UserSettingsModel from '@/models/userSettings'
export interface AuthState {
@ -104,8 +103,6 @@ export const useAuthStore = defineStore('auth', {
// Logs a user in with a set of credentials.
async login(credentials) {
const HTTP = HTTPFactory()
const baseStore = useBaseStore()
baseStore.setLoading(true)
this.setIsLoading(true)
// Delete an eventually preexisting old token
@ -129,7 +126,6 @@ export const useAuthStore = defineStore('auth', {
throw e
} finally {
baseStore.setLoading(false)
this.setIsLoading(false)
}
},
@ -138,8 +134,6 @@ export const useAuthStore = defineStore('auth', {
// Not sure if this is the right place to put the logic in, maybe a seperate js component would be better suited.
async register(credentials) {
const HTTP = HTTPFactory()
const baseStore = useBaseStore()
baseStore.setLoading(true)
this.setIsLoading(true)
try {
await HTTP.post('register', credentials)
@ -151,15 +145,12 @@ export const useAuthStore = defineStore('auth', {
throw e
} finally {
baseStore.setLoading(false)
this.setIsLoading(false)
}
},
async openIdAuth({provider, code}) {
const HTTP = HTTPFactory()
const baseStore = useBaseStore()
baseStore.setLoading(true)
this.setIsLoading(true)
const data = {
@ -176,7 +167,6 @@ export const useAuthStore = defineStore('auth', {
// Tell others the user is autheticated
this.checkAuth()
} finally {
baseStore.setLoading(false)
this.setIsLoading(false)
}
},
@ -294,8 +284,7 @@ export const useAuthStore = defineStore('auth', {
}) {
const userSettingsService = new UserSettingsService()
// FIXME
const cancel = setLoadingPinia(this, this.setIsLoadingGeneralSettings)
const cancel = setModuleLoading(this, this.setIsLoadingGeneralSettings)
try {
saveLanguage(settings.language)
await userSettingsService.update(settings)

10
src/stores/base.ts
View File

@ -11,7 +11,6 @@ import type {IList} from '@/modelTypes/IList'
export interface RootStoreState {
loading: boolean,
loadingModule: null,
currentList: IList,
background: string,
@ -27,7 +26,6 @@ export interface RootStoreState {
export const useBaseStore = defineStore('base', {
state: () : RootStoreState => ({
loading: false,
loadingModule: null,
// This is used to highlight the current list in menu for all list related views
currentList: new ListModel({
@ -49,11 +47,6 @@ export const useBaseStore = defineStore('base', {
this.loading = loading
},
setLoadingModule(module) {
this.loadingModule = module
},
// FIXME: same action as mutation name
setCurrentList(currentList: IList) {
// 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
@ -102,8 +95,7 @@ export const useBaseStore = defineStore('base', {
this.logoVisible = visible
},
// FIXME: update all actions handleSetCurrentList
async handleSetCurrentList({list, forceUpdate = false}) {
async handleSetCurrentList({list, forceUpdate = false} : {list: IList, forceUpdate: boolean}) {
if (list === null) {
this.setCurrentList({})
this.setBackground('')

10
src/stores/helper.ts
View File

@ -1,13 +1,19 @@
import type { StoreDefinition } from 'pinia'
export const setLoadingPinia = (store: StoreDefinition, loadFunc : ((isLoading: boolean) => void) | null = null) => {
export interface LoadingState {
isLoading: boolean
}
const LOADING_TIMEOUT = 100
export const setModuleLoading = <LoadingStore extends StoreDefinition<string, LoadingState>>(store: LoadingStore, loadFunc : ((isLoading: boolean) => void) | null = null) => {
const timeout = setTimeout(() => {
if (loadFunc === null) {
store.isLoading = true
} else {
loadFunc(true)
}
}, 100)
}, LOADING_TIMEOUT)
return () => {
clearTimeout(timeout)
if (loadFunc === null) {

12
src/stores/kanban.ts
View File

@ -8,7 +8,7 @@ import {success} from '@/message'
import BucketService from '@/services/bucket'
import TaskCollectionService from '@/services/taskCollection'
import {setLoadingPinia} from '@/stores/helper'
import {setModuleLoading} from '@/stores/helper'
import type { ITask } from '@/modelTypes/ITask'
import type { IList } from '@/modelTypes/IList'
@ -261,7 +261,7 @@ export const useKanbanStore = defineStore('kanban', {
},
async loadBucketsForList({listId, params}: {listId: IList['id'], params}) {
const cancel = setLoadingPinia(this)
const cancel = setModuleLoading(this)
// Clear everything to prevent having old buckets in the list if loading the buckets from this list takes a few moments
this.setBuckets([])
@ -295,7 +295,7 @@ export const useKanbanStore = defineStore('kanban', {
return
}
const cancel = setLoadingPinia(this)
const cancel = setModuleLoading(this)
this.setBucketLoading({bucketId: bucketId, loading: true})
const params = JSON.parse(JSON.stringify(ps))
@ -338,7 +338,7 @@ export const useKanbanStore = defineStore('kanban', {
},
async createBucket(bucket: IBucket) {
const cancel = setLoadingPinia(this)
const cancel = setModuleLoading(this)
const bucketService = new BucketService()
try {
@ -351,7 +351,7 @@ export const useKanbanStore = defineStore('kanban', {
},
async deleteBucket({bucket, params}: {bucket: IBucket, params}) {
const cancel = setLoadingPinia(this)
const cancel = setModuleLoading(this)
const bucketService = new BucketService()
try {
@ -366,7 +366,7 @@ export const useKanbanStore = defineStore('kanban', {
},
async updateBucket(updatedBucketData: IBucket) {
const cancel = setLoadingPinia(this)
const cancel = setModuleLoading(this)
const bucketIndex = findIndexById(this.buckets, updatedBucketData.id)
const oldBucket = cloneDeep(this.buckets[bucketIndex])

10
src/stores/labels.ts
View File

@ -4,7 +4,7 @@ import LabelService from '@/services/label'
import {success} from '@/message'
import {i18n} from '@/i18n'
import {createNewIndexer} from '@/indexes'
import {setLoadingPinia} from '@/stores/helper'
import {setModuleLoading} from '@/stores/helper'
import type {ILabel} from '@/modelTypes/ILabel'
const {add, remove, update, search} = createNewIndexer('labels', ['title', 'description'])
@ -85,7 +85,7 @@ export const useLabelStore = defineStore('label', {
return
}
const cancel = setLoadingPinia(this)
const cancel = setModuleLoading(this)
try {
const labels = await getAllLabels()
@ -97,7 +97,7 @@ export const useLabelStore = defineStore('label', {
},
async deleteLabel(label: ILabel) {
const cancel = setLoadingPinia(this)
const cancel = setModuleLoading(this)
const labelService = new LabelService()
try {
@ -111,7 +111,7 @@ export const useLabelStore = defineStore('label', {
},
async updateLabel(label: ILabel) {
const cancel = setLoadingPinia(this)
const cancel = setModuleLoading(this)
const labelService = new LabelService()
try {
@ -125,7 +125,7 @@ export const useLabelStore = defineStore('label', {
},
async createLabel(label: ILabel) {
const cancel = setLoadingPinia(this)
const cancel = setModuleLoading(this)
const labelService = new LabelService()
try {

8
src/stores/lists.ts
View File

@ -3,7 +3,7 @@ import {acceptHMRUpdate, defineStore} from 'pinia'
import {useI18n} from 'vue-i18n'
import ListService from '@/services/list'
import {setLoadingPinia} from '@/stores/helper'
import {setModuleLoading} from '@/stores/helper'
import {removeListFromHistory} from '@/modules/listHistory'
import {createNewIndexer} from '@/indexes'
import {useNamespaceStore} from './namespaces'
@ -91,7 +91,7 @@ export const useListStore = defineStore('list', {
},
async createList(list: IList) {
const cancel = setLoadingPinia(this)
const cancel = setModuleLoading(this)
const listService = new ListService()
try {
@ -107,7 +107,7 @@ export const useListStore = defineStore('list', {
},
async updateList(list: IList) {
const cancel = setLoadingPinia(this)
const cancel = setModuleLoading(this)
const listService = new ListService()
try {
@ -143,7 +143,7 @@ export const useListStore = defineStore('list', {
},
async deleteList(list: IList) {
const cancel = setLoadingPinia(this)
const cancel = setModuleLoading(this)
const listService = new ListService()
try {

8
src/stores/namespaces.ts
View File

@ -1,7 +1,7 @@
import {defineStore, acceptHMRUpdate} from 'pinia'
import NamespaceService from '../services/namespace'
import {setLoadingPinia} from '@/stores/helper'
import {setModuleLoading} from '@/stores/helper'
import {createNewIndexer} from '@/indexes'
import type {INamespace} from '@/modelTypes/INamespace'
import type {IList} from '@/modelTypes/IList'
@ -139,7 +139,7 @@ export const useNamespaceStore = defineStore('namespace', {
},
async loadNamespaces() {
const cancel = setLoadingPinia(this)
const cancel = setModuleLoading(this)
const namespaceService = new NamespaceService()
try {
@ -174,7 +174,7 @@ export const useNamespaceStore = defineStore('namespace', {
},
async deleteNamespace(namespace: INamespace) {
const cancel = setLoadingPinia(this)
const cancel = setModuleLoading(this)
const namespaceService = new NamespaceService()
try {
@ -187,7 +187,7 @@ export const useNamespaceStore = defineStore('namespace', {
},
async createNamespace(namespace: INamespace) {
const cancel = setLoadingPinia(this)
const cancel = setModuleLoading(this)
const namespaceService = new NamespaceService()
try {

27
src/stores/tasks.ts
View File

@ -23,8 +23,7 @@ import type {IUser} from '@/modelTypes/IUser'
import type {IAttachment} from '@/modelTypes/IAttachment'
import type {IList} from '@/modelTypes/IList'
import {setLoadingPinia} from '@/stores/helper'
import {useBaseStore} from '@/stores/base'
import {setModuleLoading} from '@/stores/helper'
import {useLabelStore} from '@/stores/labels'
import {useListStore} from '@/stores/lists'
import {useAttachmentStore} from '@/stores/attachments'
@ -79,29 +78,41 @@ async function findAssignees(parsedTaskAssignees: string[]) {
}
export interface TaskState {
tasks: { [id: ITask['id']]: ITask }
isLoading: boolean,
}
export const useTaskStore = defineStore('task', {
state: () : TaskState => ({
tasks: {},
isLoading: false,
}),
getters: {
hasTasks(state) {
return Object.keys(state.tasks).length > 0
},
},
actions: {
setTasks(tasks: ITask[]) {
tasks.forEach(task => {
this.tasks[task.id] = task
})
},
async loadTasks(params) {
const taskService = new TaskService()
const cancel = setLoadingPinia(this)
const cancel = setModuleLoading(this)
try {
const tasks = await taskService.getAll({}, params)
useBaseStore().setHasTasks(tasks.length > 0)
return tasks
this.tasks = await taskService.getAll({}, params)
return this.tasks
} finally {
cancel()
}
},
async update(task: ITask) {
const cancel = setLoadingPinia(this)
const cancel = setModuleLoading(this)
const taskService = new TaskService()
try {
@ -358,7 +369,7 @@ export const useTaskStore = defineStore('task', {
} :
Partial<ITask>,
) {
const cancel = setLoadingPinia(this)
const cancel = setModuleLoading(this)
const parsedTask = parseTaskText(title, getQuickAddMagicMode())
const foundListId = await this.findListId({