Create following page displaying all accounts you're following #35 and fix follow bug #68

src/components/FollowButton.vue

@@ -26,7 +26,7 @@ export default {
         const index = parsedFollows.indexOf(username)
         console.log(index)
         if (index === -1) return
-        parsedFollows = parsedFollows.splice(index, 1)
+        parsedFollows.splice(index, 1)
         console.log(parsedFollows)
         this.isFollowing = false
       } else {

src/mixins.ts

@@ -45,6 +45,34 @@ export async function getEndpoint(endpoint: string) {
   return data
 }
 
+
+/**
+ * Gets the response from an endpoint from the backend
+ * @param endpoint The endpoint to get data from
+ * @returns The data from the enpoint
+ */
+export async function postEndpoint(endpoint: string, data: any) {
+  const res = await fetch(rootBackendUrl + endpoint, {
+    method: 'POST',
+    headers: {
+      'Accept-Language': language
+    },
+    body: JSON.stringify(data)
+  })
+  const rawData = await res.json()
+
+  if (!res.ok) {
+    throw res
+  }
+  if (rawData.status !== 'ok') {
+    throw rawData
+  }
+
+  const finalData = rawData.data
+
+  return finalData
+}
+
 /**
  * Converts a twitch timestamp (0h0m0s) to seconds
  * @param query 0h0m0s

src/router/index.ts

@@ -8,6 +8,7 @@ const SearchPageView = () => import('../views/SearchPageView.vue')
 const VodView = () => import('../views/VodView.vue')
 const SettingsView = () => import('../views/SettingsView.vue')
 const ClipView = () => import('../views/ClipView.vue')
+const FollowingView = () => import('../views/FollowingView.vue')
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -33,6 +34,10 @@ const router = createRouter({
       name: 'about',
       component: PrivacyPageView
     },
+    {
+      path: "/following",
+      component: FollowingView
+    },
     {
       path: '/:username',
       component: UserView

src/settingsManager.ts

@@ -189,6 +189,13 @@ export function getSetting(key: string): boolean | string {
   return parsed.settings[key].selected
 }
 
+export function getFollows(): string[] {
+  const follows = localStorage.getItem('following') || '[]'
+  let parsedFollows: string[] = JSON.parse(follows)
+
+  return parsedFollows
+}
+
 /**
  * Gets the current theme
  * @returns the name of the current theme
@@ -245,3 +252,4 @@ export const themeList = [
     }
   }
 ]
+

src/views/FollowingView.vue

@@ -0,0 +1,66 @@
+<script lang="ts">
+import { ref, inject } from 'vue'
+
+import FollowButton from '@/components/FollowButton.vue'
+import LoadingScreen from '@/components/LoadingScreen.vue'
+
+import { getFollows } from '@/settingsManager'
+import { postEndpoint, abbreviate } from '@/mixins'
+import type { StreamerData } from '@/types'
+
+export default {
+  inject: ['rootBackendUrl'],
+  setup() {
+    let data = ref<StreamerData[]>()
+    let status = ref<'ok' | 'error'>()
+
+    return {
+      data,
+      status,
+      rootBackendUrl: inject('rootBackendUrl')
+    }
+  },
+  methods: {
+    abbreviate
+  },
+  async mounted() {
+    const follows = getFollows()
+
+    const payload = {
+      streamers: follows
+    }
+
+    await postEndpoint('api/users/bulk', payload)
+      .catch(() => {
+        this.status = 'error'
+      })
+      .then((data: StreamerData[]) => {
+        this.data = data
+      })
+  },
+  components: {
+    LoadingScreen,
+    FollowButton
+  }
+}
+</script>
+<template>
+  <loading-screen v-if="!data && status != 'error'"></loading-screen>
+  <div class="md:max-w-[50rem] w-full  mx-auto text-contrast flex justify-center">
+    <ul class="m-2">
+      <li v-for="streamer in data" class="md:inline-flex">
+        <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 class="justify-between flex flex-col ml-2">
+            <h1 class="text-2xl font-bold">{{ streamer.username }}</h1>
+            <span>{{ abbreviate(streamer.followers) }} Followers</span>
+          </div>
+          <div class="my-auto ml-9">
+            <follow-button :username="streamer.login"></follow-button>
+          </div>
+
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>