Clean this mess

src/views/HomepageView.vue

@@ -1,17 +1,23 @@
 <script lang="ts">
-import { ref, type Ref } from 'vue'
+import { ref } from 'vue'
+
 import StreamPreviewVue from '@/components/StreamPreview.vue'
 import ErrorMessage from '@/components/ErrorMessage.vue'
 import LoadingScreen from '@/components/LoadingScreen.vue'
 import CategoryPreview from '@/components/CategoryPreview.vue'
 
+import { getEndpoint } from '@/mixins'
+import type { CategoryPreview as CategoryPreviewInterface } from '@/types'
+
 export default {
   inject: ['protocol'],
   async setup() {
-    let data: Ref<any | undefined> = ref()
+    let data = ref<CategoryPreviewInterface[]>()
+    let status = ref<"ok" | "error">()
 
     return {
       data,
+      status,
       filterTags: '',
       following: ref([])
     }
@@ -75,19 +81,14 @@ export default {
       this.following = []
     }
 
-    try {
-      const res = await fetch(`${this.protocol}${import.meta.env.SAFETWITCH_BACKEND_DOMAIN}/api/discover`)
-      
-      const rawData = await res.json()
-      if (rawData.status === 'ok') {
-        this.data = rawData.data
-      } else {
-        this.data = { status: 'error' }
-      }
-    } catch (error) {
-      console.error(error)
-      this.data = { status: 'error' }
-    }
+    await getEndpoint("api/discover")
+        .catch(() => {
+            this.status = "error"
+        })
+        .then((data: CategoryPreviewInterface[]) => {
+            this.data = data
+        })
+
   },
   components: {
     StreamPreviewVue,
@@ -99,10 +100,10 @@ export default {
 </script>
 
 <template>
-  <loading-screen v-if="!data"></loading-screen>
-  <error-message v-else-if="data.status === 'error'"></error-message>
+  <loading-screen v-if="!data && status != 'error'"></loading-screen>
+  <error-message v-else-if="status == 'error'"></error-message>
 
-  <div v-else class="max-w-5xl mx-auto">
+  <div v-else-if="data" class="max-w-5xl mx-auto">
     <div v-if="following.length > 0" class="p-2 text-white">
       <h1 class="font-bold text-5xl">Following</h1>
       <p class="text-xl">Streamers you follow</p>
@@ -142,7 +143,6 @@ export default {
     <ul ref="categoryList">
       <li
         v-for="category in data"
-        :key="category"
         ref="categoryItem"
         class="inline-flex m-2 hover:scale-105 transition-transform"
       >