diff --git a/apps/portal/src/pages/questions/[questionId]/[questionSlug]/answer/[answerId]/[answerSlug]/index.tsx b/apps/portal/src/pages/questions/[questionId]/[questionSlug]/answer/[answerId]/[answerSlug]/index.tsx index d57cd6f3..410f03dc 100644 --- a/apps/portal/src/pages/questions/[questionId]/[questionSlug]/answer/[answerId]/[answerSlug]/index.tsx +++ b/apps/portal/src/pages/questions/[questionId]/[questionSlug]/answer/[answerId]/[answerSlug]/index.tsx @@ -158,19 +158,18 @@ export default function QuestionPage() { {/* TODO: Allow to load more pages */} - {(answerCommentsData?.pages ?? []).flatMap( - ({ processedQuestionAnswerCommentsData: comments }) => - comments.map((comment) => ( - - )), + {(answerCommentsData?.pages ?? []).flatMap(({ data: comments }) => + comments.map((comment) => ( + + )), )} diff --git a/apps/portal/src/server/router/questions/questions-answer-comment-router.ts b/apps/portal/src/server/router/questions/questions-answer-comment-router.ts index 40eb6595..f027ac78 100644 --- a/apps/portal/src/server/router/questions/questions-answer-comment-router.ts +++ b/apps/portal/src/server/router/questions/questions-answer-comment-router.ts @@ -56,35 +56,36 @@ export const questionsAnswerCommentRouter = createRouter().query( answerId, }, }); - const processedQuestionAnswerCommentsData = questionAnswerCommentsData.map((data) => { - const votes: number = data.votes.reduce( - (previousValue: number, currentValue) => { - let result: number = previousValue; + const processedQuestionAnswerCommentsData = + questionAnswerCommentsData.map((data) => { + const votes: number = data.votes.reduce( + (previousValue: number, currentValue) => { + let result: number = previousValue; - switch (currentValue.vote) { - case Vote.UPVOTE: - result += 1; - break; - case Vote.DOWNVOTE: - result -= 1; - break; - } - return result; - }, - 0, - ); + switch (currentValue.vote) { + case Vote.UPVOTE: + result += 1; + break; + case Vote.DOWNVOTE: + result -= 1; + break; + } + return result; + }, + 0, + ); - const answerComment: AnswerComment = { - content: data.content, - createdAt: data.createdAt, - id: data.id, - numVotes: votes, - updatedAt: data.updatedAt, - user: data.user?.name ?? '', - userImage: data.user?.image ?? '', - }; - return answerComment; - }); + const answerComment: AnswerComment = { + content: data.content, + createdAt: data.createdAt, + id: data.id, + numVotes: votes, + updatedAt: data.updatedAt, + user: data.user?.name ?? '', + userImage: data.user?.image ?? '', + }; + return answerComment; + }); let nextCursor: typeof cursor | undefined = undefined; @@ -98,9 +99,9 @@ export const questionsAnswerCommentRouter = createRouter().query( } return { + data: processedQuestionAnswerCommentsData, nextCursor, - processedQuestionAnswerCommentsData, - } + }; }, }, ); diff --git a/apps/portal/src/utils/questions/useVote.ts b/apps/portal/src/utils/questions/useVote.ts index b64bd79c..cb3b0f22 100644 --- a/apps/portal/src/utils/questions/useVote.ts +++ b/apps/portal/src/utils/questions/useVote.ts @@ -5,7 +5,12 @@ import { Vote } from '@prisma/client'; import { trpc } from '../trpc'; -import type { Answer, Question, QuestionComment } from '~/types/questions'; +import type { + Answer, + AnswerComment, + Question, + QuestionComment, +} from '~/types/questions'; type UseVoteOptions = { setDownVote: () => void; @@ -253,9 +258,48 @@ export const useQuestionCommentVote = (id: string) => { }; export const useAnswerCommentVote = (id: string) => { + const utils = trpc.useContext(); + return useVote(id, { idKey: 'answerCommentId', - invalidateKeys: ['questions.answers.comments.getAnswerComments'], + invalidateKeys: [], + onMutate: async (voteValueChange) => { + // Update answer comment list + const answerCommentQueries = utils.queryClient.getQueriesData([ + 'questions.answers.comments.getAnswerComments', + ]); + + if (answerCommentQueries !== undefined) { + for (const [key, query] of answerCommentQueries) { + if (query === undefined) { + continue; + } + + const { pages, ...restQuery } = query as InfiniteData<{ + data: Array; + }>; + + const newQuery = { + pages: pages.map(({ data, ...restPage }) => ({ + data: data.map((answerComment) => { + if (answerComment.id === id) { + const { numVotes, ...restAnswerComment } = answerComment; + return { + numVotes: numVotes + voteValueChange, + ...restAnswerComment, + }; + } + return answerComment; + }), + ...restPage, + })), + ...restQuery, + }; + + utils.queryClient.setQueryData(key, newQuery); + } + } + }, query: 'questions.answers.comments.user.getVote', setDownVoteKey: 'questions.answers.comments.user.setDownVote', setNoVoteKey: 'questions.answers.comments.user.setNoVote',