add mongodb; store refresh token

src/components/CurrentlyPlaying.vue

@@ -9,23 +9,23 @@ defineProps({
 <template>
   <div class="currentlyPlaying card">
     <div class="card-header">
-      <b>{{ currentlyPlaying.item.name }}</b>
+      <b>{{ currentlyPlaying?.item.name }}</b>
       <div>
-        {{ currentlyPlaying.item.artists.map(artist => artist.name).join(', ') }}
+        {{ currentlyPlaying?.item.artists.map(artist => artist.name).join(', ') }}
       </div>
     </div>
     <div class="card-body">
       <div class="row">
         <div class="col-md">
           <img :src="currentlyPlaying.item.album.images[0].url" alt="album cover" class="card-img">
-          <p>
-            listening from {{ currentlyPlaying.context.type }}
+          <p v-if="currentlyPlaying.context">
+            listening from {{ currentlyPlaying?.context.type }}
           </p>
         </div>
         <div class="col-md">
           <p class="my-2">
             <a
-              :href="currentlyPlaying.item.externalURL.spotify"
+              :href="currentlyPlaying?.item.externalURL.spotify"
               target="_blank"
               rel="noopener norefferrer"
               class="btn btn-outline-dark m-1"
@@ -33,12 +33,13 @@ defineProps({
               view track on Spotify
             </a>
             <a
-              :href="currentlyPlaying.context.externalURL.spotify"
+              v-if="currentlyPlaying?.context"
+              :href="currentlyPlaying?.context.externalURL.spotify"
               target="_blank"
               rel="noopener norefferrer"
               class="btn btn-outline-dark m-1"
             >
-              view {{ currentlyPlaying.context.type }} on Spotify
+              view {{ currentlyPlaying?.context.type }} on Spotify
             </a>
           </p>
         </div>

src/views/AuthCallbackPage.vue

@@ -1,5 +1,8 @@
-<script setup>
+<script setup lang="ts">
 import PromiseResolver from "@/components/PromiseResolver.vue";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
 </script>
 
 <template>
@@ -8,9 +11,10 @@ import PromiseResolver from "@/components/PromiseResolver.vue";
     <div class="card">
       <div class="card-body">
         <PromiseResolver :promise="$api.auth({
-          code: $route.query.code,
-          state: $route.query.state,
+          code: route.query.code,
+          state: route.query.state,
         })">
+          {{ $route.query }}
           <div class="alert alert-success">
             Authorization completed
           </div>

src/views/ConnectPage.vue

@@ -42,10 +42,11 @@ const route = useRoute();
       <div class="card-body">
         <PromiseResolver
           :promise="$api.getCurrentlyPlaying()"
-          v-slot="{ data: { currentlyPlaying }, update }"
+          v-slot="{ data, update }"
           class="col-md-4"
         >
-          <CurrentlyPlaying :currently-playing="currentlyPlaying" />
+          {{ data }}
+          <CurrentlyPlaying v-if="data.currentlyPlaying" :currentlyPlaying="data.currentlyPlaying" />
           <button @click="update($api.getCurrentlyPlaying())" class="btn btn-secondary">update</button>
         </PromiseResolver>
       </div>