src/stores/base.ts

@@ -1,3 +1,4 @@
+import {readonly, ref} from 'vue'
 import {defineStore, acceptHMRUpdate} from 'pinia'
 
 import {getBlobFromBlurHash} from '@/helpers/getBlobFromBlurHash'
@@ -9,140 +10,155 @@ import {checkAndSetApiUrl} from '@/helpers/checkAndSetApiUrl'
 import {useAuthStore} from '@/stores/auth'
 import type {IList} from '@/modelTypes/IList'
 
-export interface RootStoreState {
+export const useBaseStore = defineStore('base', () => {
-	loading: boolean,
+	const loading = ref(false)
-	ready: boolean,
+	const ready = ref(false)
-
-	currentList: IList | null,
-	background: string,
-	blurHash: string,
-
-	hasTasks: boolean,
-	menuActive: boolean,
-	keyboardShortcutsActive: boolean,
-	quickActionsActive: boolean,
-	logoVisible: boolean,
-}
-
-export const useBaseStore = defineStore('base', {
-	state: () : RootStoreState => ({
-		loading: false,
-		ready: false,
 
 	// This is used to highlight the current list in menu for all list related views
-		currentList: new ListModel({
+	const currentList = ref<IList | null>(new ListModel({
 		id: 0,
 		isArchived: false,
-		}),
+	}))
-		background: '',
+	const background = ref('')
-		blurHash: '',
+	const blurHash = ref('')
 
-		hasTasks: false,
+	const hasTasks = ref(false)
-		menuActive: true,
+	const menuActive = ref(true)
-		keyboardShortcutsActive: false,
+	const keyboardShortcutsActive = ref(false)
-		quickActionsActive: false,
+	const quickActionsActive = ref(false)
-		logoVisible: true,
+	const logoVisible = ref(true)
-	}),
 
-	actions: {
+	function setLoading(newLoading: boolean) {
-		setLoading(loading: boolean) {
+		loading.value = newLoading
-			this.loading = loading
+	}
-		},
 
-		setCurrentList(currentList: IList | null) {
+	function setCurrentList(newCurrentList: IList | 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 this.currentList?.maxRight !== 'undefined' &&
+			typeof currentList.value?.maxRight !== 'undefined' &&
-				currentList !== null &&
+			newCurrentList !== null &&
 			(
-					typeof currentList.maxRight === 'undefined' ||
+				typeof newCurrentList.maxRight === 'undefined' ||
-					currentList.maxRight === null
+				newCurrentList.maxRight === null
 			)
 		) {
-				currentList.maxRight = this.currentList.maxRight
+			newCurrentList.maxRight = currentList.value.maxRight
+		}
+		currentList.value = newCurrentList
 	}
-			this.currentList = currentList
-		},
 
-		setHasTasks(hasTasks: boolean) {
+	function setHasTasks(newHasTasks: boolean) {
-			this.hasTasks = hasTasks
+		hasTasks.value = newHasTasks
-		},
+	}
 
-		setMenuActive(menuActive: boolean) {
+	function setMenuActive(newMenuActive: boolean) {
-			this.menuActive = menuActive
+		menuActive.value = newMenuActive
-		},
+	}
 
-		toggleMenu() {
+	function toggleMenu() {
-			this.menuActive = !this.menuActive
+		menuActive.value = !menuActive.value
-		},
+	}
 
-		setKeyboardShortcutsActive(active: boolean) {
+	function setKeyboardShortcutsActive(value: boolean) {
-			this.keyboardShortcutsActive = active
+		keyboardShortcutsActive.value = value
-		},
+	}
 
-		setQuickActionsActive(active: boolean) {
+	function setQuickActionsActive(value: boolean) {
-			this.quickActionsActive = active
+		quickActionsActive.value = value
-		},
+	}
 
-		setBackground(background: string) {
+	function setBackground(newBackground: string) {
-			this.background = background
+		background.value = newBackground
-		},
+	}
 
-		setBlurHash(blurHash: string) {
+	function setBlurHash(newBlurHash: string) {
-			this.blurHash = blurHash
+		blurHash.value = newBlurHash
-		},
+	}
 
-		setLogoVisible(visible: boolean) {
+	function setLogoVisible(visible: boolean) {
-			this.logoVisible = visible
+		logoVisible.value = visible
-		},
+	}
 	
-		setReady(ready: boolean) {
+	function setReady(value: boolean) {
-			this.ready = ready
+		ready.value = value
-		},
+	}
 
-		async handleSetCurrentList({list, forceUpdate = false} : {list: IList | null, forceUpdate: boolean}) {
+	async function handleSetCurrentList(
+		{list, forceUpdate = false}: {list: IList | null, forceUpdate: boolean},
+	) {
 		if (list === null) {
-				this.setCurrentList({})
+			setCurrentList({})
-				this.setBackground('')
+			setBackground('')
-				this.setBlurHash('')
+			setBlurHash('')
 			return
 		}
 
 		// The forceUpdate parameter is used only when updating a list background directly because in that case 
 		// the current list stays the same, but we want to show the new background right away.
-			if (list.id !== this.currentList.id || forceUpdate) {
+		if (list.id !== currentList.value.id || forceUpdate) {
 			if (list.backgroundInformation) {
 				try {
 					const blurHash = await getBlobFromBlurHash(list.backgroundBlurHash)
 					if (blurHash) {
-							this.setBlurHash(window.URL.createObjectURL(blurHash))
+						setBlurHash(window.URL.createObjectURL(blurHash))
 					}
 
 					const listService = new ListService()
 					const background = await listService.background(list)
-						this.setBackground(background)
+					setBackground(background)
 				} catch (e) {
 					console.error('Error getting background image for list', list.id, e)
 				}
 			}
 		}
 
-			if (typeof list.backgroundInformation === 'undefined' || list.backgroundInformation === null) {
+		if (
-				this.setBackground('')
+			typeof list.backgroundInformation === 'undefined' ||
-				this.setBlurHash('')
+			list.backgroundInformation === null
+		) {
+			setBackground('')
+			setBlurHash('')
 		}
 
-			this.setCurrentList(list)
+		setCurrentList(list)
-		},
+	}
 
-		async loadApp() {
+	const authStore = useAuthStore()
+	async function loadApp() {
 		await checkAndSetApiUrl(window.API_URL)
-			await useAuthStore().checkAuth()
+		await authStore.checkAuth()
-			this.ready = true
+		ready.value = true
-		},
+	}
-	},
+
+	return {
+		loading: readonly(loading),
+		ready: readonly(ready),
+		currentList: readonly(currentList),
+		background: readonly(background),
+		blurHash: readonly(blurHash),
+		hasTasks: readonly(hasTasks),
+		menuActive: readonly(menuActive),
+		keyboardShortcutsActive: readonly(keyboardShortcutsActive),
+		quickActionsActive: readonly(quickActionsActive),
+		logoVisible: readonly(logoVisible),
+
+		setLoading,
+		setCurrentList,
+		setHasTasks,
+		setMenuActive,
+		toggleMenu,
+		setKeyboardShortcutsActive,
+		setQuickActionsActive,
+		setBackground,
+		setBlurHash,
+		setLogoVisible,
+		setReady,
+
+		handleSetCurrentList,
+		loadApp,
+	}
 })
 
 // support hot reloading