potsda.mn/mobilizon
10
4
Fork 1
Code Issues 22 Pull requests 1 Projects Releases Wiki Activity

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

Browse source 
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
1 changed files with 48 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

90
src/views/Discussions/DiscussionView.vue
View file

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