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

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">