[questions][fix] fix upvotes

apps/portal/src/components/questions/comments/AnswerCommentListItem.tsx

@@ -0,0 +1,28 @@
+import { useAnswerCommentVote } from '~/utils/questions/useVote';
+
+import type { CommentListItemProps } from './CommentListItem';
+import CommentListItem from './CommentListItem';
+
+export type AnswerCommentListItemProps = Omit<
+  CommentListItemProps,
+  'onDownvote' | 'onUpvote' | 'vote'
+> & {
+  answerCommentId: string;
+};
+
+export default function AnswerCommentListItem({
+  answerCommentId,
+  ...restProps
+}: AnswerCommentListItemProps) {
+  const { handleDownvote, handleUpvote, vote } =
+    useAnswerCommentVote(answerCommentId);
+
+  return (
+    <CommentListItem
+      vote={vote}
+      onDownvote={handleDownvote}
+      onUpvote={handleUpvote}
+      {...restProps}
+    />
+  );
+}

apps/portal/src/components/questions/comments/CommentListItem.tsx

@@ -1,37 +1,37 @@
 import { format } from 'date-fns';
 
-import { useAnswerCommentVote } from '~/utils/questions/useVote';
+import type { BackendVote } from '../VotingButtons';
+import VotingButtons from '../VotingButtons';
 
-import VotingButtons from './VotingButtons';
-
-export type AnswerCommentListItemProps = {
-  answerCommentId: string;
+export type CommentListItemProps = {
   authorImageUrl: string;
   authorName: string;
   content: string;
   createdAt: Date;
+  onDownvote: () => void;
+  onUpvote: () => void;
   upvoteCount: number;
+  vote: BackendVote;
 };
 
-export default function AnswerCommentListItem({
+export default function CommentListItem({
   authorImageUrl,
   authorName,
   content,
   createdAt,
   upvoteCount,
-  answerCommentId,
-}: AnswerCommentListItemProps) {
-  const { handleDownvote, handleUpvote, vote } =
-    useAnswerCommentVote(answerCommentId);
-
+  vote,
+  onDownvote,
+  onUpvote,
+}: CommentListItemProps) {
   return (
     <div className="flex gap-4 rounded-md border bg-white p-2">
       <VotingButtons
         size="sm"
         upvoteCount={upvoteCount}
         vote={vote}
-        onDownvote={handleDownvote}
-        onUpvote={handleUpvote}
+        onDownvote={onDownvote}
+        onUpvote={onUpvote}
       />
       <div className="mt-1 flex flex-col gap-1">
         <div className="flex items-center gap-2">

apps/portal/src/components/questions/comments/QuestionCommentListItem.tsx

@@ -0,0 +1,28 @@
+import { useQuestionCommentVote } from '~/utils/questions/useVote';
+
+import type { CommentListItemProps } from './CommentListItem';
+import CommentListItem from './CommentListItem';
+
+export type QuestionCommentListItemProps = Omit<
+  CommentListItemProps,
+  'onDownvote' | 'onUpvote' | 'vote'
+> & {
+  questionCommentId: string;
+};
+
+export default function QuestionCommentListItem({
+  questionCommentId,
+  ...restProps
+}: QuestionCommentListItemProps) {
+  const { handleDownvote, handleUpvote, vote } =
+    useQuestionCommentVote(questionCommentId);
+
+  return (
+    <CommentListItem
+      vote={vote}
+      onDownvote={handleDownvote}
+      onUpvote={handleUpvote}
+      {...restProps}
+    />
+  );
+}

apps/portal/src/pages/questions/[questionId]/[questionSlug]/answer/[answerId]/[answerSlug]/index.tsx

@@ -5,8 +5,8 @@ import { useForm } from 'react-hook-form';
 import { Button, TextArea } from '@tih/ui';
 
 import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics';
-import AnswerCommentListItem from '~/components/questions/AnswerCommentListItem';
 import FullAnswerCard from '~/components/questions/card/FullAnswerCard';
+import AnswerCommentListItem from '~/components/questions/comments/AnswerCommentListItem';
 import FullScreenSpinner from '~/components/questions/FullScreenSpinner';
 import BackButtonLayout from '~/components/questions/layout/BackButtonLayout';
 import PaginationLoadMoreButton from '~/components/questions/PaginationLoadMoreButton';

apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx

@@ -5,9 +5,9 @@ import { useForm } from 'react-hook-form';
 import { Button, Collapsible, HorizontalDivider, TextArea } from '@tih/ui';
 
 import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics';
-import AnswerCommentListItem from '~/components/questions/AnswerCommentListItem';
 import FullQuestionCard from '~/components/questions/card/question/FullQuestionCard';
 import QuestionAnswerCard from '~/components/questions/card/QuestionAnswerCard';
+import QuestionCommentListItem from '~/components/questions/comments/QuestionCommentListItem';
 import FullScreenSpinner from '~/components/questions/FullScreenSpinner';
 import BackButtonLayout from '~/components/questions/layout/BackButtonLayout';
 import PaginationLoadMoreButton from '~/components/questions/PaginationLoadMoreButton';
@@ -248,13 +248,13 @@ export default function QuestionPage() {
                     {(commentData?.pages ?? []).flatMap(
                       ({ processedQuestionCommentsData: comments }) =>
                         comments.map((comment) => (
-                          <AnswerCommentListItem
+                          <QuestionCommentListItem
                             key={comment.id}
-                            answerCommentId={comment.id}
                             authorImageUrl={comment.userImage}
                             authorName={comment.user}
                             content={comment.content}
                             createdAt={comment.createdAt}
+                            questionCommentId={comment.id}
                             upvoteCount={comment.numVotes}
                           />
                         )),