From 6ec6280fd5da50b623adf7dc236358155f93bccb Mon Sep 17 00:00:00 2001
From: dragongoose <19649813+dragongoose@users.noreply.github.com>
Date: Wed, 29 Mar 2023 10:02:04 -0400
Subject: [PATCH] Implement infinite scroll

---
 src/views/CategoryView.vue |  2 --
 src/views/HomepageView.vue | 27 +++++++++++++++++++++++++--
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/views/CategoryView.vue b/src/views/CategoryView.vue
index 587f414..d32cff7 100644
--- a/src/views/CategoryView.vue
+++ b/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,
diff --git a/src/views/HomepageView.vue b/src/views/HomepageView.vue
index fb45cf2..97ad6da 100644
--- a/src/views/HomepageView.vue
+++ b/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>