Following page infinite scroll

src/mixins.ts

@@ -1,4 +1,4 @@
-import type { StreamerData } from '@/types'
+import type { FollowingStreamer } from '@/types'
 
 const language = localStorage.getItem('language') || 'en-us'
 const https = import.meta.env.SAFETWITCH_HTTPS.slice() === 'true'
@@ -117,6 +117,33 @@ export async function followersStreaming(streamers: string[], cursor: number): P
         res = [...res, ...data]
       })
 
+  return res
+}
+
+/**
+ * Returns an array of FollowingStreamers
+ * @param streamers the array of streamers
+ * @param cursor which 35 streamer chunk to fetch
+ * @returns the streamers in that list that are online
+ */
+export async function getParsedFollowing(streamers: string[], cursor: number): Promise<FollowingStreamer[]> {
+  // do not make request if no followers
+  if (streamers.length == 0) {
+    return []
+  }
+
+  let res: FollowingStreamer[] = []
+
+  const payloadData = streamers.slice(cursor, cursor + 35)
+
+    const payload = {
+      streamers: payloadData
+    }
+
+    await postEndpoint('api/users/followingStreamer/bulk', payload)
+    .then((data: FollowingStreamer[]) => {
+      res = [...res, ...data]
+    })
 
   return res
 }

src/types/Streamer.ts

@@ -28,3 +28,10 @@ export interface StreamerData {
   colorHex: string
   id: number
 }
+
+export interface FollowingStreamer {
+ username: string
+ login: string
+ pfp: string
+ followers: number
+}

src/views/FollowingView.vue

@@ -6,13 +6,13 @@ import LoadingScreen from '@/components/LoadingScreen.vue'
 import ErrorMessage from '@/components/ErrorMessage.vue'
 
 import { getFollows } from '@/settingsManager'
-import { postEndpoint, abbreviate } from '@/mixins'
+import { postEndpoint, abbreviate, getParsedFollowing } from '@/mixins'
-import type { StreamerData } from '@/types'
+import type { FollowingStreamer } from '@/types'
 
 export default {
   inject: ['rootBackendUrl'],
   setup() {
-    let data = ref<StreamerData[]>([])
+    let data = ref<FollowingStreamer[]>([])
     let status = ref<'ok' | 'error'>()
 
     return {
@@ -22,9 +22,14 @@ export default {
     }
   },
   methods: {
-    abbreviate
+    abbreviate,
-  },
+    async getNextFollowingStage() {
-  async mounted() {
+      let bottomOfWindow =
+        document.documentElement.scrollTop + window.innerHeight ===
+        document.documentElement.offsetHeight
+      
+      if (!bottomOfWindow) return;
+
       const follows = getFollows()
 
       // do not make request if no followers
@@ -33,28 +38,19 @@ export default {
         return
       }
 
-    // split follows into 35 person segments
+      let cursor = this.data.length / 35
-    // the endpoint can only handle 35 at a time
+      let maxCursor = follows.length / 35
-    let payloads: string[][] = []
+      if (cursor > maxCursor) return;
-    for (let i = 0; i < follows.length; i += 35) {
-      const chunk = follows.slice(i, i + 35)
-      payloads.push(chunk)
-    }
 
-
+      let chunk = await getParsedFollowing(follows, cursor)
-    for (let i = 0; i < payloads.length; i++) {
+      this.data = [...this.data, ...chunk]
-      const payload = {
-        streamers: payloads[i]
     }
+  },
+  async mounted() {
+    const follows = getFollows()
 
-      await postEndpoint('api/users/followingStreamer/bulk', payload)
+    window.onscroll = this.getNextFollowingStage
-      .catch(() => {
+    this.data = await getParsedFollowing(follows, 0);
-        this.status = 'error'
-      })
-      .then((data: StreamerData[]) => {
-        this.data = [...this.data, ...data]
-      })
-    }
   },
   components: {
     LoadingScreen,