feat: move base store to stores

2022-09-24 12:49:25 +02:00
parent d1d7cd535e
commit df74f9d80c
1 changed files with 2 additions and 2 deletions
--- a/src/stores/base.ts
+++ b/src/stores/base.ts
@ -0,0 +1,134 @@
+import type {InjectionKey} from 'vue'
+import {createStore, useStore as baseUseStore, Store} from 'vuex'
+
+import {getBlobFromBlurHash} from '../helpers/getBlobFromBlurHash'
+import {
+	BACKGROUND,
+	BLUR_HASH,
+	CURRENT_LIST,
+	HAS_TASKS,
+	KEYBOARD_SHORTCUTS_ACTIVE,
+	LOADING,
+	LOADING_MODULE, LOGO_VISIBLE,
+	MENU_ACTIVE,
+	QUICK_ACTIONS_ACTIVE,
+} from '../store/mutation-types'
+
+import ListModel from '@/models/list'
+
+import ListService from '../services/list'
+import {checkAndSetApiUrl} from '@/helpers/checkAndSetApiUrl'
+
+import type { RootStoreState, StoreState } from '../store/types'
+import pinia from '@/pinia'
+import {useAuthStore} from '@/stores/auth'
+
+export const key: InjectionKey<Store<StoreState>> = Symbol()
+
+// define your own `useStore` composition function
+export function useStore () {
+  return baseUseStore(key)
+}
+
+export const store = createStore<RootStoreState>({
+	strict: import.meta.env.DEV,
+	state: () => ({
+		loading: false,
+		loadingModule: null,
+		// This is used to highlight the current list in menu for all list related views
+		currentList: new ListModel({
+			id: 0,
+			isArchived: false,
+		}),
+		background: '',
+		blurHash: '',
+		hasTasks: false,
+		menuActive: true,
+		keyboardShortcutsActive: false,
+		quickActionsActive: false,
+		logoVisible: true,
+	}),
+	mutations: {
+		[LOADING](state, loading) {
+			state.loading = loading
+		},
+		[LOADING_MODULE](state, module) {
+			state.loadingModule = module
+		},
+		[CURRENT_LIST](state, currentList) {
+			// 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 state.currentList.maxRight !== 'undefined' && (typeof currentList.maxRight === 'undefined' || currentList.maxRight === null)) {
+				currentList.maxRight = state.currentList.maxRight
+			}
+			state.currentList = currentList
+		},
+		[HAS_TASKS](state, hasTasks) {
+			state.hasTasks = hasTasks
+		},
+		[MENU_ACTIVE](state, menuActive) {
+			state.menuActive = menuActive
+		},
+		toggleMenu(state) {
+			state.menuActive = !state.menuActive
+		},
+		[KEYBOARD_SHORTCUTS_ACTIVE](state, active) {
+			state.keyboardShortcutsActive = active
+		},
+		[QUICK_ACTIONS_ACTIVE](state, active) {
+			state.quickActionsActive = active
+		},
+		[BACKGROUND](state, background) {
+			state.background = background
+		},
+		[BLUR_HASH](state, blurHash) {
+			state.blurHash = blurHash
+		},
+		[LOGO_VISIBLE](state, visible: boolean) {
+			state.logoVisible = visible
+		},
+	},
+	actions: {
+		async [CURRENT_LIST]({state, commit}, {list, forceUpdate = false}) {
+
+			if (list === null) {
+				commit(CURRENT_LIST, {})
+				commit(BACKGROUND, null)
+				commit(BLUR_HASH, null)
+				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 !== state.currentList.id || forceUpdate) {
+				if (list.backgroundInformation) {
+					try {
+						const blurHash = await getBlobFromBlurHash(list.backgroundBlurHash)
+						if (blurHash) {
+							commit(BLUR_HASH, window.URL.createObjectURL(blurHash))
+						}
+
+						const listService = new ListService()
+						const background = await listService.background(list)
+						commit(BACKGROUND, background)
+					} catch (e) {
+						console.error('Error getting background image for list', list.id, e)
+					}
+				}
+			}
+
+			if (typeof list.backgroundInformation === 'undefined' || list.backgroundInformation === null) {
+				commit(BACKGROUND, null)
+				commit(BLUR_HASH, null)
+			}
+
+			commit(CURRENT_LIST, list)
+		},
+		async loadApp() {
+			await checkAndSetApiUrl(window.API_URL)
+			const authStore = useAuthStore(pinia)
+			await authStore.checkAuth()
+		},
+	},
+})