debug

package.json

@@ -16,7 +16,6 @@
     "bootstrap-icons": "^1.9.1",
     "core-js": "^3.8.3",
     "localforage": "^1.10.0",
-    "querystring": "^0.2.1",
     "register-service-worker": "^1.7.2",
     "vue": "^3.2.13",
     "vue-router": "^4.0.3"

src/components/CurrentlyPlaying.vue

@@ -10,7 +10,9 @@ defineProps({
   <div class="currentlyPlaying card">
     <div class="card-header">
       <b>{{ currentlyPlaying.item.name }}</b>
-      {{ currentlyPlaying.item.artists.map(artist => artist.name).join(', ') }}
+      <div>
+        {{ currentlyPlaying.item.artists.map(artist => artist.name).join(', ') }}
+      </div>
     </div>
     <div class="card-body">
       <div class="row">
@@ -36,7 +38,7 @@ defineProps({
               rel="noopener norefferrer"
               class="btn btn-outline-dark m-1"
             >
-              view playlist on Spotify
+              view {{ currentlyPlaying.context.type }} on Spotify
             </a>
           </p>
         </div>

src/components/PromiseResolver.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, defineProps } from "vue";
+import { ref, defineProps, watch } from "vue";
 import ThrobberLoading from "@/components/ThrobberLoading.vue";
 
 const props = defineProps({
@@ -37,6 +37,10 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  throbber: {
+    type: Boolean,
+    default: true,
+  }
 });
 
 const loading = ref(true);
@@ -46,9 +50,9 @@ const data = ref(null);
 
 const update = async (promise: Promise | unknown) => {
   loading.value = true;
-  setTimeout(() => {
+  if (props.throbber) setTimeout(() => {
     if (loading.value) showThrobber.value = true;
-  }, 100);
+  }, 250);
   try {
     data.value = await (promise.isPromiseList
       ? Promise.all(promise.promises)
@@ -57,9 +61,14 @@ const update = async (promise: Promise | unknown) => {
     error.value = e;
   } finally {
     loading.value = false;
+    showThrobber.value = false;
   }
 };
 update(props.promise);
+
+watch(() => props.promise, (to) => {
+  update(to);
+});
 </script>
 
 <style scoped lang="scss">

src/views/AuthCallbackPage.vue

@@ -7,7 +7,10 @@ import PromiseResolver from "@/components/PromiseResolver.vue";
     <h1>Connect to Spotify</h1>
     <div class="card">
       <div class="card-body">
-        <PromiseResolver :promise="$api.auth({ code, state })">
+        <PromiseResolver :promise="$api.auth({
+          code: $route.query.code,
+          state: $route.query.state,
+        })">
           <div class="alert alert-success">
             Authorization completed
           </div>

src/views/AuthPage.vue

@@ -1,6 +1,4 @@
 <script setup>
-import querystring from "querystring";
-
 const randomString = (length) => {
   const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
   let result = '';
@@ -9,15 +7,16 @@ const randomString = (length) => {
   return result;
 }
 
-const authUrl = 'https://accounts.spotify.com/authorize?' + querystring.stringify({
-  response_type: 'code',
-  // eslint-disable-next-line
-  client_id: process.env.VUE_APP_SPOTIFY_CLIENT_ID,
-  // eslint-disable-next-line
-  redirect_uri: process.env.VUE_APP_SPOTIFY_REDIRECT_URI,
-  scope: 'user-read-email app-remote-control user-read-playback-state user-read-currently-playing user-modify-playback-state',
-  state: randomString(16),
-});
+const params = new URLSearchParams();
+params.append('response_type', 'code');
+// eslint-disable-next-line
+params.append('client_id', process.env.VUE_APP_SPOTIFY_CLIENT_ID);
+// eslint-disable-next-line
+params.append('redirect_uri', process.env.VUE_APP_SPOTIFY_REDIRECT_URI);
+params.append('scope', 'user-read-email app-remote-control user-read-playback-state user-read-currently-playing user-modify-playback-state');
+params.append('state', randomString(16));
+
+const authUrl = 'https://accounts.spotify.com/authorize?' + params.toString();
 </script>
 
 <template>

src/views/UserPage.vue

@@ -2,14 +2,27 @@
 import PromiseResolver from "@/components/PromiseResolver.vue";
 import CurrentlyPlaying from "@/components/CurrentlyPlaying.vue";
 import { useRoute } from "vue-router";
+import { onBeforeUnmount, ref } from "vue";
+import { useApi } from "@/Api";
 
 const route = useRoute();
+const api = useApi();
+
+const userInfo = ref(api?.getUserInfo(route.params.id as string));
+
+let refreshUserInfo = setInterval(() => {
+  userInfo.value = api?.getUserInfo(route.params.id as string);
+}, 20000);
+
+onBeforeUnmount(() => {
+  clearInterval(refreshUserInfo);
+});
 </script>
 
 <template>
   <h1>User</h1>
   <PromiseResolver
-    :promise="$api.getUserInfo($route.params.id)"
+    :promise="userInfo"
     v-slot="{ data: { user, currentlyPlaying } }"
     class="row"
   >