From e4de1997a3c34a9fb96136e82446ee926104c3d0 Mon Sep 17 00:00:00 2001
From: adb-sh <git@adb.sh>
Date: Sat, 1 Oct 2022 21:48:36 +0200
Subject: [PATCH] refresh spotify api token; auto reload currentlyPlaying

---
 src/components/CurrentlyPlaying.vue |  6 ++++--
 src/components/PromiseResolver.vue  | 15 ++++++++++++---
 src/views/UserPage.vue              | 15 ++++++++++++++-
 3 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/components/CurrentlyPlaying.vue b/src/components/CurrentlyPlaying.vue
index de459f5..2f3c239 100644
--- a/src/components/CurrentlyPlaying.vue
+++ b/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>
diff --git a/src/components/PromiseResolver.vue b/src/components/PromiseResolver.vue
index 7d228d7..e35dc6e 100644
--- a/src/components/PromiseResolver.vue
+++ b/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">
diff --git a/src/views/UserPage.vue b/src/views/UserPage.vue
index d6a999e..575f3b8 100644
--- a/src/views/UserPage.vue
+++ b/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"
   >