feat: refactor to composable
continuous-integration/drone/pr Build is passing Details

- using useMediaQuery and useLocalStorage
- remove watcher in contentAuth
This commit is contained in:
Dominik Pschenitschni 2023-02-08 12:56:32 +01:00
parent 99dc5cf34f
commit c502f9b840
Signed by: dpschen
GPG Key ID: B257AC0149F43A77
3 changed files with 51 additions and 33 deletions

View File

@ -86,9 +86,6 @@ function showKeyboardShortcuts() {
const route = useRoute()
// hide menu on mobile
watch(() => route.fullPath, () => window.innerWidth < 769 && baseStore.setMenuActive(false))
// FIXME: this is really error prone
// Reset the current list highlight in menu if the current route is not list related.
watch(() => route.name as string, (routeName) => {

View File

@ -0,0 +1,47 @@
import {ref, watch, readonly} from 'vue'
import {useLocalStorage, useMediaQuery} from '@vueuse/core'
const BULMA_MOBILE_BREAKPOINT = 768
export function useMenuActive() {
const isMobile = useMediaQuery(`(max-width: ${BULMA_MOBILE_BREAKPOINT}px)`)
const desktopPreference = useLocalStorage(
'menuActiveDesktopPreference',
true,
// If we have two tabs open we want to be able to have the menu open in one window
// and closed in the other. The last changed value will be the new preference
{listenToStorageChanges: false},
)
const menuActive = ref(false)
// set to prefered value
watch(isMobile, (current) => {
menuActive.value = current
// On mobile we don't show the menu in an expanded state
// because that would hide the main content
? false
: desktopPreference.value
}, {immediate: true})
watch(menuActive, (current) => {
if (!isMobile.value) {
desktopPreference.value = current
}
})
function setMenuActive(newMenuActive: boolean) {
menuActive.value = newMenuActive
}
function toggleMenu() {
menuActive.value = menuActive.value = !menuActive.value
}
return {
menuActive: readonly(menuActive),
setMenuActive,
toggleMenu,
}
}

View File

@ -7,9 +7,10 @@ import ListModel from '@/models/list'
import ListService from '../services/list'
import {checkAndSetApiUrl} from '@/helpers/checkAndSetApiUrl'
import {useMenuActive} from '@/composables/useMenuActive'
import {useAuthStore} from '@/stores/auth'
import type {IList} from '@/modelTypes/IList'
import { useStorage, useWindowSize, whenever } from '@vueuse/core'
export const useBaseStore = defineStore('base', () => {
const loading = ref(false)
@ -24,22 +25,10 @@ export const useBaseStore = defineStore('base', () => {
const blurHash = ref('')
const hasTasks = ref(false)
const windowSize = useWindowSize()
const menuActivePreference = useStorage('menuActive', true)
const menuActive = ref(windowSize.width.value >= 770 && menuActivePreference.value)
const keyboardShortcutsActive = ref(false)
const quickActionsActive = ref(false)
const logoVisible = ref(true)
whenever(windowSize.width, (value, previous) => {
if (value < 770 && previous >= 770) {
setMenuActive(false)
}
if (value >= 770 && previous < 770 && menuActivePreference.value) {
setMenuActive(menuActivePreference.value)
}
})
function setLoading(newLoading: boolean) {
loading.value = newLoading
}
@ -65,19 +54,6 @@ export const useBaseStore = defineStore('base', () => {
hasTasks.value = newHasTasks
}
function setMenuActive(newMenuActive: boolean) {
menuActive.value = newMenuActive
}
function setMenuActivePreference(newMenuActivePreference: boolean) {
menuActivePreference.value = newMenuActivePreference
}
function toggleMenu() {
menuActive.value = !menuActive.value
windowSize.width.value >= 770 && setMenuActivePreference(menuActive.value)
}
function setKeyboardShortcutsActive(value: boolean) {
keyboardShortcutsActive.value = value
}
@ -156,18 +132,14 @@ export const useBaseStore = defineStore('base', () => {
background: readonly(background),
blurHash: readonly(blurHash),
hasTasks: readonly(hasTasks),
menuActive: readonly(menuActive),
keyboardShortcutsActive: readonly(keyboardShortcutsActive),
quickActionsActive: readonly(quickActionsActive),
logoVisible: readonly(logoVisible),
windowSize: readonly(windowSize),
setLoading,
setReady,
setCurrentList,
setHasTasks,
setMenuActive,
toggleMenu,
setKeyboardShortcutsActive,
setQuickActionsActive,
setBackground,
@ -176,6 +148,8 @@ export const useBaseStore = defineStore('base', () => {
handleSetCurrentList,
loadApp,
...useMenuActive(),
}
})