Merge branch 'questions/backend-integration-2' of https://github.com/yangshun/tech-interview-handbook into questions/backend-integration-2

apps/portal/src/components/questions/VotingButtons.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
 import type { ButtonSize } from '@tih/ui';
 import { Button } from '@tih/ui';
@@ -11,6 +12,21 @@ export default function VotingButtons({
   upvoteCount,
   size = 'md',
 }: VotingButtonsProps) {
+  const handleUpvote = (event: React.MouseEvent) => {
+    event.preventDefault();
+
+    event.stopPropagation();
+    console.log('upvote');
+  };
+
+  const handleDownVote = (event: React.MouseEvent) => {
+    event.preventDefault();
+
+    event.stopPropagation();
+
+    console.log('downvote');
+  };
+
   return (
     <div className="flex flex-col items-center">
       <Button
@@ -19,6 +35,7 @@ export default function VotingButtons({
         label="Upvote"
         size={size}
         variant="tertiary"
+        onClick={handleUpvote}
       />
       <p>{upvoteCount}</p>
       <Button
@@ -27,6 +44,7 @@ export default function VotingButtons({
         label="Downvote"
         size={size}
         variant="tertiary"
+        onClick={handleDownVote}
       />
     </div>
   );

apps/portal/src/components/questions/card/QuestionCard.tsx

@@ -41,6 +41,7 @@ type ActionButtonProps =
 export type QuestionCardProps = ActionButtonProps &
   StatisticsProps &
   UpvoteProps & {
+    company: string;
     content: string;
     href?: string;
     location: string;
@@ -51,6 +52,7 @@ export type QuestionCardProps = ActionButtonProps &
   };
 
 export default function QuestionCard({
+  company,
   answerCount,
   content,
   // ReceivedCount,
@@ -70,7 +72,8 @@ export default function QuestionCard({
       {showVoteButtons && <VotingButtons upvoteCount={upvoteCount} />}
       <div className="flex flex-col gap-2">
         <div className="flex items-baseline justify-between">
-          <div className="flex items-center gap-2 text-slate-500">
+          <div className="flex items-baseline gap-2 text-slate-500">
+            <h2 className="ml-1 text-lg">{company}</h2>
             <Badge label={type} variant="primary" />
             <p className="text-xs">
               {timestamp} · {location} · {role}

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

@@ -47,7 +47,7 @@ export default function QuestionPage() {
     'questions.answers.comments.create',
     {
       onSuccess: () => {
-        utils.invalidateQuery([
+        utils.invalidateQueries([
           'questions.answers.comments.getAnswerComments',
           { answerId: answerId as string },
         ]);

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

@@ -29,6 +29,7 @@ export default function QuestionPage() {
   const {
     register: ansRegister,
     handleSubmit,
+    reset: resetAnswer,
     formState: { isDirty, isValid },
   } = useForm<AnswerQuestionData>({ mode: 'onChange' });
   const answerRegister = useFormRegister(ansRegister);
@@ -86,6 +87,7 @@ export default function QuestionPage() {
       content: data.answerContent,
       questionId: questionId as string,
     });
+    resetAnswer();
   };
 
   const handleSubmitComment = (data: QuestionCommentData) => {
@@ -124,7 +126,7 @@ export default function QuestionPage() {
             upvoteCount={question.numVotes}
           />
           <div className="mx-2">
-            <Collapsible label={`${question.numComments} comment(s)`}>
+            <Collapsible label={`${(comments ?? []).length} comment(s)`}>
               <form
                 className="mb-2"
                 onSubmit={handleCommentSubmit(handleSubmitComment)}>
@@ -199,7 +201,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.numAnswers} answers</p>
+                <p>{(answers ?? []).length} answers</p>
                 <div className="flex items-baseline gap-2">
                   <span aria-hidden={true} className="text-sm">
                     Sort by:

apps/portal/src/pages/questions/index.tsx

@@ -184,7 +184,6 @@ export default function QuestionsHomePage() {
   if (!loaded) {
     return null;
   }
-
   const filterSidebar = (
     <div className="mt-2 divide-y divide-slate-200 px-4">
       <FilterSection
@@ -287,6 +286,7 @@ export default function QuestionsHomePage() {
                 <QuestionOverviewCard
                   key={question.id}
                   answerCount={question.numAnswers}
+                  company={question.company}
                   content={question.content}
                   href={`/questions/${question.id}/${createSlug(
                     question.content,