From 66ce0de3fa70fa56f029546c23d848eb15bbba28 Mon Sep 17 00:00:00 2001
From: Natty <natty.sh.git@gmail.com>
Date: Wed, 6 Mar 2024 16:09:31 +0100
Subject: [PATCH] Fixed follow list view pagination

---
 .../client/src/pages/user/follow-list.vue     | 46 ++++++++++++-------
 1 file changed, 29 insertions(+), 17 deletions(-)

diff --git a/fe_calckey/frontend/client/src/pages/user/follow-list.vue b/fe_calckey/frontend/client/src/pages/user/follow-list.vue
index 996ec81..51c5b84 100644
--- a/fe_calckey/frontend/client/src/pages/user/follow-list.vue
+++ b/fe_calckey/frontend/client/src/pages/user/follow-list.vue
@@ -22,33 +22,45 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from "vue";
 import MkUserInfo from "@/components/MkUserInfo.vue";
 import { endpoints, packed } from "magnetar-common";
 import MagPagination, { Paging } from "@/components/MagPagination.vue";
+import { reactive, watch } from "vue";
 
 const props = defineProps<{
     user: packed.PackUserBase;
     type: "following" | "followers";
 }>();
 
-const followingPagination: Paging = {
-    endpoint: endpoints.GetFollowingById,
-    limit: 20,
-    pathParams: computed(() => ({
-        id: props.user.id,
-    })),
-    params: {},
-};
+const followingPagination: Paging<typeof endpoints.GetFollowingById> = reactive(
+    {
+        endpoint: endpoints.GetFollowingById,
+        limit: 20,
+        pathParams: {
+            id: props.user.id,
+        },
+        params: {},
+    }
+);
 
-const followersPagination: Paging = {
-    endpoint: endpoints.GetFollowersById,
-    limit: 20,
-    pathParams: computed(() => ({
-        id: props.user.id,
-    })),
-    params: {},
-};
+const followersPagination: Paging<typeof endpoints.GetFollowersById> = reactive(
+    {
+        endpoint: endpoints.GetFollowersById,
+        limit: 20,
+        pathParams: {
+            id: props.user.id,
+        },
+        params: {},
+    }
+);
+
+watch(
+    () => props.user.id,
+    (val) => {
+        followingPagination.pathParams.id = val;
+        followersPagination.pathParams.id = val;
+    }
+);
 </script>
 
 <style lang="scss" scoped>