From 160e5fbdae4e072e915e7bfc208b6ae350a01320 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Fri, 11 Jun 2021 15:08:43 +0200
Subject: [PATCH] Fix discussions pagination

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/components/Comment/CommentTree.vue     |  6 +--
 .../Discussion/DiscussionComment.vue          |  7 +++-
 js/src/mixins/group.ts                        |  4 +-
 js/src/views/Discussions/Discussion.vue       | 40 +++++++++++++------
 4 files changed, 38 insertions(+), 19 deletions(-)

diff --git a/js/src/components/Comment/CommentTree.vue b/js/src/components/Comment/CommentTree.vue
index 70a08c0b..816e4073 100644
--- a/js/src/components/Comment/CommentTree.vue
+++ b/js/src/components/Comment/CommentTree.vue
@@ -107,11 +107,7 @@ import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";
           eventUUID: this.event.uuid,
         };
       },
-      update(data) {
-        return data.event.comments.map(
-          (comment: IComment) => new CommentModel(comment)
-        );
-      },
+      update: (data) => data.event.comments,
       skip() {
         return !this.event.uuid;
       },
diff --git a/js/src/components/Discussion/DiscussionComment.vue b/js/src/components/Discussion/DiscussionComment.vue
index 2cb6bc3b..f4b99040 100644
--- a/js/src/components/Discussion/DiscussionComment.vue
+++ b/js/src/components/Discussion/DiscussionComment.vue
@@ -57,7 +57,12 @@
       <div v-if="!editMode && !comment.deletedAt" class="text-wrapper">
         <div class="description-content" v-html="comment.text"></div>
         <p
-          v-if="comment.insertedAt.getTime() !== comment.updatedAt.getTime()"
+          v-if="
+            comment.insertedAt &&
+            comment.updatedAt &&
+            new Date(comment.insertedAt).getTime() !==
+              new Date(comment.updatedAt).getTime()
+          "
           :title="comment.updatedAt | formatDateTimeString"
         >
           {{
diff --git a/js/src/mixins/group.ts b/js/src/mixins/group.ts
index 26be0c3e..c6e9f602 100644
--- a/js/src/mixins/group.ts
+++ b/js/src/mixins/group.ts
@@ -15,6 +15,8 @@ import {
 import { MemberRole } from "@/types/enums";
 import { Component, Vue } from "vue-property-decorator";
 
+const now = new Date();
+
 @Component({
   apollo: {
     group: {
@@ -24,7 +26,7 @@ import { Component, Vue } from "vue-property-decorator";
         return {
           name: this.$route.params.preferredUsername,
           beforeDateTime: null,
-          afterDateTime: new Date(),
+          afterDateTime: now,
         };
       },
       skip() {
diff --git a/js/src/views/Discussions/Discussion.vue b/js/src/views/Discussions/Discussion.vue
index 12b50656..aa4999b6 100644
--- a/js/src/views/Discussions/Discussion.vue
+++ b/js/src/views/Discussions/Discussion.vue
@@ -127,7 +127,6 @@
 </template>
 <script lang="ts">
 import { Component, Prop } from "vue-property-decorator";
-import { mixins } from "vue-class-component";
 import {
   GET_DISCUSSION,
   REPLY_TO_DISCUSSION,
@@ -135,21 +134,22 @@ import {
   DELETE_DISCUSSION,
   DISCUSSION_COMMENT_CHANGED,
 } from "@/graphql/discussion";
-import { IDiscussion, Discussion } from "@/types/discussions";
+import { IDiscussion } from "@/types/discussions";
+import { Discussion as DiscussionModel } from "@/types/discussions";
 import { usernameWithDomain } from "@/types/actor";
 import DiscussionComment from "@/components/Discussion/DiscussionComment.vue";
 import { GraphQLError } from "graphql";
 import { DELETE_COMMENT, UPDATE_COMMENT } from "@/graphql/comment";
-import GroupMixin from "@/mixins/group";
 import RouteName from "../../router/name";
 import { IComment } from "../../types/comment.model";
-import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";
+import { ApolloCache, FetchResult } from "@apollo/client/core";
+import { mixins } from "vue-class-component";
+import GroupMixin from "@/mixins/group";
 
 @Component({
   apollo: {
     discussion: {
       query: GET_DISCUSSION,
-      fetchPolicy: "cache-and-network",
       variables() {
         return {
           slug: this.slug,
@@ -163,12 +163,11 @@ import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";
       error({ graphQLErrors }) {
         this.handleErrors(graphQLErrors);
       },
-      update: (data) => new Discussion(data.discussion),
       subscribeToMore: {
         document: DISCUSSION_COMMENT_CHANGED,
         variables() {
           return {
-            slug: this.slug,
+            slug: this.$route.params.slug,
             page: this.page,
             limit: this.COMMENTS_PER_PAGE,
           };
@@ -180,10 +179,10 @@ import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";
           const previousDiscussion = previousResult.discussion;
           const lastComment =
             subscriptionData.data.discussionCommentChanged.lastComment;
-          const canLoadMore = !previousDiscussion.comments.elements.find(
+          this.hasMoreComments = !previousDiscussion.comments.elements.some(
             (comment: IComment) => comment.id === lastComment.id
           );
-          if (canLoadMore) {
+          if (this.hasMoreComments) {
             return {
               discussion: {
                 ...previousDiscussion,
@@ -219,10 +218,10 @@ import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";
     };
   },
 })
-export default class discussion extends mixins(GroupMixin) {
+export default class Discussion extends mixins(GroupMixin) {
   @Prop({ type: String, required: true }) slug!: string;
 
-  discussion: IDiscussion = new Discussion();
+  discussion: IDiscussion = new DiscussionModel();
 
   newComment = "";
 
@@ -349,7 +348,7 @@ export default class discussion extends mixins(GroupMixin) {
 
   async loadMoreComments(): Promise<void> {
     if (!this.hasMoreComments) return;
-    this.page += 1;
+    this.page++;
     try {
       await this.$apollo.queries.discussion.fetchMore({
         // New variables
@@ -358,7 +357,24 @@ export default class discussion extends mixins(GroupMixin) {
           page: this.page,
           limit: this.COMMENTS_PER_PAGE,
         },
+        updateQuery: (previousResult, { fetchMoreResult }) => {
+          return {
+            discussion: {
+              ...previousResult.discussion,
+              comments: {
+                ...fetchMoreResult.discussion.comments,
+                elements: [
+                  ...previousResult.discussion.comments.elements,
+                  ...fetchMoreResult.discussion.comments.elements,
+                ],
+              },
+            },
+          };
+        },
       });
+      this.hasMoreComments = !this.discussion.comments.elements
+        .map(({ id }) => id)
+        .includes(this.discussion?.lastComment?.id);
     } catch (e) {
       console.error(e);
     }