From bf0ec150cd6486cd43e521e0439b32134c14f751 Mon Sep 17 00:00:00 2001 From: Thomas Citharel Date: Tue, 27 Oct 2020 09:13:17 +0100 Subject: [PATCH] Fix followings/followers pagination Signed-off-by: Thomas Citharel --- js/src/components/Admin/Followers.vue | 13 +--- js/src/components/Admin/Followings.vue | 17 +--- js/src/mixins/relay.ts | 104 +++++++++++++++++++------ js/src/views/Admin/Follows.vue | 8 ++ 4 files changed, 96 insertions(+), 46 deletions(-) diff --git a/js/src/components/Admin/Followers.vue b/js/src/components/Admin/Followers.vue index 82962e7ee..71f13d6c0 100644 --- a/js/src/components/Admin/Followers.vue +++ b/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 = { elements: [], total: 0 }; - RelayMixin = RelayMixin; formatDistanceToNow = formatDistanceToNow; diff --git a/js/src/components/Admin/Followings.vue b/js/src/components/Admin/Followings.vue index 5dc2ad920..d39a8c746 100644 --- a/js/src/components/Admin/Followings.vue +++ b/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 = { 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" }); } } diff --git a/js/src/mixins/relay.ts b/js/src/mixins/relay.ts index 295bccec9..909fc9652 100644 --- a/js/src/mixins/relay.ts +++ b/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 = { elements: [], total: 0 }; + + relayFollowings: Paginate = { elements: [], total: 0 }; + checkedRows: IFollower[] = []; - page = 1; + followingsPage = 1; - perPage = 10; + followersPage = 1; + + perPage = 1; toggle(row: Record): void { this.table.toggleDetails(row); } - async onPageChange(page: number): Promise { - 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 { + 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 { + 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 { diff --git a/js/src/views/Admin/Follows.vue b/js/src/views/Admin/Follows.vue index 59f14778c..d63e5135e 100644 --- a/js/src/views/Admin/Follows.vue +++ b/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, + }, }, }, })