Clean this mess

src/components/TwitchChat.vue

@@ -1,10 +1,13 @@
 <script lang="ts">
-import { ref, type Ref, inject } from 'vue'
+import { ref, inject } from 'vue'
+
 import BadgeVue from './ChatBadge.vue'
 import { getBadges } from '@/assets/badges'
 import { parseMessage } from '@/assets/messageParser'
+
 import type { Badge, ParsedMessage } from '@/assets/types'
 
+
 export default {
   props: {
     isLive: {
@@ -18,23 +21,20 @@ export default {
     }
   },
   async setup(props) {
-    let messages: Ref<ParsedMessage[]> = ref([])
-    const protocol = inject('protocol')  
-    const wsProtocol = protocol === 'https://' ? 'wss://' : 'ws://'
-    const badgesFetch = await fetch(`${protocol}${import.meta.env.SAFETWITCH_BACKEND_DOMAIN}/api/badges?channelName=${props.channelName}`)
-    let badges: Badge[] =  (await badgesFetch.json()).data
+    let messages = ref<ParsedMessage[]>([])
+    let badges = ref<Badge[]>([])
+    let wsLink = inject('wsLink') as string
+
 
     return {
-      ws: new WebSocket(`${wsProtocol}${import.meta.env.SAFETWITCH_BACKEND_DOMAIN}`),
+      ws: new WebSocket(wsLink),
       messages,
       badges,
-      props,
     }
   },
   mounted() {
     const chatList = this.$refs.chatList as Element
     const chatStatusMessage = this.$refs.initConnectingStatus as Element
-
     this.ws.onmessage = (message) => {
       if (message.data == 'OK') {
         chatStatusMessage.textContent = this.$t("chat.connected", {username: this.channelName})
@@ -46,7 +46,7 @@ export default {
     }
 
     this.ws.onopen = () => {
-      this.ws.send('JOIN ' + this.props.channelName?.toLowerCase())
+      this.ws.send('JOIN ' + this.$props.channelName?.toLowerCase())
     }
   },
   methods: {

src/main.ts

@@ -13,11 +13,11 @@ const app = createApp(App).use(i18n)
 const https = (import.meta.env.SAFETWITCH_HTTPS.slice() === "true")
 
 const protocol = https ? 'https://' : 'http://'
+const wsProtocol = https ? 'wss://' : 'ws://'
 app.provide('protocol', protocol)
 app.provide('rootUrl', `${protocol}${import.meta.env.SAFETWITCH_INSTANCE_DOMAIN}`)
 app.provide('rootBackendUrl', `${protocol}${import.meta.env.SAFETWITCH_BACKEND_DOMAIN}`)
-
-
+app.provide('wsLink', `${wsProtocol}${import.meta.env.SAFETWITCH_BACKEND_DOMAIN}`)
 
 import { OhVueIcon, addIcons } from 'oh-vue-icons'
 import {

src/mixins.ts

@@ -16,7 +16,7 @@ export function abbreviate(text: number) {
 
 const https = (import.meta.env.SAFETWITCH_HTTPS.slice() === "true")
 const protocol = https ? 'https://' : 'http://'
-const rootBackendUrl = `${protocol}${import.meta.env.SAFETWITCH_BACKEND_DOMAIN}`
+const rootBackendUrl = `${protocol}${import.meta.env.SAFETWITCH_BACKEND_DOMAIN}/`
 
 export async function getEndpoint(endpoint: string) {
     let data
@@ -25,15 +25,16 @@ export async function getEndpoint(endpoint: string) {
         const res = await fetch(rootBackendUrl + endpoint)
         const rawData = await res.json()
 
-        if (rawData.status === 'ok') {
-            data = rawData.data
-        } else {
-            data = { status: 'error' }
+        if (!res.ok) {
+            throw res
+        }
+        if (rawData.status !== 'ok') {
+            throw rawData
         }
 
+        data = rawData.data
     } catch (error) {
-        console.error(error)
-        data = { status: 'error' }
+        throw error
     }
 
     return data

src/types/Category.ts

@@ -1,6 +1,6 @@
 export type Tag = string
 
-export interface Category {
+export interface CategoryPreview {
     name: string
     displayName: string
     viewers: number

src/types/Search.ts

@@ -1,9 +1,9 @@
 import type { StreamData, StreamerData } from "./"
-import type { Category } from "./"
+import type { CategoryPreview } from "./"
 
 export interface SearchResult {
     channels: StreamerData[]
-    categories: Category[]
-    relatedChannels: StreamData[]
-    channelsWithTag: StreamData[]
+    categories: CategoryPreview[]
+    relatedChannels: StreamerData[]
+    channelsWithTag: StreamerData[]
 }

src/types/Streamer.ts

@@ -16,6 +16,7 @@ export interface StreamData {
 
 export interface StreamerData {
     username: string
+    login: string
     followers: number
     isLive: boolean
     about: string

src/types/index.ts

@@ -5,4 +5,3 @@ export * from './Chat'
 export * from './Category'
 export * from './CategoryData'
 export * from './ApiResponse'
-

src/views/CategoryView.vue

@@ -1,37 +1,33 @@
 <script lang="ts">
-import { ref, type Ref } from 'vue'
-import { useRoute } from 'vue-router'
+import { ref } from 'vue'
+
 import StreamPreviewVue from '@/components/StreamPreview.vue'
 import ErrorMessage from '@/components/ErrorMessage.vue'
 import LoadingScreen from '@/components/LoadingScreen.vue'
 
+import type { CategoryData } from '@/types'
+import { getEndpoint, abbreviate } from '@/mixins'
+
+
 export default {
   inject: ['protocol'],
   async setup() {
-    const route = useRoute()
-    const data: Ref<any | undefined> = ref()
-    const game: string = route.params.game.toString()
+    let data = ref<CategoryData>()
+    let status = ref<"ok" | "error">()
 
     return {
       data,
-      game
+      status
     }
   },
   async mounted() {
-    try {
-      const res = await fetch(
-        `${this.protocol}${import.meta.env.SAFETWITCH_BACKEND_DOMAIN}/api/discover/${this.game}`
-      )
-      const rawData = await res.json()
-      if (rawData.status === "ok") {
-        this.data = rawData.data
-      } else {
-        this.data = { status: 'error' }
-      }
-    } catch (err) {
-      this.data = { status: 'error' }
-      console.error(err)
-    }
+    await getEndpoint("api/discover/" + this.$route.params.game)
+        .catch(() => {
+            this.status = "error"
+        })
+        .then((data: CategoryData) => {
+            this.data = data
+        })
 
     this.getMoreStreams()
   },
@@ -41,31 +37,26 @@ export default {
         let bottomOfWindow =
           document.documentElement.scrollTop + window.innerHeight ===
           document.documentElement.offsetHeight
-        const streams = this.data.streams
+        const streams = this.data!.streams
+
         if (bottomOfWindow && streams) {
+          // get cursor of the last stream rendered
           const cursor = streams[streams.length - 1].cursor
           if (!cursor) return
-          const res = await fetch(
-            `${this.protocol}${import.meta.env.SAFETWITCH_BACKEND_DOMAIN}/api/discover/${this.game}/?cursor=${cursor}`
-          )
-          if (!res.ok) {
-            throw new Error('Failed to fetch data')
-          }
-          const resData = await res.json()
 
-          for (let stream of resData.data.streams) {
-            this.data.streams.push(stream)
+          // get rest of streams from api
+          const resData = await getEndpoint(`api/discover/${this.$route.params.game}/?cursor=${cursor}`)
+            .catch((err) => {
+              throw err
+            })
+
+          for (let stream of resData.streams) {
+            this.data!.streams.push(stream)
           }
         }
       }
     },
-    abbreviate(text: number) {
-      return Intl.NumberFormat('en-US', {
-        //@ts-ignore
-        notation: 'compact',
-        maximumFractionDigits: 1
-      }).format(text)
-    }
+    abbreviate,
   },
   components: {
     StreamPreviewVue,
@@ -76,10 +67,10 @@ export default {
 </script>
 
 <template>
-  <loading-screen v-if="!data"></loading-screen>
-  <error-message v-else-if="data.status === 'error' || !data"></error-message>
+  <loading-screen v-if="!data && status != 'error'"></loading-screen>
+  <error-message v-else-if="status == 'error'"></error-message>
 
-  <div v-else class="flex flex-col max-w-5xl mx-auto">
+  <div v-else-if="data" class="flex flex-col max-w-5xl mx-auto">
     <div class="flex p-3 flex-col">
       <div class="inline-flex space-x-4">
         <img :src="data.cover" class="self-start rounded-md" />
@@ -127,7 +118,7 @@ export default {
 
     <div class="max-w-[58rem] mx-auto">
       <ul>
-        <li v-for="stream in data.streams" :key="stream" class="inline-flex m-2 hover:scale-105 transition-transform">
+        <li v-for="stream in data.streams" class="inline-flex m-2 hover:scale-105 transition-transform">
           <StreamPreviewVue :stream="stream"></StreamPreviewVue>
         </li>
       </ul>

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`)
+    await getEndpoint("api/discover")
+        .catch(() => {
+            this.status = "error"
+        })
+        .then((data: CategoryPreviewInterface[]) => {
+            this.data = data
+        })
 
-      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' }
-    }
   },
   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"
       >

src/views/SearchPageView.vue

@@ -21,7 +21,6 @@ export default {
         }
     },
     async mounted() {
-
         await getEndpoint("api/search/?query=" + this.$route.query.query)
         .catch(() => {
             this.status = "error"

src/views/UserView.vue

@@ -151,6 +151,6 @@ export default {
       </div>
     </div>
 
-    <twitch-chat :isLive="data.isLive" :channelName="data.username"></twitch-chat>
+    <twitch-chat :isLive="data.isLive" :channelName="data.login"></twitch-chat>
   </div>
 </template>