Fix #133

src/mixins.ts

@@ -137,7 +137,9 @@ export async function getParsedFollowing(
 
   let res: FollowingStreamer[] = []
 
-  const payloadData = streamers.slice(cursor, cursor + 35)
+  const start = cursor * 35
+  const end = (cursor + 1) * 35
+  const payloadData = streamers.slice(start, end)
 
   const payload = {
     streamers: payloadData

src/views/FollowingView.vue

@@ -39,12 +39,14 @@ export default {
         return
       }
 
-      const cursor = this.data.length / 35
-      const maxCursor = follows.length / 35
+      const cursor = Math.ceil(this.data.length / 35)
+      const maxCursor = Math.floor(follows.length / 35)
+
       if (cursor > maxCursor) return
 
       const chunk = await getParsedFollowing(follows, cursor)
       this.data = [...this.data, ...chunk]
+      console.log(this.data[this.data.length - 1])
     }
   },
   async mounted() {
@@ -64,10 +66,7 @@ export default {
 <template>
   <loading-screen v-if="!data && status != 'error'"></loading-screen>
   <error-message v-else-if="status == 'error'"></error-message>
-  <div
-    v-else-if="data"
-    class="md:max-w-[50rem] w-full mx-auto text-contrast flex flex-col justify-center"
-  >
+  <div v-else-if="data" class="md:max-w-[50rem] w-full mx-auto text-contrast flex flex-col justify-center">
     <vue-title title="Following"></vue-title>
     <div v-if="data.length == 0" class="text-center">
       <h1 class="text-3xl font-bold">{{ $t('following.empty') }}</h1>
@@ -81,13 +80,26 @@ export default {
 
     <ul class="m-2 flex flex-wrap justify-center">
       <li v-for="streamer in data" :key="streamer.login" class="">
-        <div class="inline-flex bg-overlay0 p-2.5 m-1 rounded-md w-[22rem]">
-          <img :src="streamer.pfp" class="w-16 rounded-full" />
+        <div v-if="streamer.username != String()" class="inline-flex bg-overlay0 p-2.5 m-1 rounded-md w-[22rem]">
+          <img :src="streamer.pfp" class="w-16 h-16 rounded-full" />
           <div class="justify-between flex flex-col ml-2 truncate text-ellipsis w-[8rem]">
             <h1 class="text-2xl font-bold">
               <router-link :to="streamer.login">{{ streamer.username }}</router-link>
             </h1>
-            <span>{{ abbreviate(streamer.followers) }} Followers</span>
+            <span>{{ abbreviate(streamer.followers) }} {{ $t('main.followers') }}</span>
+          </div>
+          <div class="m-auto">
+            <follow-button :username="streamer.login"></follow-button>
+          </div>
+        </div>
+
+        <div v-else="streamer.username != String()" class="inline-flex bg-overlay0 p-2.5 m-1 rounded-md w-[22rem]">
+          <img class="w-16 h-16 rounded-full border-solid border-4 border-red" />
+          <div class="justify-between flex flex-col ml-2 truncate text-ellipsis w-[8rem]">
+            <h1 class="text-2xl font-bold">
+              <router-link :to="streamer.login">{{ streamer.login }}</router-link>
+            </h1>
+            <span class="text-red">{{ $t('main.suspended') }}</span>
           </div>
           <div class="m-auto">
             <follow-button :username="streamer.login"></follow-button>