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',