Paginate the list of conversations

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

js/src/graphql/group.ts

@@ -119,7 +119,7 @@ export const GROUP_FIELDS_FRAGMENTS = gql`
       }
       total
     }
-    discussions {
+    discussions(page: $discussionsPage, limit: $discussionsLimit) {
       total
       elements {
         ...DiscussionBasicFields
@@ -198,6 +198,8 @@ export const FETCH_GROUP = gql`
     $postsLimit: Int
     $membersPage: Int
     $membersLimit: Int
+    $discussionsPage: Int
+    $discussionsLimit: Int
   ) {
     group(preferredUsername: $name) {
       ...GroupFullFields
@@ -220,6 +222,8 @@ export const GET_GROUP = gql`
     $postsLimit: Int
     $membersPage: Int
     $membersLimit: Int
+    $discussionsPage: Int
+    $discussionsLimit: Int
   ) {
     getGroup(id: $id) {
       mediaSize

js/src/views/Discussions/DiscussionsList.vue

@@ -49,6 +49,17 @@
           v-for="discussion in group.discussions.elements"
           :key="discussion.id"
         />
+        <b-pagination
+          class="discussion-pagination"
+          :total="group.discussions.total"
+          v-model="page"
+          :per-page="DISCUSSIONS_PER_PAGE"
+          :aria-next-label="$t('Next page')"
+          :aria-previous-label="$t('Previous page')"
+          :aria-page-label="$t('Page')"
+          :aria-current-label="$t('Current page')"
+        >
+        </b-pagination>
       </div>
       <empty-content v-else icon="chat">
         {{ $t("There's no discussions yet") }}
@@ -82,6 +93,10 @@ import {
 } from "@/graphql/actor";
 import { IMember } from "@/types/actor/member.model";
 import EmptyContent from "@/components/Utils/EmptyContent.vue";
+import VueRouter from "vue-router";
+const { isNavigationFailure, NavigationFailureType } = VueRouter;
+
+const DISCUSSIONS_PER_PAGE = 10;
 
 @Component({
   components: { DiscussionListItem, EmptyContent },
@@ -92,6 +107,8 @@ import EmptyContent from "@/components/Utils/EmptyContent.vue";
       variables() {
         return {
           name: this.preferredUsername,
+          discussionsPage: this.page,
+          discussionsLimit: DISCUSSIONS_PER_PAGE,
         };
       },
       skip() {
@@ -154,6 +171,18 @@ export default class DiscussionsList extends Vue {
 
   usernameWithDomain = usernameWithDomain;
 
+  DISCUSSIONS_PER_PAGE = DISCUSSIONS_PER_PAGE;
+
+  get page(): number {
+    return parseInt((this.$route.query.page as string) || "1", 10);
+  }
+
+  set page(page: number) {
+    this.pushRouter(RouteName.DISCUSSION_LIST, {
+      page: page.toString(),
+    });
+  }
+
   get groupMemberships(): (string | undefined)[] {
     if (!this.person || !this.person.id) return [];
     return this.person.memberships.elements
@@ -174,10 +203,30 @@ export default class DiscussionsList extends Vue {
       this.groupMemberships.includes(this.group.id)
     );
   }
+
+  protected async pushRouter(
+    routeName: string,
+    args: Record<string, string>
+  ): Promise<void> {
+    try {
+      await this.$router.push({
+        name: routeName,
+        query: { ...this.$route.query, ...args },
+      });
+    } catch (e) {
+      if (isNavigationFailure(e, NavigationFailureType.redirected)) {
+        throw Error(e.toString());
+      }
+    }
+  }
 }
 </script>
 <style lang="scss">
 div.container.section {
   background: white;
+
+  .discussion-pagination {
+    margin-top: 1rem;
+  }
 }
 </style>

lib/graphql/resolvers/discussion.ex

@@ -14,7 +14,7 @@ defmodule Mobilizon.GraphQL.Resolvers.Discussion do
 
   def find_discussions_for_actor(
         %Actor{id: group_id},
-        _args,
+        %{page: page, limit: limit},
         %{
           context: %{
             current_user: %User{} = user
@@ -24,7 +24,7 @@ defmodule Mobilizon.GraphQL.Resolvers.Discussion do
     with {:actor, %Actor{id: actor_id} = _actor} <- {:actor, Users.get_actor_for_user(user)},
          {:member, true} <- {:member, Actors.is_member?(actor_id, group_id)},
          {:ok, %Actor{type: :Group} = group} <- Actors.get_group_by_actor_id(group_id) do
-      {:ok, Discussions.find_discussions_for_actor(group)}
+      {:ok, Discussions.find_discussions_for_actor(group, page, limit)}
     else
       {:member, false} ->
         {:ok, %Page{total: 0, elements: []}}

lib/graphql/schema/actors/group.ex

@@ -86,6 +86,12 @@ defmodule Mobilizon.GraphQL.Schema.Actors.GroupType do
     end
 
     field :discussions, :paginated_discussion_list do
+      arg(:page, :integer,
+        default_value: 1,
+        description: "The page in the paginated discussion list"
+      )
+
+      arg(:limit, :integer, default_value: 10, description: "The limit of discussions per page")
       resolve(&Discussion.find_discussions_for_actor/3)
       description("A list of the discussions for this group")
     end