Fix discussions pagination

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2021-06-11 15:08:43 +02:00
parent fa8a958597
commit 160e5fbdae
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
4 changed files with 38 additions and 19 deletions

View file

@ -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;
},

View file

@ -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"
>
{{

View file

@ -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() {

View file

@ -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);
}