More efficient following streamer tab, only show live streamers and hide if empty #56

src/mixins.ts

@@ -1,3 +1,6 @@
+import { getFollows } from '@/settingsManager'
+import type { StreamerData } from '@/types'
+
 const language = localStorage.getItem('language') || 'en-us'
 const https = import.meta.env.SAFETWITCH_HTTPS.slice() === 'true'
 const protocol = https ? 'https://' : 'http://'
@@ -88,3 +91,32 @@ export function getTimeFromQuery(query: string) {
   time += times[2]
   return time
 }
+
+/**
+ * Returns a string of online streamers from a
+ * array of string of the request streamers
+ * @param streamers the array of streamers
+ * @returns the streamers in that list that are online
+ */
+export async function followersStreaming(streamers: string[]): Promise<string[]> {
+  const payload = {
+    streamers: streamers
+  }
+
+  // do not make request if no followers
+  if (streamers.length == 0) {
+    return []
+  }
+
+  const data: StreamerData[] = await postEndpoint('api/users/bulk', payload)
+
+  const liveStreamers: string[] = []
+
+  for (let streamer of data) {
+    if (streamer.isLive) {
+      liveStreamers.push(streamer.login)
+    }
+  }
+
+  return liveStreamers
+}

src/views/HomepageView.vue

@@ -6,20 +6,22 @@ import ErrorMessage from '@/components/ErrorMessage.vue'
 import LoadingScreen from '@/components/LoadingScreen.vue'
 import CategoryPreview from '@/components/CategoryPreview.vue'
 
-import { getEndpoint } from '@/mixins'
+import { getEndpoint, followersStreaming } from '@/mixins'
 import type { CategoryPreview as CategoryPreviewInterface } from '@/types'
+import { getFollows } from '@/settingsManager'
 
 export default {
   inject: ['protocol'],
   async setup() {
     let data = ref<CategoryPreviewInterface[]>()
     let status = ref<'ok' | 'error'>()
+    let following = ref<string[]>()
 
     return {
       data,
       status,
       filterTags: '',
-      following: ref([])
+      following,
     }
   },
   methods: {
@@ -69,13 +71,9 @@ export default {
   async mounted() {
     window.onscroll = this.getNextCategory
 
-    let following = localStorage.getItem('following')
-    if (following) {
-      this.following = JSON.parse(following)
-    } else {
-      this.following = []
-    }
+    this.following = await followersStreaming(getFollows());
 
+    // get discover page
     await getEndpoint('api/discover')
       .catch(() => {
         this.status = 'error'
@@ -98,7 +96,7 @@ export default {
   <error-message v-else-if="status == 'error'"></error-message>
 
   <div v-else-if="data" class="max-w-5xl mx-auto">
-    <div v-if="following.length > 0" class="p-2 text-white">
+    <div v-if="following && following.length > 0" class="p-2 text-white">
       <h1 class="font-bold text-5xl">Following</h1>
       <p class="text-xl">Streamers you follow</p>
       <ul class="flex overflow-x-scroll space-x-2 flex-nowrap h-[22rem] items-center">