msb-public
/
tech-interview-handbook
mirror of https://github.com/yangshun/tech-interview-handbook
2
1
Code Issues Projects Releases Wiki Activity

[question][feat] update question answers,comments optimistically

Browse Source
pull/521/head
Jeff Sieu 3 years ago
parent 9fda043862
commit 3aaeaa8085
5 changed files with 157 additions and 61 deletions
Show Stats Download Patch File Download Diff File

58
apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx
Unescape View File

@ -245,19 +245,18 @@ export default function QuestionPage() {
/>
</div>
</div>
{(commentData?.pages ?? []).flatMap(
({ processedQuestionCommentsData: comments }) =>
comments.map((comment) => (
<QuestionCommentListItem
key={comment.id}
authorImageUrl={comment.userImage}
authorName={comment.user}
content={comment.content}
createdAt={comment.createdAt}
questionCommentId={comment.id}
upvoteCount={comment.numVotes}
/>
)),
{(commentData?.pages ?? []).flatMap(({ data: comments }) =>
comments.map((comment) => (
<QuestionCommentListItem
key={comment.id}
authorImageUrl={comment.userImage}
authorName={comment.user}
content={comment.content}
createdAt={comment.createdAt}
questionCommentId={comment.id}
upvoteCount={comment.numVotes}
/>
)),
)}
<PaginationLoadMoreButton query={commentInfiniteQuery} />
<form
@ -326,23 +325,22 @@ export default function QuestionPage() {
</div>
</div>
{/* TODO: Add button to load more */}
{(answerData?.pages ?? []).flatMap(
({ processedAnswersData: answers }) =>
answers.map((answer) => (
<QuestionAnswerCard
key={answer.id}
answerId={answer.id}
authorImageUrl={answer.userImage}
authorName={answer.user}
commentCount={answer.numComments}
content={answer.content}
createdAt={answer.createdAt}
href={`${router.asPath}/answer/${answer.id}/${createSlug(
answer.content,
)}`}
upvoteCount={answer.numVotes}
/>
)),
{(answerData?.pages ?? []).flatMap(({ data: answers }) =>
answers.map((answer) => (
<QuestionAnswerCard
key={answer.id}
answerId={answer.id}
authorImageUrl={answer.userImage}
authorName={answer.user}
commentCount={answer.numComments}
content={answer.content}
createdAt={answer.createdAt}
href={`${router.asPath}/answer/${answer.id}/${createSlug(
answer.content,
)}`}
upvoteCount={answer.numVotes}
/>
)),
)}
<PaginationLoadMoreButton query={answerInfiniteQuery} />
</div>

5
apps/portal/src/server/router/questions/questions-answer-router.ts
Unescape View File

@ -38,7 +38,6 @@ export const questionsAnswerRouter = createRouter()
},
];
const answersData = await ctx.prisma.questionsAnswer.findMany({
cursor: cursor ? { id: cursor } : undefined,
include: {
@ -104,9 +103,9 @@ export const questionsAnswerRouter = createRouter()
}
return {
data: processedAnswersData,
nextCursor,
processedAnswersData,
}
};
},
})
.query('getAnswerById', {

4
apps/portal/src/server/router/questions/questions-question-comment-router.ts
Unescape View File

@ -97,9 +97,9 @@ export const questionsQuestionCommentRouter = createRouter().query(
}
return {
data: processedQuestionCommentsData,
nextCursor,
processedQuestionCommentsData,
}
};
},
},
);

13
apps/portal/src/server/router/questions/questions-question-comment-user-router.ts
Unescape View File

@ -256,18 +256,15 @@ export const questionsQuestionCommentUserRouter = createProtectedRouter()
}
if (vote.vote === Vote.UPVOTE) {
tx.questionsQuestionCommentVote.delete({
where: {
id: vote.id,
},
});
const createdVote = await tx.questionsQuestionCommentVote.create({
const updatedVote = await tx.questionsQuestionCommentVote.update({
data: {
questionCommentId,
userId,
vote: Vote.DOWNVOTE,
},
where: {
id: vote.id,
},
});
await tx.questionsQuestionComment.update({
@ -281,7 +278,7 @@ export const questionsQuestionCommentUserRouter = createProtectedRouter()
},
});
return createdVote;
return updatedVote;
}
});
},

138
apps/portal/src/utils/questions/useVote.ts
Unescape View File

