package.json

@@ -16,6 +16,7 @@
     "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,9 +10,7 @@ defineProps({
   <div class="currentlyPlaying card">
     <div class="card-header">
       <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">
@@ -38,7 +36,7 @@ defineProps({
               rel="noopener norefferrer"
               class="btn btn-outline-dark m-1"
             >
-              view {{ currentlyPlaying.context.type }} on Spotify
+              view playlist on Spotify
             </a>
           </p>
         </div>

src/components/PromiseResolver.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, defineProps, watch } from "vue";
+import { ref, defineProps } from "vue";
 import ThrobberLoading from "@/components/ThrobberLoading.vue";
 
 const props = defineProps({
@@ -37,10 +37,6 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
-  throbber: {
-    type: Boolean,
-    default: true,
-  }
 });
 
 const loading = ref(true);
@@ -50,9 +46,9 @@ const data = ref(null);
 
 const update = async (promise: Promise | unknown) => {
   loading.value = true;
-  if (props.throbber) setTimeout(() => {
+  setTimeout(() => {
     if (loading.value) showThrobber.value = true;
-  }, 250);
+  }, 100);
   try {
     data.value = await (promise.isPromiseList
       ? Promise.all(promise.promises)
@@ -61,14 +57,9 @@ 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,10 +7,7 @@ import PromiseResolver from "@/components/PromiseResolver.vue";
     <h1>Connect to Spotify</h1>
     <div class="card">
       <div class="card-body">
-        <PromiseResolver :promise="$api.auth({
+        <PromiseResolver :promise="$api.auth({ code, state })">
-          code: $route.query.code,
-          state: $route.query.state,
-        })">
           <div class="alert alert-success">
             Authorization completed
           </div>

src/views/AuthPage.vue

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

src/views/UserPage.vue

@@ -2,27 +2,14 @@
 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="userInfo"
+    :promise="$api.getUserInfo($route.params.id)"
     v-slot="{ data: { user, currentlyPlaying } }"
     class="row"
   >