Fix followings/followers pagination

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Admin/Followers.vue

@@ -12,7 +12,7 @@
       backend-pagination
       :total="relayFollowers.total"
       :per-page="perPage"
-      @page-change="onPageChange"
+      @page-change="onFollowersPageChange"
       checkable
       checkbox-position="left"
     >
@@ -103,18 +103,11 @@
 import { Component, Mixins } from "vue-property-decorator";
 import { SnackbarProgrammatic as Snackbar } from "buefy";
 import { formatDistanceToNow } from "date-fns";
-import { ACCEPT_RELAY, REJECT_RELAY, RELAY_FOLLOWERS } from "../../graphql/admin";
-import { Paginate } from "../../types/paginate";
+import { ACCEPT_RELAY, REJECT_RELAY } from "../../graphql/admin";
 import { IFollower } from "../../types/actor/follower.model";
 import RelayMixin from "../../mixins/relay";
 
 @Component({
-  apollo: {
-    relayFollowers: {
-      query: RELAY_FOLLOWERS,
-      fetchPolicy: "cache-and-network",
-    },
-  },
   metaInfo() {
     return {
       title: this.$t("Followers") as string,
@@ -123,8 +116,6 @@ import RelayMixin from "../../mixins/relay";
   },
 })
 export default class Followers extends Mixins(RelayMixin) {
-  relayFollowers: Paginate<IFollower> = { elements: [], total: 0 };
-
   RelayMixin = RelayMixin;
 
   formatDistanceToNow = formatDistanceToNow;

js/src/components/Admin/Followings.vue

@@ -25,7 +25,7 @@
       backend-pagination
       :total="relayFollowings.total"
       :per-page="perPage"
-      @page-change="onPageChange"
+      @page-change="onFollowingsPageChange"
       checkable
       checkbox-position="left"
     >
@@ -101,18 +101,12 @@
 import { Component, Mixins } from "vue-property-decorator";
 import { SnackbarProgrammatic as Snackbar } from "buefy";
 import { formatDistanceToNow } from "date-fns";
-import { ADD_RELAY, RELAY_FOLLOWINGS, REMOVE_RELAY } from "../../graphql/admin";
+import { ADD_RELAY, REMOVE_RELAY } from "../../graphql/admin";
 import { IFollower } from "../../types/actor/follower.model";
 import { Paginate } from "../../types/paginate";
 import RelayMixin from "../../mixins/relay";
 
 @Component({
-  apollo: {
-    relayFollowings: {
-      query: RELAY_FOLLOWINGS,
-      fetchPolicy: "cache-and-network",
-    },
-  },
   metaInfo() {
     return {
       title: this.$t("Followings") as string,
@@ -121,8 +115,6 @@ import RelayMixin from "../../mixins/relay";
   },
 })
 export default class Followings extends Mixins(RelayMixin) {
-  relayFollowings: Paginate<IFollower> = { elements: [], total: 0 };
-
   newRelayAddress = "";
 
   RelayMixin = RelayMixin;
@@ -137,12 +129,11 @@ export default class Followings extends Mixins(RelayMixin) {
         variables: {
           address: this.newRelayAddress,
         },
-        // TODO: Handle cache update properly without refreshing
       });
       await this.$apollo.queries.relayFollowings.refetch();
       this.newRelayAddress = "";
-    } catch (e) {
-      Snackbar.open({ message: e.message, type: "is-danger", position: "is-bottom" });
+    } catch (err) {
+      Snackbar.open({ message: err.message, type: "is-danger", position: "is-bottom" });
     }
   }
 

js/src/mixins/relay.ts

@@ -1,40 +1,100 @@
 import { Component, Vue, Ref } from "vue-property-decorator";
 import { ActorType, IActor } from "@/types/actor";
 import { IFollower } from "@/types/actor/follower.model";
+import { RELAY_FOLLOWERS, RELAY_FOLLOWINGS } from "@/graphql/admin";
+import { Paginate } from "@/types/paginate";
 
-@Component
+@Component({
+  apollo: {
+    relayFollowings: {
+      query: RELAY_FOLLOWINGS,
+      fetchPolicy: "cache-and-network",
+      variables() {
+        return {
+          page: this.followingsPage,
+          limit: this.perPage,
+        };
+      },
+    },
+    relayFollowers: {
+      query: RELAY_FOLLOWERS,
+      fetchPolicy: "cache-and-network",
+      variables() {
+        return {
+          page: this.followersPage,
+          limit: this.perPage,
+        };
+      },
+    },
+  },
+})
 export default class RelayMixin extends Vue {
   @Ref("table") readonly table!: any;
 
+  relayFollowers: Paginate<IFollower> = { elements: [], total: 0 };
+
+  relayFollowings: Paginate<IFollower> = { elements: [], total: 0 };
+
   checkedRows: IFollower[] = [];
 
-  page = 1;
+  followingsPage = 1;
 
-  perPage = 10;
+  followersPage = 1;
+
+  perPage = 1;
 
   toggle(row: Record<string, unknown>): void {
     this.table.toggleDetails(row);
   }
 
-  async onPageChange(page: number): Promise<void> {
-    this.page = page;
-    await this.$apollo.queries.relayFollowings.fetchMore({
-      variables: {
-        page: this.page,
-        limit: this.perPage,
-      },
-      updateQuery: (previousResult, { fetchMoreResult }) => {
-        if (!fetchMoreResult) return previousResult;
-        const newFollowings = fetchMoreResult.relayFollowings.elements;
-        return {
-          relayFollowings: {
-            __typename: previousResult.relayFollowings.__typename,
-            total: previousResult.relayFollowings.total,
-            elements: [...previousResult.relayFollowings.elements, ...newFollowings],
-          },
-        };
-      },
-    });
+  async onFollowingsPageChange(page: number): Promise<void> {
+    this.followingsPage = page;
+    try {
+      await this.$apollo.queries.relayFollowings.fetchMore({
+        variables: {
+          page: this.followingsPage,
+          limit: this.perPage,
+        },
+        updateQuery: (previousResult, { fetchMoreResult }) => {
+          if (!fetchMoreResult) return previousResult;
+          const newFollowings = fetchMoreResult.relayFollowings.elements;
+          return {
+            relayFollowings: {
+              __typename: previousResult.relayFollowings.__typename,
+              total: previousResult.relayFollowings.total,
+              elements: [...previousResult.relayFollowings.elements, ...newFollowings],
+            },
+          };
+        },
+      });
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  async onFollowersPageChange(page: number): Promise<void> {
+    this.followersPage = page;
+    try {
+      await this.$apollo.queries.relayFollowers.fetchMore({
+        variables: {
+          page: this.followersPage,
+          limit: this.perPage,
+        },
+        updateQuery: (previousResult, { fetchMoreResult }) => {
+          if (!fetchMoreResult) return previousResult;
+          const newFollowers = fetchMoreResult.relayFollowers.elements;
+          return {
+            relayFollowers: {
+              __typename: previousResult.relayFollowers.__typename,
+              total: previousResult.relayFollowers.total,
+              elements: [...previousResult.relayFollowers.elements, ...newFollowers],
+            },
+          };
+        },
+      });
+    } catch (err) {
+      console.error(err);
+    }
   }
 
   static isInstance(actor: IActor): boolean {

js/src/views/Admin/Follows.vue

@@ -69,10 +69,18 @@ import RouteName from "../../router/name";
     relayFollowings: {
       query: RELAY_FOLLOWINGS,
       fetchPolicy: "cache-and-network",
+      variables: {
+        page: 1,
+        limit: 10,
+      },
     },
     relayFollowers: {
       query: RELAY_FOLLOWERS,
       fetchPolicy: "cache-and-network",
+      variables: {
+        page: 1,
+        limit: 10,
+      },
     },
   },
 })