[questions][feat] view, post answer comments

pull/347/head
Jeff Sieu 3 years ago
parent 6787ed117b
commit ccc8eed1d6

@ -9,7 +9,6 @@ import CommentListItem from '~/components/questions/CommentListItem';
import {
SAMPLE_ANSWER,
SAMPLE_ANSWER_COMMENT,
SAMPLE_QUESTION,
} from '~/utils/questions/constants';
import { useFormRegister } from '~/utils/questions/useFormRegister';
import { trpc } from '~/utils/trpc';
@ -23,28 +22,48 @@ export default function QuestionPage() {
const {
register: comRegister,
reset: resetComment,
handleSubmit: handleCommentSubmit,
formState: { isDirty: isCommentDirty, isValid: isCommentValid },
} = useForm<AnswerCommentData>({ mode: 'onChange' });
const commentRegister = useFormRegister(comRegister);
const question = SAMPLE_QUESTION;
const comment = SAMPLE_ANSWER_COMMENT;
const { answerId } = router.query;
const utils = trpc.useContext();
const { data: answer } = trpc.useQuery([
'questions.answers.getAnswerById',
{ answerId: answerId as string },
]);
const { data: comments } = trpc.useQuery([
'questions.answers.comments.getAnswerComments',
{ answerId: answerId as string },
]);
const { mutate: addComment } = trpc.useMutation(
'questions.answers.comments.create',
{
onSuccess: () => {
utils.invalidateQuery([
'questions.answers.comments.getAnswerComments',
{ answerId: answerId as string },
]);
},
},
);
const handleBackNavigation = () => {
router.back();
};
const handleSubmitComment = (data: AnswerCommentData) => {
// eslint-disable-next-line no-console
console.log(data);
resetComment();
addComment({
answerId: answerId as string,
content: data.commentContent,
});
};
if (!answer) {
@ -109,7 +128,8 @@ export default function QuestionPage() {
onChange={(value) => {
// eslint-disable-next-line no-console
console.log(value);
}}></Select>
}}
/>
</div>
<Button
@ -121,11 +141,14 @@ export default function QuestionPage() {
</div>
</form>
{Array.from({ length: question.commentCount }).map((_, index) => (
{(comments ?? []).map((comment) => (
<CommentListItem
// eslint-disable-next-line react/no-array-index-key
key={index}
{...comment}
key={comment.id}
authorImageUrl={SAMPLE_ANSWER_COMMENT.authorImageUrl}
authorName={comment.user}
content={comment.content}
createdAt={comment.createdAt}
upvoteCount={comment.numVotes}
/>
))}
</div>

@ -81,8 +81,6 @@ export default function QuestionPage() {
};
const handleSubmitAnswer = (data: AnswerQuestionData) => {
// eslint-disable-next-line no-console
console.log(data);
addAnswer({
content: data.answerContent,
questionId: questionId as string,
@ -98,7 +96,11 @@ export default function QuestionPage() {
};
if (!question) {
return <Spinner size="lg" />;
return (
<div className="flex h-full w-full items-center justify-center">
<Spinner size="lg" />
</div>
);
}
return (
@ -159,7 +161,8 @@ export default function QuestionPage() {
onChange={(value) => {
// eslint-disable-next-line no-console
console.log(value);
}}></Select>
}}
/>
</div>
<Button
@ -219,7 +222,8 @@ export default function QuestionPage() {
onChange={(value) => {
// eslint-disable-next-line no-console
console.log(value);
}}></Select>
}}
/>
</div>
</div>
<Button
@ -235,13 +239,13 @@ export default function QuestionPage() {
key={answer.id}
authorImageUrl={SAMPLE_ANSWER.authorImageUrl}
authorName={answer.user}
commentCount={0}
commentCount={answer.numComments}
content={answer.content}
createdAt={answer.createdAt}
href={`${router.asPath}/answer/${answer.id}/${createSlug(
answer.content,
)}`}
upvoteCount={0}
upvoteCount={answer.numVotes}
/>
))}
</div>

@ -12,57 +12,52 @@ export const questionsAnswerCommentRouter = createProtectedRouter()
answerId: z.string(),
}),
async resolve({ ctx, input }) {
const questionAnswerCommentsData = await ctx.prisma.questionsAnswerComment.findMany({
include: {
user: {
select: {
name: true,
const questionAnswerCommentsData =
await ctx.prisma.questionsAnswerComment.findMany({
include: {
user: {
select: {
name: true,
},
},
votes: true,
},
},
votes: true,
},
orderBy: {
createdAt: 'desc',
},
where: {
...input,
},
});
return 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
orderBy: {
createdAt: 'desc',
},
where: {
...input,
},
});
return 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,
);
let userName = "";
if (data.user) {
userName = data.user.name!;
}
const answerComment: AnswerComment = {
content: data.content,
id: data.id,
numVotes: votes,
updatedAt: data.updatedAt,
user: userName,
};
return answerComment;
});
}
const answerComment: AnswerComment = {
content: data.content,
createdAt: data.createdAt,
id: data.id,
numVotes: votes,
updatedAt: data.updatedAt,
user: data.user?.name ?? '',
};
return answerComment;
});
},
})
.mutation('create', {
input: z.object({
@ -88,11 +83,12 @@ export const questionsAnswerCommentRouter = createProtectedRouter()
async resolve({ ctx, input }) {
const userId = ctx.session?.user?.id;
const answerCommentToUpdate = await ctx.prisma.questionsAnswerComment.findUnique({
where: {
id: input.id,
},
});
const answerCommentToUpdate =
await ctx.prisma.questionsAnswerComment.findUnique({
where: {
id: input.id,
},
});
if (answerCommentToUpdate?.id !== userId) {
throw new TRPCError({
@ -118,11 +114,12 @@ export const questionsAnswerCommentRouter = createProtectedRouter()
async resolve({ ctx, input }) {
const userId = ctx.session?.user?.id;
const answerCommentToDelete = await ctx.prisma.questionsAnswerComment.findUnique({
where: {
id: input.id,
},
});
const answerCommentToDelete =
await ctx.prisma.questionsAnswerComment.findUnique({
where: {
id: input.id,
},
});
if (answerCommentToDelete?.id !== userId) {
throw new TRPCError({
@ -144,11 +141,11 @@ export const questionsAnswerCommentRouter = createProtectedRouter()
}),
async resolve({ ctx, input }) {
const userId = ctx.session?.user?.id;
const {answerCommentId} = input
const { answerCommentId } = input;
return await ctx.prisma.questionsAnswerCommentVote.findUnique({
where: {
answerCommentId_userId : {answerCommentId,userId },
answerCommentId_userId: { answerCommentId, userId },
},
});
},
@ -176,13 +173,14 @@ export const questionsAnswerCommentRouter = createProtectedRouter()
}),
async resolve({ ctx, input }) {
const userId = ctx.session?.user?.id;
const {id, vote} = input
const { id, vote } = input;
const voteToUpdate = await ctx.prisma.questionsAnswerCommentVote.findUnique({
where: {
id: input.id,
},
});
const voteToUpdate =
await ctx.prisma.questionsAnswerCommentVote.findUnique({
where: {
id: input.id,
},
});
if (voteToUpdate?.id !== userId) {
throw new TRPCError({
@ -208,10 +206,12 @@ export const questionsAnswerCommentRouter = createProtectedRouter()
async resolve({ ctx, input }) {
const userId = ctx.session?.user?.id;
const voteToDelete = await ctx.prisma.questionsAnswerCommentVote.findUnique({
where: {
id: input.id,
},});
const voteToDelete =
await ctx.prisma.questionsAnswerCommentVote.findUnique({
where: {
id: input.id,
},
});
if (voteToDelete?.id !== userId) {
throw new TRPCError({
@ -226,4 +226,4 @@ export const questionsAnswerCommentRouter = createProtectedRouter()
},
});
},
});
});

@ -15,8 +15,11 @@ export type Question = {
export type AnswerComment = {
content: string;
createdAt: Date;
id: string;
numVotes: number;
updatedAt: Date;
user: string;
};
export type Answer = {

Loading…
Cancel
Save