fix: deprecation warnings

components/pages/events/index.vue

@@ -78,7 +78,7 @@
 
 <script lang='ts'>
 import { computed, defineComponent, ref, watch } from 'vue'
-import { useRoute, useRouter, useStore } from '@nuxtjs/composition-api'
+import { useNuxtApp, useRoute, useRouter } from '@nuxt/bridge/dist/runtime'
 
 import List from './List/index.vue'
 import { useAuth } from '~/plugins/auth'
@@ -102,14 +102,14 @@ export default defineComponent({
     List
   },
   setup() {
-    const store = useStore()
+    const { $store } = useNuxtApp()
     const { t } = useTranslation()
-    store.commit('setTitle', t('app.links.events'))
+    $store.commit('setTitle', t('app.links.events'))
     const { loading: authLoading, isAuthenticated } = useAuth()
     const route = useRoute()
     const router = useRouter()
     const range = computed({
-      get: () => route.value.query.range ? route.value.query.range as Range : undefined,
+      get: () => route.query.range ? route.query.range as Range : undefined,
       set: (value) => {
         router.push(`/?range=${value}`)
       }
@@ -119,7 +119,7 @@ export default defineComponent({
     const events = computed(() => result.value?.events ?? [])
     const origins = computed(() => result.value?.origins ?? [])
     watch(
-      () => route.value.query.range,
+      () => route.query.range,
       (r) => {
         if (!authLoading.value) {
           variables.value = {

components/pages/origins/index.vue

@@ -60,7 +60,7 @@
 
 <script lang='ts'>
 import { computed, defineComponent, ref } from 'vue'
-import { useStore } from '@nuxtjs/composition-api'
+import { useNuxtApp } from '@nuxt/bridge/dist/runtime'
 import { useAuth } from '~/plugins/auth'
 import { useTranslation } from '~/plugins/i18n'
 import {
@@ -73,9 +73,9 @@ import {
 export default defineComponent({
   name: 'OriginsPage',
   setup() {
-    const store = useStore()
+    const { $store } = useNuxtApp()
     const { t } = useTranslation()
-    store.commit('setTitle', t('app.links.origins'))
+    $store.commit('setTitle', t('app.links.origins'))
     const { isAuthenticated } = useAuth()
     const { result, loading, refetch } = useFindOriginsQuery()
     const origins = computed(() => result.value?.origins ?? [])

layouts/default.vue

@@ -81,7 +81,7 @@
 <script>
 
 import { computed, getCurrentInstance, provide, ref } from 'vue'
-import { useRouter, useStore } from '@nuxtjs/composition-api'
+import { useNuxtApp, useRouter } from '@nuxt/bridge/dist/runtime'
 import { DefaultApolloClient } from '@vue/apollo-composable'
 import Themed from './components/themed'
 import { setDarkMode } from '~/utils/localStorage'
@@ -97,9 +97,9 @@ export default {
     if (instance) {
       provide(DefaultApolloClient, instance.proxy.$apollo)
     }
+    const { $store } = useNuxtApp()
     const router = useRouter()
-    const store = useStore()
-    const { title } = store.state
+    const { title } = $store.state
     const onRedirectCallback = (appState) => {
       router.push(
         appState && appState.targetUrl

plugins/apollo.js

@@ -1,8 +1,4 @@
-import {
-  ApolloClient,
-  InMemoryCache,
-  createHttpLink
-} from '@apollo/client/core'
+import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core'
 import { setContext } from '@apollo/client/link/context'
 import { useAuth } from './auth'
 
@@ -20,12 +16,15 @@ const getToken = (options) => {
 }
 
 const authLink = setContext((_, { headers }) => {
-  return getToken().then((token) => ({
-    headers: {
-      ...headers,
-      authorization: token ? `Bearer ${token}` : ''
-    }
-  }))
+  return getToken()
+    .then((token) => ({
+      headers: {
+        ...headers,
+        authorization: token ? `Bearer ${token}` : ''
+      }
+    })).catch(() => {
+      return {}
+    })
 })
 
 const link = authLink.concat(httpLink)
@@ -44,6 +43,6 @@ const instance = new ApolloClient({
   }
 })
 
-export default function (_, inject) {
+export default function(_, inject) {
   inject('apollo', instance)
 }

utils/localStorage.js

@@ -1,8 +1,8 @@
 const DARK_MODE_KEY = 'dancefinder-dark-mode'
 const LOCALE_KEY = 'dancefinder-locale'
 
-const getDarkMode = () => localStorage.getItem(DARK_MODE_KEY)
-const setDarkMode = (mode) => localStorage.setItem(DARK_MODE_KEY, mode)
+const getDarkMode = () => JSON.parse(localStorage.getItem(DARK_MODE_KEY))
+const setDarkMode = (mode) => localStorage.setItem(DARK_MODE_KEY, JSON.stringify(mode))
 const getLocale = () => localStorage.getItem(LOCALE_KEY)
 const setLocale = (locale) => localStorage.setItem(LOCALE_KEY, locale)