fix(front): fix discussion comment changed subscription done before having slug value

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2024-02-29 09:57:22 +01:00
parent a9b977540b
commit 067029705d
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773

View file

@ -179,6 +179,7 @@ import { MemberRole } from "@/types/enums";
import { PERSON_MEMBERSHIPS } from "@/graphql/actor";
import { Dialog } from "@/plugins/dialog";
import { useI18n } from "vue-i18n";
import { watch } from "vue";
const props = defineProps<{ slug: string }>();
@ -187,6 +188,8 @@ const COMMENTS_PER_PAGE = 10;
const { currentActor } = useCurrentActorClient();
const slug = computed(() => props.slug);
const {
result: discussionResult,
onError: onDiscussionError,
@ -196,52 +199,55 @@ const {
} = useQuery<{ discussion: IDiscussion }>(
GET_DISCUSSION,
() => ({
slug: props.slug,
slug: slug.value,
page: page.value,
limit: COMMENTS_PER_PAGE,
}),
() => ({
enabled: props.slug !== undefined,
enabled: slug.value !== undefined,
})
);
subscribeToMore({
document: DISCUSSION_COMMENT_CHANGED,
variables: () => ({
slug: props.slug,
page: page.value,
limit: COMMENTS_PER_PAGE,
}),
updateQuery(
previousResult: any,
{ subscriptionData }: { subscriptionData: any }
) {
const previousDiscussion = previousResult.discussion;
const lastComment =
subscriptionData.data.discussionCommentChanged.lastComment;
hasMoreComments.value = !previousDiscussion.comments.elements.some(
(comment: IComment) => comment.id === lastComment.id
);
if (hasMoreComments.value) {
return {
discussion: {
...previousDiscussion,
lastComment: lastComment,
comments: {
elements: [
...previousDiscussion.comments.elements.filter(
({ id }: { id: string }) => id !== lastComment.id
),
lastComment,
],
total: previousDiscussion.comments.total + 1,
watch(slug, (newSlug: string | undefined | null) => {
if (!newSlug) return;
subscribeToMore({
document: DISCUSSION_COMMENT_CHANGED,
variables: () => ({
slug: slug.value,
page: page.value,
limit: COMMENTS_PER_PAGE,
}),
updateQuery(
previousResult: any,
{ subscriptionData }: { subscriptionData: any }
) {
const previousDiscussion = previousResult.discussion;
const lastComment =
subscriptionData.data.discussionCommentChanged.lastComment;
hasMoreComments.value = !previousDiscussion.comments.elements.some(
(comment: IComment) => comment.id === lastComment.id
);
if (hasMoreComments.value) {
return {
discussion: {
...previousDiscussion,
lastComment: lastComment,
comments: {
elements: [
...previousDiscussion.comments.elements.filter(
({ id }: { id: string }) => id !== lastComment.id
),
lastComment,
],
total: previousDiscussion.comments.total + 1,
},
},
},
};
}
};
}
return previousDiscussion;
},
return previousDiscussion;
},
});
});
const discussion = computed(() => discussionResult.value?.discussion);
@ -271,7 +277,7 @@ const { mutate: replyToDiscussionMutation } = useMutation<{
}>({
query: GET_DISCUSSION,
variables: {
slug: props.slug,
slug: slug.value,
page: page.value,
},
});
@ -280,7 +286,7 @@ const { mutate: replyToDiscussionMutation } = useMutation<{
store.writeQuery({
query: GET_DISCUSSION,
variables: { slug: props.slug, page: page.value },
variables: { slug: slug.value, page: page.value },
data: {
discussion: {
...discussionCached,
@ -323,7 +329,7 @@ const { mutate: updateComment } = useMutation<
}>({
query: GET_DISCUSSION,
variables: {
slug: props.slug,
slug: slug.value,
page: page.value,
},
});
@ -338,7 +344,7 @@ const { mutate: updateComment } = useMutation<
}
store.writeQuery({
query: GET_DISCUSSION,
variables: { slug: props.slug, page: page.value },
variables: { slug: slug.value, page: page.value },
data: { discussion: discussionCached },
});
},
@ -378,7 +384,7 @@ const loadMoreComments = async (): Promise<void> => {
await fetchMore({
// New variables
variables: {
slug: props.slug,
slug: slug.value,
page: page.value,
limit: COMMENTS_PER_PAGE,
},