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, eventUUID: this.event.uuid,
}; };
}, },
update(data) { update: (data) => data.event.comments,
return data.event.comments.map(
(comment: IComment) => new CommentModel(comment)
);
},
skip() { skip() {
return !this.event.uuid; return !this.event.uuid;
}, },

View file

@ -57,7 +57,12 @@
<div v-if="!editMode && !comment.deletedAt" class="text-wrapper"> <div v-if="!editMode && !comment.deletedAt" class="text-wrapper">
<div class="description-content" v-html="comment.text"></div> <div class="description-content" v-html="comment.text"></div>
<p <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" :title="comment.updatedAt | formatDateTimeString"
> >
{{ {{

View file

@ -15,6 +15,8 @@ import {
import { MemberRole } from "@/types/enums"; import { MemberRole } from "@/types/enums";
import { Component, Vue } from "vue-property-decorator"; import { Component, Vue } from "vue-property-decorator";
const now = new Date();
@Component({ @Component({
apollo: { apollo: {
group: { group: {
@ -24,7 +26,7 @@ import { Component, Vue } from "vue-property-decorator";
return { return {
name: this.$route.params.preferredUsername, name: this.$route.params.preferredUsername,
beforeDateTime: null, beforeDateTime: null,
afterDateTime: new Date(), afterDateTime: now,
}; };
}, },
skip() { skip() {

View file

@ -127,7 +127,6 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop } from "vue-property-decorator"; import { Component, Prop } from "vue-property-decorator";
import { mixins } from "vue-class-component";
import { import {
GET_DISCUSSION, GET_DISCUSSION,
REPLY_TO_DISCUSSION, REPLY_TO_DISCUSSION,
@ -135,21 +134,22 @@ import {
DELETE_DISCUSSION, DELETE_DISCUSSION,
DISCUSSION_COMMENT_CHANGED, DISCUSSION_COMMENT_CHANGED,
} from "@/graphql/discussion"; } 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 { usernameWithDomain } from "@/types/actor";
import DiscussionComment from "@/components/Discussion/DiscussionComment.vue"; import DiscussionComment from "@/components/Discussion/DiscussionComment.vue";
import { GraphQLError } from "graphql"; import { GraphQLError } from "graphql";
import { DELETE_COMMENT, UPDATE_COMMENT } from "@/graphql/comment"; import { DELETE_COMMENT, UPDATE_COMMENT } from "@/graphql/comment";
import GroupMixin from "@/mixins/group";
import RouteName from "../../router/name"; import RouteName from "../../router/name";
import { IComment } from "../../types/comment.model"; 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({ @Component({
apollo: { apollo: {
discussion: { discussion: {
query: GET_DISCUSSION, query: GET_DISCUSSION,
fetchPolicy: "cache-and-network",
variables() { variables() {
return { return {
slug: this.slug, slug: this.slug,
@ -163,12 +163,11 @@ import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";
error({ graphQLErrors }) { error({ graphQLErrors }) {
this.handleErrors(graphQLErrors); this.handleErrors(graphQLErrors);
}, },
update: (data) => new Discussion(data.discussion),
subscribeToMore: { subscribeToMore: {
document: DISCUSSION_COMMENT_CHANGED, document: DISCUSSION_COMMENT_CHANGED,
variables() { variables() {
return { return {
slug: this.slug, slug: this.$route.params.slug,
page: this.page, page: this.page,
limit: this.COMMENTS_PER_PAGE, limit: this.COMMENTS_PER_PAGE,
}; };
@ -180,10 +179,10 @@ import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";
const previousDiscussion = previousResult.discussion; const previousDiscussion = previousResult.discussion;
const lastComment = const lastComment =
subscriptionData.data.discussionCommentChanged.lastComment; subscriptionData.data.discussionCommentChanged.lastComment;
const canLoadMore = !previousDiscussion.comments.elements.find( this.hasMoreComments = !previousDiscussion.comments.elements.some(
(comment: IComment) => comment.id === lastComment.id (comment: IComment) => comment.id === lastComment.id
); );
if (canLoadMore) { if (this.hasMoreComments) {
return { return {
discussion: { discussion: {
...previousDiscussion, ...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; @Prop({ type: String, required: true }) slug!: string;
discussion: IDiscussion = new Discussion(); discussion: IDiscussion = new DiscussionModel();
newComment = ""; newComment = "";
@ -349,7 +348,7 @@ export default class discussion extends mixins(GroupMixin) {
async loadMoreComments(): Promise<void> { async loadMoreComments(): Promise<void> {
if (!this.hasMoreComments) return; if (!this.hasMoreComments) return;
this.page += 1; this.page++;
try { try {
await this.$apollo.queries.discussion.fetchMore({ await this.$apollo.queries.discussion.fetchMore({
// New variables // New variables
@ -358,7 +357,24 @@ export default class discussion extends mixins(GroupMixin) {
page: this.page, page: this.page,
limit: this.COMMENTS_PER_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) { } catch (e) {
console.error(e); console.error(e);
} }