Make UserView more readable and better overall

src/views/UserView.vue

@@ -1,26 +1,30 @@
 <script lang="ts">
 import { ref, inject } from 'vue'
 import { useRoute } from 'vue-router'
+
 import VideoPlayer from '@/components/VideoPlayer.vue'
 import TwitchChat from '@/components/TwitchChat.vue'
 import ErrorMessage from '@/components/ErrorMessage.vue'
 import FollowButton from '@/components/FollowButton.vue'
 import LoadingScreen from '@/components/LoadingScreen.vue'
 
+import type { StreamerData, ApiResponse } from '@/types'
+import { truncate, abbreviate, getEndpoint } from '@/mixins'
+
 export default {
+  inject: ["rootBackendUrl"],
   async setup() {
     const route = useRoute()
     const username = route.params.username
-    const data = ref()
-    const protocol = inject('protocol')
+    const data = ref<StreamerData>()
+    const status = ref<"ok" | "error">()
+    const rootBackendUrl = inject('rootBackendUrl')
     const videoOptions = {
       autoplay: true,
       controls: true,
       sources: [
         {
-          src: `${protocol}${
-            import.meta.env.SAFETWITCH_BACKEND_DOMAIN
-          }/proxy/stream/${username}/hls.m3u8`,
+          src: `${rootBackendUrl}/proxy/stream/${username}/hls.m3u8`,
           type: 'application/vnd.apple.mpegurl'
         }
       ],
@@ -29,10 +33,19 @@ export default {
 
     return {
       data,
+      status,
       videoOptions,
-      protocol
     }
   },
+  async mounted() {
+    const username = this.$route.params.username
+
+    const userData: ApiResponse = await getEndpoint("api/users/" + username)
+    .catch(() => {
+      this.status = "error"
+    })
+    this.data = userData.data as StreamerData
+  },
   components: {
     VideoPlayer,
     TwitchChat,
@@ -40,39 +53,8 @@ export default {
     FollowButton,
     LoadingScreen
   },
-  async mounted() {
-    const username = this.$route.params.username
-
-    try {
-      const res = await fetch(
-        `${this.protocol}${import.meta.env.SAFETWITCH_BACKEND_DOMAIN}/api/users/${username}`
-      )
-      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' }
-    }
-  },
   methods: {
-    truncate(value: string, length: number) {
-      if (value.length > length) {
-        return value.substring(0, length) + '...'
-      } else {
-        return value
-      }
-    },
-    abbreviate(text: number) {
-      return Intl.NumberFormat('en-US', {
-        //@ts-ignore
-        notation: 'compact',
-        maximumFractionDigits: 1
-      }).format(text)
-    }
+    truncate, abbreviate
   }
 }
 </script>
@@ -80,7 +62,7 @@ export default {
 <template>
   <loading-screen v-if="!data"></loading-screen>
 
-  <error-message v-else-if="data.status === 'error'"></error-message>
+  <error-message v-else-if="status === 'error'"></error-message>
 
   <div
     v-else
@@ -132,7 +114,7 @@ export default {
           <div v-else class="w-full">
             <ul class="text-xs font-bold text-left md:text-right space-x-1 space-y-1 overflow-y-auto">
               <li
-                v-for="tag in data.stream.tags"
+                v-for="tag in data.stream!.tags"
                 :key="tag"
                 class="inline-flex bg-ctp-mantle p-1.5 px-2 rounded-md"
               >
@@ -158,7 +140,7 @@ export default {
         <hr class="my-auto w-full bg-gray-200 rounded-full opacity-40" />
 
         <ul class="flex font-semibold text-md justify-start flex-wrap flex-row">
-          <li v-for="link in data.socials" :key="link">
+          <li v-for="link in data.socials">
             <a :href="link.link" class="text-white hover:text-gray-400 mr-4">
               <v-icon :name="`bi-${link.type}`" class="w-6 h-6 mr-1"></v-icon>
               <span>{{ link.name }}</span>