feat: label store with composition api

src/stores/labels.ts

@@ -1,4 +1,5 @@
-import { acceptHMRUpdate, defineStore } from 'pinia'
+import {computed, ref} from 'vue'
+import {acceptHMRUpdate, defineStore} from 'pinia'
 
 import LabelService from '@/services/label'
 import {success} from '@/message'
@@ -21,122 +22,134 @@ async function getAllLabels(page = 1): Promise<ILabel[]> {
 }
 
 export interface LabelState {
-	labels: {
+	[id: ILabel['id']]: ILabel
-		[id: ILabel['id']]: ILabel
-	},
-	isLoading: boolean,
 }
 
-export const useLabelStore = defineStore('label', {
+export const useLabelStore = defineStore('label', () => {
-	state: () : LabelState => ({
+	// The labels are stored as an object which has the label ids as keys.
-		// The labels are stored as an object which has the label ids as keys.
+	const labels = ref<LabelState>({})
-		labels: {},
+	const isLoading = ref(false)
-		isLoading: false,
-	}),
-	
-	getters: {
-		getLabelsByIds(state) {
-			return (ids: ILabel['id'][]) => Object.values(state.labels).filter(({id}) => ids.includes(id))
-		},
-		// **
-		// * Checks if a list of labels is available in the store and filters them then query
-		// **
-		filterLabelsByQuery(state) {
-			return (labelsToHide: ILabel[], query: string) => {
-				const labelIdsToHide: number[] = labelsToHide.map(({id}) => id)
-			
-				return search(query)
-						?.filter(value => !labelIdsToHide.includes(value))
-						.map(id => state.labels[id])
-					|| []
-			}
-		},
-		getLabelsByExactTitles(state) {
-			return (labelTitles: string[]) => Object
-				.values(state.labels)
-				.filter(({title}) => labelTitles.some(l => l.toLowerCase() === title.toLowerCase()))
-		},
-	},
 
-	actions: {
+	const getLabelsByIds = computed(() => {
-		setIsLoading(isLoading: boolean) {
+		return (ids: ILabel['id'][]) => Object.values(labels.value).filter(({id}) => ids.includes(id))
-			this.isLoading = isLoading
+	})
-		},
 
-		setLabels(labels: ILabel[]) {
+	// **
-			labels.forEach(l => {
+	// * Checks if a list of labels is available in the store and filters them then query
-				this.labels[l.id] = l
+	// **
-				add(l)
+	const filterLabelsByQuery = computed(() => {
-			})
+		return (labelsToHide: ILabel[], query: string) => {
-		},
+			const labelIdsToHide: number[] = labelsToHide.map(({id}) => id)
+		
+			return search(query)
+					?.filter(value => !labelIdsToHide.includes(value))
+					.map(id => labels.value[id])
+				|| []
+		}
+	})
 
-		setLabel(label: ILabel) {
+	const getLabelsByExactTitles = computed(() => {
-			this.labels[label.id] = label
+		return (labelTitles: string[]) => Object
-			update(label)
+			.values(labels.value)
-		},
+			.filter(({title}) => labelTitles.some(l => l.toLowerCase() === title.toLowerCase()))
+	})
 
-		removeLabelById(label: ILabel) {
-			remove(label)
-			delete this.labels[label.id]
-		},
 
-		async loadAllLabels({forceLoad} : {forceLoad?: boolean} = {}) {
+	function setIsLoading(newIsLoading: boolean) {
-			if (this.isLoading && !forceLoad) {
+		isLoading.value = newIsLoading
-				return
+	}
-			}
 
-			const cancel = setModuleLoading(this)
+	function setLabels(newLabels: ILabel[]) {
+		newLabels.forEach(l => {
+			labels.value[l.id] = l
+			add(l)
+		})
+	}
 
-			try {
+	function setLabel(label: ILabel) {
-				const labels = await getAllLabels()
+		labels.value[label.id] = label
-				this.setLabels(labels)
+		update(label)
-				return labels
+	}
-			} finally {
-				cancel()
-			}
-		},
 
-		async deleteLabel(label: ILabel) {
+	function removeLabelById(label: ILabel) {
-			const cancel = setModuleLoading(this)
+		remove(label)
-			const labelService = new LabelService()
+		delete labels.value[label.id]
+	}
 
-			try {
+	async function loadAllLabels({forceLoad} : {forceLoad?: boolean} = {}) {
-				const result = await labelService.delete(label)
+		if (isLoading.value && !forceLoad) {
-				this.removeLabelById(label)
+			return
-				success({message: i18n.global.t('label.deleteSuccess')})
+		}
-				return result
-			} finally {
-				cancel()
-			}
-		},
 
-		async updateLabel(label: ILabel) {
+		const cancel = setModuleLoading(this, setIsLoading)
-			const cancel = setModuleLoading(this)
-			const labelService = new LabelService()
 
-			try {
+		try {
-				const newLabel = await labelService.update(label)
+			const newLabels = await getAllLabels()
-				this.setLabel(newLabel)
+			setLabels(newLabels)
-				success({message: i18n.global.t('label.edit.success')})
+			return newLabels
-				return newLabel
+		} finally {
-			} finally {
+			cancel()
-				cancel()
+		}
-			}
+	}
-		},
 
-		async createLabel(label: ILabel) {
+	async function deleteLabel(label: ILabel) {
-			const cancel = setModuleLoading(this)
+		const cancel = setModuleLoading(this, setIsLoading)
-			const labelService = new LabelService()
+		const labelService = new LabelService()
 
-			try {
+		try {
-				const newLabel = await labelService.create(label) as ILabel
+			const result = await labelService.delete(label)
-				this.setLabel(newLabel)
+			removeLabelById(label)
-				return newLabel
+			success({message: i18n.global.t('label.deleteSuccess')})
-			} finally {
+			return result
-				cancel()
+		} finally {
-			}
+			cancel()
-		},
+		}
-	},
+	}
+
+	async function updateLabel(label: ILabel) {
+		const cancel = setModuleLoading(this, setIsLoading)
+		const labelService = new LabelService()
+
+		try {
+			const newLabel = await labelService.update(label)
+			setLabel(newLabel)
+			success({message: i18n.global.t('label.edit.success')})
+			return newLabel
+		} finally {
+			cancel()
+		}
+	}
+
+	async function createLabel(label: ILabel) {
+		const cancel = setModuleLoading(this, setIsLoading)
+		const labelService = new LabelService()
+
+		try {
+			const newLabel = await labelService.create(label) as ILabel
+			setLabel(newLabel)
+			return newLabel
+		} finally {
+			cancel()
+		}
+	}
+
+	return {
+		labels,
+		isLoading,
+
+		getLabelsByIds,
+		filterLabelsByQuery,
+		getLabelsByExactTitles,
+
+		setLabels,
+		setLabel,
+		removeLabelById,
+		loadAllLabels,
+		deleteLabel,
+		updateLabel,
+		createLabel,
+		
+	}
 })
 
 // support hot reloading