Add infinite scroll to categories

src/views/CategoryView.vue

@@ -1,30 +1,32 @@
 <script lang="ts">
 import { ref, type Ref } from 'vue'
+import { useRoute } from 'vue-router'
 import StreamPreviewVue from '@/components/StreamPreview.vue'
 import ErrorMessage from '@/components/ErrorMessage.vue'
 import LoadingScreen from '@/components/LoadingScreen.vue'
 
 export default {
   async setup() {
+    const route = useRoute()
     const protocol = import.meta.env.VITE_HTTPS === 'true' ? 'https://' : 'http://'
     const data: Ref<any | undefined> = ref()
     const frontend_url = protocol + import.meta.env.VITE_INSTANCE_DOMAIN
+    const game: string = route.params.game.toString()
 
     return {
       data,
-      frontend_url
+      frontend_url,
+      protocol,
+      game
     }
   },
   async mounted() {
-    const protocol = import.meta.env.VITE_HTTPS === 'true' ? 'https://' : 'http://'
-    const game: string = this.$route.params.game.toString()
-
     try {
       const res = await fetch(
-        `${protocol}${import.meta.env.VITE_BACKEND_DOMAIN}/api/discover/${game}`
+        `${this.protocol}${import.meta.env.VITE_BACKEND_DOMAIN}/api/discover/${this.game}`
       )
       const rawData = await res.json()
-      if (rawData.status === 'ok') {
+      if (rawData.status === "ok") {
         this.data = rawData.data
       } else {
         this.data = { status: 'error' }
@@ -33,8 +35,33 @@ export default {
       this.data = { status: 'error' }
       console.error(err)
     }
+
+    this.getMoreStreams()
   },
   methods: {
+    getMoreStreams() {
+      window.onscroll = async () => {
+        let bottomOfWindow =
+          document.documentElement.scrollTop + window.innerHeight ===
+          document.documentElement.offsetHeight
+        const streams = this.data.streams
+        if (bottomOfWindow && streams) {
+          const cursor = streams[streams.length - 1].cursor
+          if (!cursor) return
+          const res = await fetch(
+            `${this.protocol}${import.meta.env.VITE_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)
+          }
+        }
+      }
+    },
     abbreviate(text: number) {
       return Intl.NumberFormat('en-US', {
         //@ts-ignore
@@ -65,25 +92,20 @@ export default {
           <div class="hidden md:block">
             <div>
               <div class="inline-flex my-1 space-x-3">
-                <p class="font-bold text-white text-lg">
+                <p class="font-bold text-white text-lg">Followers: {{ abbreviate(data.followers) }}</p>
-                  Followers: {{ abbreviate(data.followers) }}
-                </p>
                 <p class="font-bold text-white text-lg">Viewers: {{ abbreviate(data.viewers) }}</p>
               </div>
 
               <ul class="mb-5">
                 <li v-for="tag in data.tags" :key="tag" class="inline-flex">
-                  <span
+                  <span class="text-white p-1 py-0.5 mr-1 text-sm font-bold bg-ctp-overlay1 rounded-sm">{{
-                    class="text-white p-1 py-0.5 mr-1 text-sm font-bold bg-ctp-overlay1 rounded-sm"
+                    tag
-                    >{{ tag }}</span
+                  }}</span>
-                  >
                 </li>
               </ul>
             </div>
           </div>
-          <p class="text-md text-gray-400 overflow-y-auto hidden md:block">
+          <p class="text-md text-gray-400 overflow-y-auto hidden md:block">{{ data.description }}</p>
-            {{ data.description }}
-          </p>
         </div>
       </div>
 
@@ -96,10 +118,9 @@ export default {
 
           <ul class="mb-5">
             <li v-for="tag in data.tags" :key="tag" class="inline-flex">
-              <span
+              <span class="text-white p-1 py-0.5 mr-1 text-sm font-bold bg-ctp-overlay1 rounded-sm">{{
-                class="text-white p-1 py-0.5 mr-1 text-sm font-bold bg-ctp-overlay1 rounded-sm"
+                tag
-                >{{ tag }}</span
+              }}</span>
-              >
             </li>
           </ul>
         </div>
@@ -109,11 +130,7 @@ export default {
 
     <div class="max-w-[58rem] mx-auto">
       <ul>
-        <li
+        <li v-for="stream in data.streams" :key="stream" class="inline-flex m-2 hover:scale-105 transition-transform">
-          v-for="stream in data.streams"
-          :key="stream"
-          class="inline-flex m-2 hover:scale-105 transition-transform"
-        >
           <StreamPreviewVue :stream="stream"></StreamPreviewVue>
         </li>
       </ul>