Implement infinite scroll

src/views/CategoryView.vue

@@ -7,8 +7,6 @@ export default {
     const game = route.params.game
     const res = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/discover/${game}`)
     const data = await res.json()
-    console.log(import.meta.env)
-
     let frontend_url = import.meta.env.VITE_INSTANCE_URL
     return {
       data,

src/views/HomepageView.vue

@@ -1,12 +1,16 @@
 <script lang="ts">
+import { ref, type Ref } from 'vue'
+
 export default {
   async setup() {
     const res = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/discover`)
-    console.log(import.meta.env)
+    let data: Ref<any[] | undefined> = ref()
     let frontend_url = import.meta.env.VITE_INSTANCE_URL
+    data.value = await res.json()
+
 
     return {
-      data: await res.json(),
+      data,
       frontend_url,
       filterTags: ''
     }
@@ -47,7 +51,26 @@ export default {
           category.style.display = "none"
         }
       }
+    },
+    getNextCategory() {
+      window.onscroll = async () => {
+        let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight === document.documentElement.offsetHeight;
+        if (bottomOfWindow && this.data) {
+          const cursor = this.data[this.data.length - 1].cursor
+          if(!cursor) return
+          const res = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/discover/?cursor=${cursor}`)
+          const data = await res.json()
+
+          for (let category of data) {
+            this.data.push(category)
           }
+
+        } 
+      }
+    }
+  },
+  mounted() {
+    this.getNextCategory()
   }
 }
 </script>