From d735a93a35a6c57f6a70fefcbd92638f5823e167 Mon Sep 17 00:00:00 2001
From: Joakim Olsson <joakim@unbound.se>
Date: Wed, 17 Aug 2022 08:42:25 +0200
Subject: [PATCH] fix: deprecation warnings

---
 components/pages/events/index.vue  | 10 +++++-----
 components/pages/origins/index.vue |  6 +++---
 layouts/default.vue                |  6 +++---
 plugins/apollo.js                  | 23 +++++++++++------------
 utils/localStorage.js              |  4 ++--
 5 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/components/pages/events/index.vue b/components/pages/events/index.vue
index e7a2b0c..4f7ec88 100644
--- a/components/pages/events/index.vue
+++ b/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 = {
diff --git a/components/pages/origins/index.vue b/components/pages/origins/index.vue
index c8996b6..144082b 100644
--- a/components/pages/origins/index.vue
+++ b/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 ?? [])
diff --git a/layouts/default.vue b/layouts/default.vue
index 79319ca..25686eb 100644
--- a/layouts/default.vue
+++ b/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
diff --git a/plugins/apollo.js b/plugins/apollo.js
index 39ae9d0..0dcec04 100644
--- a/plugins/apollo.js
+++ b/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)
 }
diff --git a/utils/localStorage.js b/utils/localStorage.js
index 8e141d6..f3da24f 100644
--- a/utils/localStorage.js
+++ b/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)