From b9ff8157af1cd010a1977c07ec5b361feb6485fa Mon Sep 17 00:00:00 2001
From: Jeff Sieu <jeffsy00@gmail.com>
Date: Mon, 10 Oct 2022 17:45:00 +0800
Subject: [PATCH] [questions][ui] update answer card

---
 .../questions/QuestionSearchBar.tsx           | 28 ++++++------
 .../questions/QuestionTypeBadge.tsx           | 17 ++++++++
 .../components/questions/card/AnswerCard.tsx  | 36 +++++++++-------
 .../questions/card/FullAnswerCard.tsx         | 43 ++++---------------
 .../questions/card/FullQuestionCard.tsx       | 10 +++--
 .../questions/card/QuestionAnswerCard.tsx     | 15 +++++++
 .../questions/card/QuestionCard.tsx           | 13 +++---
 .../[questionId]/[questionSlug]/index.tsx     |  4 +-
 apps/portal/src/pages/questions/index.tsx     |  2 +-
 9 files changed, 90 insertions(+), 78 deletions(-)
 create mode 100644 apps/portal/src/components/questions/QuestionTypeBadge.tsx
 create mode 100644 apps/portal/src/components/questions/card/QuestionAnswerCard.tsx

diff --git a/apps/portal/src/components/questions/QuestionSearchBar.tsx b/apps/portal/src/components/questions/QuestionSearchBar.tsx
index d57c8a48..c5f401ea 100644
--- a/apps/portal/src/components/questions/QuestionSearchBar.tsx
+++ b/apps/portal/src/components/questions/QuestionSearchBar.tsx
@@ -25,8 +25,8 @@ export default function QuestionSearchBar<
   onFilterOptionsToggle,
 }: QuestionSearchBarProps<SortOptions>) {
   return (
-    <div className="flex items-center gap-2">
-      <div className="flex-1 pt-1">
+    <div className="flex items-center gap-4">
+      <div className="flex-1">
         <TextInput
           isLabelHidden={true}
           label="Search by content"
@@ -35,17 +35,19 @@ export default function QuestionSearchBar<
           startAddOnType="icon"
         />
       </div>
-      <span aria-hidden={true} className="pl-3 pr-1 pt-1 text-sm">
-        Sort by:
-      </span>
-      <Select
-        display="inline"
-        isLabelHidden={true}
-        label="Sort by"
-        options={sortOptions}
-        value={sortValue}
-        onChange={onSortChange}
-      />
+      <div className="flex items-center gap-2">
+        <span aria-hidden={true} className="align-middle text-sm font-medium">
+          Sort by:
+        </span>
+        <Select
+          display="inline"
+          isLabelHidden={true}
+          label="Sort by"
+          options={sortOptions}
+          value={sortValue}
+          onChange={onSortChange}
+        />
+      </div>
       <div className="lg:hidden">
         <Button
           addonPosition="start"
diff --git a/apps/portal/src/components/questions/QuestionTypeBadge.tsx b/apps/portal/src/components/questions/QuestionTypeBadge.tsx
new file mode 100644
index 00000000..fe62351e
--- /dev/null
+++ b/apps/portal/src/components/questions/QuestionTypeBadge.tsx
@@ -0,0 +1,17 @@
+import type { QuestionsQuestionType } from '@prisma/client';
+import { Badge } from '@tih/ui';
+
+import { QUESTION_TYPES } from '~/utils/questions/constants';
+
+export type QuestionTypeBadgeProps = {
+  type: QuestionsQuestionType;
+};
+
+export default function QuestionTypeBadge({ type }: QuestionTypeBadgeProps) {
+  return (
+    <Badge
+      label={QUESTION_TYPES.find(({ value }) => value === type)!.label}
+      variant="info"
+    />
+  );
+}
diff --git a/apps/portal/src/components/questions/card/AnswerCard.tsx b/apps/portal/src/components/questions/card/AnswerCard.tsx
index 16088f3c..585ea34a 100644
--- a/apps/portal/src/components/questions/card/AnswerCard.tsx
+++ b/apps/portal/src/components/questions/card/AnswerCard.tsx
@@ -1,48 +1,52 @@
 import { format } from 'date-fns';
+import { ChatBubbleBottomCenterTextIcon } from '@heroicons/react/24/outline';
 
-import withHref from '~/utils/questions/withHref';
-
+import type { VotingButtonsProps } from '../VotingButtons';
 import VotingButtons from '../VotingButtons';
 
 export type AnswerCardProps = {
   authorImageUrl: string;
   authorName: string;
-  commentCount: number;
+  commentCount?: number;
   content: string;
   createdAt: Date;
   upvoteCount: number;
+  votingButtonsSize: VotingButtonsProps['size'];
 };
 
-function AnswerCardWithoutHref({
+export default function AnswerCard({
   authorName,
   authorImageUrl,
   upvoteCount,
   content,
   createdAt,
   commentCount,
+  votingButtonsSize,
 }: AnswerCardProps) {
   return (
-    <div className="flex gap-4 rounded-md border bg-white p-2 hover:bg-slate-50">
-      <VotingButtons size="sm" upvoteCount={upvoteCount} />
-      <div className="mt-1 flex flex-col gap-1">
+    <article className="flex gap-4 rounded-md border bg-white p-2">
+      <VotingButtons size={votingButtonsSize} upvoteCount={upvoteCount} />
+      <div className="flex flex-col gap-2">
         <div className="flex items-center gap-2">
           <img
             alt={`${authorName} profile picture`}
             className="h-8 w-8 rounded-full"
             src={authorImageUrl}></img>
           <h1 className="font-bold">{authorName}</h1>
-          <p className="pt-1 text-xs font-extralight">
+          <p className="text-xs font-extralight">
             Posted on: {format(createdAt, 'Pp')}
           </p>
         </div>
-        <p className="pl-1 pt-1">{content}</p>
-        <p className="py-1 pl-3 text-sm font-light underline	underline-offset-4">
-          {commentCount} comment(s)
-        </p>
+        <p>{content}</p>
+        {commentCount !== undefined && (
+          <div className="flex items-center gap-2 text-slate-500">
+            <ChatBubbleBottomCenterTextIcon className="h-6 w-6" />
+            <p className="text-sm font-medium">
+              {commentCount} {commentCount === 1 ? 'comment' : 'comments'}
+            </p>
+          </div>
+        )}
       </div>
-    </div>
+    </article>
   );
 }
-
-const AnswerCard = withHref(AnswerCardWithoutHref);
-export default AnswerCard;
diff --git a/apps/portal/src/components/questions/card/FullAnswerCard.tsx b/apps/portal/src/components/questions/card/FullAnswerCard.tsx
index 74282c77..7642683a 100644
--- a/apps/portal/src/components/questions/card/FullAnswerCard.tsx
+++ b/apps/portal/src/components/questions/card/FullAnswerCard.tsx
@@ -1,38 +1,11 @@
-import { format } from 'date-fns';
+import type { AnswerCardProps } from './AnswerCard';
+import AnswerCard from './AnswerCard';
 
-import VotingButtons from '../VotingButtons';
+export type FullAnswerCardProps = Omit<
+  AnswerCardProps,
+  'commentCount' | 'votingButtonsSize'
+>;
 
-export type FullAnswerCardProps = {
-  authorImageUrl: string;
-  authorName: string;
-  content: string;
-  createdAt: Date;
-  upvoteCount: number;
-};
-
-export default function FullAnswerCard({
-  authorImageUrl,
-  authorName,
-  content,
-  createdAt,
-  upvoteCount,
-}: FullAnswerCardProps) {
-  return (
-    <article className="flex gap-4 rounded-md border border-slate-300 bg-white p-4">
-      <VotingButtons upvoteCount={upvoteCount}></VotingButtons>
-      <div className="mt-1 flex flex-col gap-1">
-        <div className="flex items-center gap-2">
-          <img
-            alt={`${authorName} profile picture`}
-            className="h-8 w-8 rounded-full"
-            src={authorImageUrl}></img>
-          <h1 className="font-bold">{authorName}</h1>
-          <p className="pt-1 text-xs font-extralight">
-            Posted on: {format(createdAt, 'Pp')}
-          </p>
-        </div>
-        <p className="pl-1 pt-1">{content}</p>
-      </div>
-    </article>
-  );
+export default function FullAnswerCard(props: FullAnswerCardProps) {
+  return <AnswerCard {...props} votingButtonsSize="md" />;
 }
diff --git a/apps/portal/src/components/questions/card/FullQuestionCard.tsx b/apps/portal/src/components/questions/card/FullQuestionCard.tsx
index bc6f5f30..a10a7d99 100644
--- a/apps/portal/src/components/questions/card/FullQuestionCard.tsx
+++ b/apps/portal/src/components/questions/card/FullQuestionCard.tsx
@@ -1,5 +1,7 @@
+import type { QuestionsQuestionType } from '@prisma/client';
 import { Badge } from '@tih/ui';
 
+import QuestionTypeBadge from '../QuestionTypeBadge';
 import VotingButtons from '../VotingButtons';
 
 type UpvoteProps =
@@ -19,7 +21,7 @@ export type FullQuestionCardProps = UpvoteProps & {
   receivedCount: number;
   role: string;
   timestamp: string;
-  type: string;
+  type: QuestionsQuestionType;
 };
 
 export default function FullQuestionCard({
@@ -32,18 +34,18 @@ export default function FullQuestionCard({
   location,
   type,
 }: FullQuestionCardProps) {
-  const altText = company + ' logo';
+  const altText = `${company} logo`;
   return (
     <article className="flex gap-4 rounded-md border border-slate-300 bg-white p-4">
       {showVoteButtons && <VotingButtons upvoteCount={upvoteCount} />}
       <div className="flex flex-col gap-2">
         <div className="flex items-center gap-2">
           <img alt={altText} src="https://logo.clearbit.com/google.com"></img>
-          <h2 className="ml-2 text-xl">{company}</h2>
         </div>
         <div className="flex items-baseline justify-between">
           <div className="flex items-center gap-2 text-slate-500">
-            <Badge label={type} variant="primary" />
+            <Badge label={company} variant="primary" />
+            <QuestionTypeBadge type={type} />
             <p className="text-xs">
               {timestamp} · {location} · {role}
             </p>
diff --git a/apps/portal/src/components/questions/card/QuestionAnswerCard.tsx b/apps/portal/src/components/questions/card/QuestionAnswerCard.tsx
new file mode 100644
index 00000000..b508e5b4
--- /dev/null
+++ b/apps/portal/src/components/questions/card/QuestionAnswerCard.tsx
@@ -0,0 +1,15 @@
+import withHref from '~/utils/questions/withHref';
+
+import type { AnswerCardProps } from './AnswerCard';
+import AnswerCard from './AnswerCard';
+
+export type QuestionAnswerCardProps = Required<
+  Omit<AnswerCardProps, 'votingButtonsSize'>
+>;
+
+function QuestionAnswerCardWithoutHref(props: QuestionAnswerCardProps) {
+  return <AnswerCard {...props} votingButtonsSize="sm" />;
+}
+
+const QuestionAnswerCard = withHref(QuestionAnswerCardWithoutHref);
+export default QuestionAnswerCard;
diff --git a/apps/portal/src/components/questions/card/QuestionCard.tsx b/apps/portal/src/components/questions/card/QuestionCard.tsx
index b643f031..36d17d69 100644
--- a/apps/portal/src/components/questions/card/QuestionCard.tsx
+++ b/apps/portal/src/components/questions/card/QuestionCard.tsx
@@ -1,9 +1,8 @@
-import {
-  ChatBubbleBottomCenterTextIcon,
-  // EyeIcon,
-} from '@heroicons/react/24/outline';
+import { ChatBubbleBottomCenterTextIcon } from '@heroicons/react/24/outline';
+import type { QuestionsQuestionType } from '@prisma/client';
 import { Badge, Button } from '@tih/ui';
 
+import QuestionTypeBadge from '../QuestionTypeBadge';
 import VotingButtons from '../VotingButtons';
 
 type UpvoteProps =
@@ -48,7 +47,7 @@ export type QuestionCardProps = ActionButtonProps &
     receivedCount: number;
     role: string;
     timestamp: string;
-    type: string;
+    type: QuestionsQuestionType;
   };
 
 export default function QuestionCard({
@@ -73,8 +72,8 @@ export default function QuestionCard({
       <div className="flex flex-col gap-2">
         <div className="flex items-baseline justify-between">
           <div className="flex items-baseline gap-2 text-slate-500">
-            <h2 className="ml-1 text-lg">{company}</h2>
-            <Badge label={type} variant="primary" />
+            <Badge label={company} variant="primary" />
+            <QuestionTypeBadge type={type} />
             <p className="text-xs">
               {timestamp} · {location} · {role}
             </p>
diff --git a/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx b/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx
index 74b55fa5..8e73f2f4 100644
--- a/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx
+++ b/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx
@@ -3,8 +3,8 @@ import { useForm } from 'react-hook-form';
 import { ArrowSmallLeftIcon } from '@heroicons/react/24/outline';
 import { Button, Collapsible, Select, TextArea } from '@tih/ui';
 
-import AnswerCard from '~/components/questions/card/AnswerCard';
 import FullQuestionCard from '~/components/questions/card/FullQuestionCard';
+import QuestionAnswerCard from '~/components/questions/card/QuestionAnswerCard';
 import CommentListItem from '~/components/questions/CommentListItem';
 import FullScreenSpinner from '~/components/questions/FullScreenSpinner';
 
@@ -233,7 +233,7 @@ export default function QuestionPage() {
             </div>
           </form>
           {(answers ?? []).map((answer) => (
-            <AnswerCard
+            <QuestionAnswerCard
               key={answer.id}
               authorImageUrl={answer.userImage}
               authorName={answer.user}
diff --git a/apps/portal/src/pages/questions/index.tsx b/apps/portal/src/pages/questions/index.tsx
index daecd35e..ac53be59 100644
--- a/apps/portal/src/pages/questions/index.tsx
+++ b/apps/portal/src/pages/questions/index.tsx
@@ -302,7 +302,7 @@ export default function QuestionsHomePage() {
                   upvoteCount={question.numVotes}
                 />
               ))}
-              {(questions ?? []).length === 0 && (
+              {questions?.length === 0 && (
                 <div className="flex w-full items-center justify-center gap-2 rounded-md border border-slate-300 bg-slate-200 p-4 text-slate-600">
                   <NoSymbolIcon className="h-6 w-6" />
                   <p>Nothing found. Try changing your search filters.</p>