From 50d33865923a7c031331d6beff4bc7f540635c56 Mon Sep 17 00:00:00 2001 From: Jeff Sieu Date: Mon, 10 Oct 2022 22:23:58 +0800 Subject: [PATCH] [question][ui] integrate backend voting (#355) Co-authored-by: wlren --- ...ListItem.tsx => AnswerCommentListItem.tsx} | 23 +- .../questions/ContributeQuestionCard.tsx | 2 +- .../questions/ContributeQuestionDialog.tsx | 4 +- .../questions/ContributeQuestionForm.tsx | 79 ++++-- .../questions/QuestionSearchBar.tsx | 45 ++-- .../questions/QuestionTypeBadge.tsx | 17 ++ .../components/questions/VotingButtons.tsx | 36 ++- .../components/questions/card/AnswerCard.tsx | 49 ++-- .../questions/card/FullAnswerCard.tsx | 43 +--- .../questions/card/FullQuestionCard.tsx | 74 ++---- .../questions/card/QuestionAnswerCard.tsx | 15 ++ .../questions/card/QuestionCard.tsx | 34 ++- .../questions/filter/FilterSection.tsx | 33 ++- .../questions/ui-patch/Checkbox.tsx | 25 -- .../questions/ui-patch/RadioGroup.tsx | 36 --- .../answer/[answerId]/[answerSlug]/index.tsx | 18 +- .../[questionId]/[questionSlug]/index.tsx | 33 +-- apps/portal/src/pages/questions/index.tsx | 233 +++++++++++------- .../router/questions-answer-comment-router.ts | 6 +- .../server/router/questions-answer-router.ts | 8 +- .../questions-question-comment-router.ts | 6 +- .../router/questions-question-router.ts | 4 +- apps/portal/src/types/questions.d.ts | 3 + .../src/utils/questions/useSearchFilter.ts | 20 +- apps/portal/src/utils/questions/useVote.ts | 175 +++++++++++++ 25 files changed, 639 insertions(+), 382 deletions(-) rename apps/portal/src/components/questions/{CommentListItem.tsx => AnswerCommentListItem.tsx} (58%) create mode 100644 apps/portal/src/components/questions/QuestionTypeBadge.tsx create mode 100644 apps/portal/src/components/questions/card/QuestionAnswerCard.tsx delete mode 100644 apps/portal/src/components/questions/ui-patch/Checkbox.tsx delete mode 100644 apps/portal/src/components/questions/ui-patch/RadioGroup.tsx create mode 100644 apps/portal/src/utils/questions/useVote.ts diff --git a/apps/portal/src/components/questions/CommentListItem.tsx b/apps/portal/src/components/questions/AnswerCommentListItem.tsx similarity index 58% rename from apps/portal/src/components/questions/CommentListItem.tsx rename to apps/portal/src/components/questions/AnswerCommentListItem.tsx index 1cf87d50..c65a379f 100644 --- a/apps/portal/src/components/questions/CommentListItem.tsx +++ b/apps/portal/src/components/questions/AnswerCommentListItem.tsx @@ -1,8 +1,11 @@ import { format } from 'date-fns'; +import { useAnswerCommentVote } from '~/utils/questions/useVote'; + import VotingButtons from './VotingButtons'; -export type CommentListItemProps = { +export type AnswerCommentListItemProps = { + answerCommentId: string; authorImageUrl: string; authorName: string; content: string; @@ -10,16 +13,26 @@ export type CommentListItemProps = { upvoteCount: number; }; -export default function CommentListItem({ +export default function AnswerCommentListItem({ authorImageUrl, authorName, content, createdAt, upvoteCount, -}: CommentListItemProps) { + answerCommentId, +}: AnswerCommentListItemProps) { + const { handleDownvote, handleUpvote, vote } = + useAnswerCommentVote(answerCommentId); + return (
- +

{authorName}

- Posted on: {format(createdAt, 'Pp')} + Posted on: {format(createdAt, 'h:mm a, MMMM dd, yyyy')}

{content}

diff --git a/apps/portal/src/components/questions/ContributeQuestionCard.tsx b/apps/portal/src/components/questions/ContributeQuestionCard.tsx index fa11f098..73faba27 100644 --- a/apps/portal/src/components/questions/ContributeQuestionCard.tsx +++ b/apps/portal/src/components/questions/ContributeQuestionCard.tsx @@ -40,7 +40,7 @@ export default function ContributeQuestionCard({ placeholder="Contribute a question" onChange={handleOpenContribute} /> -
+
-
+
-
+
diff --git a/apps/portal/src/components/questions/ContributeQuestionForm.tsx b/apps/portal/src/components/questions/ContributeQuestionForm.tsx index 367f0d88..5e230d73 100644 --- a/apps/portal/src/components/questions/ContributeQuestionForm.tsx +++ b/apps/portal/src/components/questions/ContributeQuestionForm.tsx @@ -1,12 +1,16 @@ +import { startOfMonth } from 'date-fns'; import { useState } from 'react'; -import { useForm } from 'react-hook-form'; -import { - BuildingOffice2Icon, - CalendarDaysIcon, - UserIcon, -} from '@heroicons/react/24/outline'; +import { Controller, useForm } from 'react-hook-form'; +import { CalendarDaysIcon, UserIcon } from '@heroicons/react/24/outline'; import type { QuestionsQuestionType } from '@prisma/client'; -import { Button, Collapsible, Select, TextArea, TextInput } from '@tih/ui'; +import { + Button, + CheckboxInput, + Collapsible, + Select, + TextArea, + TextInput, +} from '@tih/ui'; import { QUESTION_TYPES } from '~/utils/questions/constants'; import { @@ -14,7 +18,9 @@ import { useSelectRegister, } from '~/utils/questions/useFormRegister'; -import Checkbox from './ui-patch/Checkbox'; +import CompaniesTypeahead from '../shared/CompaniesTypeahead'; +import type { Month } from '../shared/MonthYearPicker'; +import MonthYearPicker from '../shared/MonthYearPicker'; export type ContributeQuestionData = { company: string; @@ -35,8 +41,15 @@ export default function ContributeQuestionForm({ onSubmit, onDiscard, }: ContributeQuestionFormProps) { - const { register: formRegister, handleSubmit } = - useForm(); + const { + control, + register: formRegister, + handleSubmit, + } = useForm({ + defaultValues: { + date: startOfMonth(new Date()), + }, + }); const register = useFormRegister(formRegister); const selectRegister = useSelectRegister(formRegister); @@ -66,24 +79,35 @@ export default function ContributeQuestionForm({ />
- ( + { + // TODO: To change from using company name to company id (i.e., value) + field.onChange(label); + }} + /> + )} />
- ( + + field.onChange(startOfMonth(new Date(year, month - 1))) + } + /> + )} />
@@ -130,10 +154,11 @@ export default function ContributeQuestionForm({
*/}
- + value={canSubmit} + onChange={handleCheckSimilarQuestions} + />