|
|
|
|
@ -6,13 +6,15 @@ import { Button, Collapsible, Select, TextArea } from '@tih/ui';
|
|
|
|
|
import AnswerCard from '~/components/questions/card/AnswerCard';
|
|
|
|
|
import FullQuestionCard from '~/components/questions/card/FullQuestionCard';
|
|
|
|
|
import CommentListItem from '~/components/questions/CommentListItem';
|
|
|
|
|
import FullScreenSpinner from '~/components/questions/FullScreenSpinner';
|
|
|
|
|
|
|
|
|
|
import {
|
|
|
|
|
SAMPLE_ANSWER,
|
|
|
|
|
SAMPLE_QUESTION,
|
|
|
|
|
SAMPLE_QUESTION_COMMENT,
|
|
|
|
|
} from '~/utils/questions/constants';
|
|
|
|
|
import createSlug from '~/utils/questions/createSlug';
|
|
|
|
|
import { useFormRegister } from '~/utils/questions/useFormRegister';
|
|
|
|
|
import { trpc } from '~/utils/trpc';
|
|
|
|
|
|
|
|
|
|
export type AnswerQuestionData = {
|
|
|
|
|
answerContent: string;
|
|
|
|
|
@ -34,26 +36,70 @@ export default function QuestionPage() {
|
|
|
|
|
const {
|
|
|
|
|
register: comRegister,
|
|
|
|
|
handleSubmit: handleCommentSubmit,
|
|
|
|
|
reset: resetComment,
|
|
|
|
|
formState: { isDirty: isCommentDirty, isValid: isCommentValid },
|
|
|
|
|
} = useForm<QuestionCommentData>({ mode: 'onChange' });
|
|
|
|
|
const commentRegister = useFormRegister(comRegister);
|
|
|
|
|
|
|
|
|
|
const question = SAMPLE_QUESTION;
|
|
|
|
|
const comment = SAMPLE_QUESTION_COMMENT;
|
|
|
|
|
const { questionId } = router.query;
|
|
|
|
|
|
|
|
|
|
const { data: question } = trpc.useQuery([
|
|
|
|
|
'questions.questions.getQuestionById',
|
|
|
|
|
{ id: questionId as string },
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
const utils = trpc.useContext();
|
|
|
|
|
|
|
|
|
|
const { data: comments } = trpc.useQuery([
|
|
|
|
|
'questions.questions.comments.getQuestionComments',
|
|
|
|
|
{ questionId: questionId as string },
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
const { mutate: addComment } = trpc.useMutation(
|
|
|
|
|
'questions.questions.comments.create',
|
|
|
|
|
{
|
|
|
|
|
onSuccess: () => {
|
|
|
|
|
utils.invalidateQueries(
|
|
|
|
|
'questions.questions.comments.getQuestionComments',
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const { data: answers } = trpc.useQuery([
|
|
|
|
|
'questions.answers.getAnswers',
|
|
|
|
|
{ questionId: questionId as string },
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
const { mutate: addAnswer } = trpc.useMutation('questions.answers.create', {
|
|
|
|
|
onSuccess: () => {
|
|
|
|
|
utils.invalidateQueries('questions.answers.getAnswers');
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const handleBackNavigation = () => {
|
|
|
|
|
router.back();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleSubmitAnswer = (data: AnswerQuestionData) => {
|
|
|
|
|
// eslint-disable-next-line no-console
|
|
|
|
|
console.log(data);
|
|
|
|
|
addAnswer({
|
|
|
|
|
content: data.answerContent,
|
|
|
|
|
questionId: questionId as string,
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleSubmitComment = (data: QuestionCommentData) => {
|
|
|
|
|
// eslint-disable-next-line no-console
|
|
|
|
|
console.log(data);
|
|
|
|
|
addComment({
|
|
|
|
|
content: data.commentContent,
|
|
|
|
|
questionId: questionId as string,
|
|
|
|
|
});
|
|
|
|
|
resetComment();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
if (!question) {
|
|
|
|
|
return <FullScreenSpinner />;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className="flex w-full flex-1 items-stretch pb-4">
|
|
|
|
|
<div className="flex items-baseline gap-2 py-4 pl-4">
|
|
|
|
|
@ -67,9 +113,15 @@ export default function QuestionPage() {
|
|
|
|
|
</div>
|
|
|
|
|
<div className="flex w-full justify-center overflow-y-auto py-4 px-5">
|
|
|
|
|
<div className="flex max-w-7xl flex-1 flex-col gap-2">
|
|
|
|
|
<FullQuestionCard {...question} showVoteButtons={true} />
|
|
|
|
|
<FullQuestionCard
|
|
|
|
|
{...question}
|
|
|
|
|
receivedCount={0} // TODO: Change to actual value
|
|
|
|
|
showVoteButtons={true}
|
|
|
|
|
timestamp={question.seenAt.toLocaleDateString()}
|
|
|
|
|
upvoteCount={question.numVotes}
|
|
|
|
|
/>
|
|
|
|
|
<div className="mx-2">
|
|
|
|
|
<Collapsible label={`${question.commentCount} comment(s)`}>
|
|
|
|
|
<Collapsible label={`${question.numComments} comment(s)`}>
|
|
|
|
|
<form
|
|
|
|
|
className="mb-2"
|
|
|
|
|
onSubmit={handleCommentSubmit(handleSubmitComment)}>
|
|
|
|
|
@ -106,7 +158,8 @@ export default function QuestionPage() {
|
|
|
|
|
onChange={(value) => {
|
|
|
|
|
// eslint-disable-next-line no-console
|
|
|
|
|
console.log(value);
|
|
|
|
|
}}></Select>
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<Button
|
|
|
|
|
@ -118,11 +171,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_QUESTION_COMMENT.authorImageUrl}
|
|
|
|
|
authorName={comment.user}
|
|
|
|
|
content={comment.content}
|
|
|
|
|
createdAt={comment.createdAt}
|
|
|
|
|
upvoteCount={0}
|
|
|
|
|
/>
|
|
|
|
|
))}
|
|
|
|
|
</Collapsible>
|
|
|
|
|
@ -140,7 +196,7 @@ export default function QuestionPage() {
|
|
|
|
|
/>
|
|
|
|
|
<div className="mt-3 mb-1 flex justify-between">
|
|
|
|
|
<div className="flex items-baseline justify-start gap-2">
|
|
|
|
|
<p>{question.answerCount} answers</p>
|
|
|
|
|
<p>{question.numAnswers} answers</p>
|
|
|
|
|
<div className="flex items-baseline gap-2">
|
|
|
|
|
<span aria-hidden={true} className="text-sm">
|
|
|
|
|
Sort by:
|
|
|
|
|
@ -163,7 +219,8 @@ export default function QuestionPage() {
|
|
|
|
|
onChange={(value) => {
|
|
|
|
|
// eslint-disable-next-line no-console
|
|
|
|
|
console.log(value);
|
|
|
|
|
}}></Select>
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<Button
|
|
|
|
|
@ -174,13 +231,18 @@ export default function QuestionPage() {
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
|
|
|
|
|
{Array.from({ length: question.answerCount }).map((_, index) => (
|
|
|
|
|
{(answers ?? []).map((answer) => (
|
|
|
|
|
<AnswerCard
|
|
|
|
|
// eslint-disable-next-line react/no-array-index-key
|
|
|
|
|
key={index}
|
|
|
|
|
{...SAMPLE_ANSWER}
|
|
|
|
|
href={`${router.asPath}/answer/1/1`}
|
|
|
|
|
key={answer.id}
|
|
|
|
|
authorImageUrl={SAMPLE_ANSWER.authorImageUrl}
|
|
|
|
|
authorName={answer.user}
|
|
|
|
|
commentCount={answer.numComments}
|
|
|
|
|
content={answer.content}
|
|
|
|
|
createdAt={answer.createdAt}
|
|
|
|
|
href={`${router.asPath}/answer/${answer.id}/${createSlug(
|
|
|
|
|
answer.content,
|
|
|
|
|
)}`}
|
|
|
|
|
upvoteCount={answer.numVotes}
|
|
|
|
|
/>
|
|
|
|
|
))}
|
|
|
|
|
</div>
|
|
|
|
|
|
Jeff Sieu
2 years ago
committed by
GitHub