diff --git a/components/pages/events/index.vue b/components/pages/events/index.vue index 44aed0d..9bfa781 100644 --- a/components/pages/events/index.vue +++ b/components/pages/events/index.vue @@ -43,7 +43,7 @@ @@ -52,7 +52,7 @@ + + + + + + + + import { computed, defineComponent, ref, watch } from 'vue' -import { useNuxtApp } from '@nuxt/bridge/dist/runtime' import List from './List/index.vue' import { useAuth } from '~/plugins/auth' import { useTranslation } from '~/plugins/i18n' import { FindEventsQueryVariables, - Range, useFetchAddressLazyQuery, - useFindEventsLazyQuery, + useFindEventsQuery, useSaveOriginMutation, useToggleIgnoreBandMutation, useToggleIgnoreCityMutation, @@ -95,6 +106,7 @@ import { useToggleIgnoreMunicipalityMutation, useToggleIgnoreStateMutation } from '~/graphql/generated/operations' +import { useState } from '~/store' export default defineComponent({ name: 'EventsPage', @@ -102,45 +114,26 @@ export default defineComponent({ List }, setup() { - const { $store } = useNuxtApp() + const state = useState() const { t } = useTranslation() - $store.commit('setTitle', t('app.links.events')) + state.setTitle(t('app.links.events')) const { loading: authLoading, isAuthenticated } = useAuth() - const route = useRoute() - const router = useRouter() - const validRange = (value: string | null | (string|null)[]): Range | undefined => { - if (!value) { - return Range.OneWeek - } - if (Array.isArray(value)) { - return validRange(value[0]) - } - return Object.values(Range).includes(value as Range) ? value as Range : Range.OneWeek - } - const range = computed({ - get: () => validRange(route.query.range), - set: (value) => { - router.push(`/?range=${validRange(value)}`) - } + const variables = ref({ + range: state.range, + includeOrigins: isAuthenticated.value || false, + search: state.search, + includeHidden: state.includeHidden + }) + const { result, refetch } = useFindEventsQuery(() => variables.value) + watch([state, isAuthenticated], () => { + variables.value.range = state.range + variables.value.search = state.search + variables.value.includeHidden = state.includeHidden + variables.value.includeOrigins = isAuthenticated.value || false + refetch(variables.value) }) - const variables = ref({ includeOrigins: false}) - const { result, refetch, load } = useFindEventsLazyQuery(variables) const events = computed(() => result.value?.events ?? []) const origins = computed(() => result.value?.origins ?? []) - watch( - () => route.query.range, - (r) => { - if (!authLoading.value) { - variables.value = { - range: r ? r as Range : Range.OneWeek, - includeOrigins: isAuthenticated.value || false - } - load() - refetch(variables.value) - } - }, - { immediate: true } - ) const submitting = ref(true) const ranges = [ { name: '1 vecka', value: 'ONE_WEEK' }, @@ -158,11 +151,11 @@ export default defineComponent({ originsTemp.push(origin.value) } variables.value = { - range: range.value, + ...variables.value, + range: state.range, origins: originsTemp, includeOrigins: isAuthenticated.value || false } - load() refetch(variables.value) } @@ -243,7 +236,7 @@ export default defineComponent({ return { authLoading, isAuthenticated, - range, + state, events, origins, submitting, diff --git a/components/pages/filters/index.vue b/components/pages/filters/index.vue index b98ab1d..bba378f 100644 --- a/components/pages/filters/index.vue +++ b/components/pages/filters/index.vue @@ -62,7 +62,6 @@