@ -5,7 +5,7 @@ import { Vote } from '@prisma/client';
import { trpc } from '../trpc';
import type { Question } from '~/types/questions';
import type { Answer, Question, QuestionComment } from '~/types/questions';
type UseVoteOptions = {
setDownVote: () => void;
@ -67,13 +67,11 @@ export const useQuestionVote = (id: string) => {
// 'questions.questions.getQuestionById',
// 'questions.questions.getQuestionsByFilterAndContent',
],
onMutate: async (previousVote, currentVote) => {
onMutate: async (voteValueChange) => {
// Update question list
const questionQueries = utils.queryClient.getQueriesData([
'questions.questions.getQuestionsByFilterAndContent',
]);
const voteValueChange =
getVoteValue(currentVote) - getVoteValue(previousVote);
if (questionQueries !== undefined) {
for (const [key, query] of questionQueries) {
@ -133,12 +131,70 @@ export const useQuestionVote = (id: string) => {
};
export const useAnswerVote = (id: string) => {
const utils = trpc.useContext();
return useVote(id, {
idKey: 'answerId',
invalidateKeys: [
'questions.answers.getAnswerById',
'questions.answers.getAnswers',
// 'questions.answers.getAnswerById',
// 'questions.answers.getAnswers',
],
onMutate: async (voteValueChange) => {
// Update question answer list
const answerQueries = utils.queryClient.getQueriesData([
'questions.answers.getAnswers',
]);
if (answerQueries !== undefined) {
for (const [key, query] of answerQueries) {
if (query === undefined) {
continue;
}
const { pages, ...restQuery } = query as InfiniteData<{
data: Array<Answer>;
}>;
const newQuery = {
pages: pages.map(({ data, ...restPage }) => ({
data: data.map((answer) => {
if (answer.id === id) {
const { numVotes, ...restAnswer } = answer;
return {
numVotes: numVotes + voteValueChange,
...restAnswer,
};
}
return answer;
}),
...restPage,
})),
...restQuery,
};
utils.queryClient.setQueryData(key, newQuery);
}
}
const prevAnswer = utils.queryClient.getQueryData([
'questions.answers.getAnswerById',
{
answerId: id,
},
]) as Answer | undefined;
if (prevAnswer !== undefined) {
const newAnswer = {
...prevAnswer,
numVotes: prevAnswer.numVotes + voteValueChange,
};
utils.queryClient.setQueryData(
['questions.answers.getAnswerById', { answerId: id }],
newAnswer,
);
}
},
query: 'questions.answers.user.getVote',
setDownVoteKey: 'questions.answers.user.setDownVote',
setNoVoteKey: 'questions.answers.user.setNoVote',
@ -147,9 +203,48 @@ export const useAnswerVote = (id: string) => {
};
export const useQuestionCommentVote = (id: string) => {
const utils = trpc.useContext();
return useVote(id, {
idKey: 'questionCommentId',
invalidateKeys: ['questions.questions.comments.getQuestionComments'],
invalidateKeys: [],
onMutate: async (voteValueChange) => {
// Update question comment list
const questionCommentQueries = utils.queryClient.getQueriesData([
'questions.questions.comments.getQuestionComments',
]);
if (questionCommentQueries !== undefined) {
for (const [key, query] of questionCommentQueries) {
if (query === undefined) {
continue;
}
const { pages, ...restQuery } = query as InfiniteData<{
data: Array<QuestionComment>;
}>;
const newQuery = {
pages: pages.map(({ data, ...restPage }) => ({
data: data.map((questionComment) => {
if (questionComment.id === id) {
const { numVotes, ...restQuestionComment } = questionComment;
return {
numVotes: numVotes + voteValueChange,
...restQuestionComment,
};
}
return questionComment;
}),
...restPage,
})),
...restQuery,
};
utils.queryClient.setQueryData(key, newQuery);
}
}
},
query: 'questions.questions.comments.user.getVote',
setDownVoteKey: 'questions.questions.comments.user.setDownVote',
setNoVoteKey: 'questions.questions.comments.user.setNoVote',
@ -168,10 +263,7 @@ export const useAnswerCommentVote = (id: string) => {
});
};
type InvalidateFunction = (
previousVote: Vote | null,
currentVote: Vote | null,
) => Promise<void>;
type InvalidateFunction = (voteValueChange: number) => Promise<void>;
type VoteProps<VoteQueryKey extends QueryKey = QueryKey> = {
idKey: string;
@ -205,7 +297,7 @@ export const useVote = <VoteQueryKey extends QueryKey = QueryKey>(
} = opts;
const utils = trpc.useContext();
const onVoteUpdate = useCallback(() => {
const onVoteUpdateSettled = useCallback(() => {
// TODO: Optimise query invalidation
// utils.invalidateQueries([query, { [idKey]: id } as any]);
for (const invalidateKey of invalidateKeys) {
@ -256,10 +348,14 @@ export const useVote = <VoteQueryKey extends QueryKey = QueryKey>(
currentData as any,
);
await onMutate?.(previousData?.vote ?? null, currentData?.vote ?? null);
const voteValueChange =
getVoteValue(currentData?.vote ?? null) -
getVoteValue(previousData?.vote ?? null);
await onMutate?.(voteValueChange);
return { currentData, previousData };
},
onSettled: onVoteUpdate,
onSettled: onVoteUpdateSettled,
},
);
const { mutate: setDownVote } = trpc.useMutation<any, UseVoteMutationContext>(
@ -291,10 +387,14 @@ export const useVote = <VoteQueryKey extends QueryKey = QueryKey>(
currentData as any,
);
await onMutate?.(previousData?.vote ?? null, currentData?.vote ?? null);
const voteValueChange =
getVoteValue(currentData?.vote ?? null) -
getVoteValue(previousData?.vote ?? null);
await onMutate?.(voteValueChange);
return { currentData, previousData };
},
onSettled: onVoteUpdate,
onSettled: onVoteUpdateSettled,
},
);
@ -323,11 +423,13 @@ export const useVote = <VoteQueryKey extends QueryKey = QueryKey>(
currentData,
);
await onMutate?.(previousData?.vote ?? null, null);
const voteValueChange =
getVoteValue(null) - getVoteValue(previousData?.vote ?? null);
await onMutate?.(voteValueChange);
return { currentData, previousData };
},
onSettled: onVoteUpdate,
onSettled: onVoteUpdateSettled,
},
);

Write Preview
Loading…
Cancel
Save