From 21bc9bdf4d26b280c2d7f47431d4ef911100f7d6 Mon Sep 17 00:00:00 2001
From: Jeff Sieu <jeffsy00@gmail.com>
Date: Sun, 9 Oct 2022 03:46:39 +0800
Subject: [PATCH] [question][ui] add question detail page

---
 .../components/questions/VotingButtons.tsx    | 26 ++++++++++++++
 .../components/questions/card/AnswerCard.tsx  | 23 ++++++++++++
 .../questions/card/QuestionCard.tsx           | 36 +++++++++----------
 .../questions/card/QuestionOverviewCard.tsx   | 24 ++++++-------
 .../questions/card/SimilarQuestionCard.tsx    | 28 +++++++--------
 .../src/pages/questions/[id]/[slug]/index.tsx | 35 ++++++++++++++++++
 apps/portal/src/pages/questions/index.tsx     | 10 ++----
 apps/portal/src/utils/questions/constants.ts  | 11 ++++++
 8 files changed, 138 insertions(+), 55 deletions(-)
 create mode 100644 apps/portal/src/components/questions/VotingButtons.tsx
 create mode 100644 apps/portal/src/components/questions/card/AnswerCard.tsx
 create mode 100644 apps/portal/src/pages/questions/[id]/[slug]/index.tsx

diff --git a/apps/portal/src/components/questions/VotingButtons.tsx b/apps/portal/src/components/questions/VotingButtons.tsx
new file mode 100644
index 00000000..81a6d7b1
--- /dev/null
+++ b/apps/portal/src/components/questions/VotingButtons.tsx
@@ -0,0 +1,26 @@
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
+import { Button } from '@tih/ui';
+
+export type VotingButtonsProps = {
+  upvoteCount: number;
+};
+
+export default function VotingButtons({ upvoteCount }: VotingButtonsProps) {
+  return (
+    <div className="flex flex-col items-center">
+      <Button
+        icon={ChevronUpIcon}
+        isLabelHidden={true}
+        label="Upvote"
+        variant="tertiary"
+      />
+      <p>{upvoteCount}</p>
+      <Button
+        icon={ChevronDownIcon}
+        isLabelHidden={true}
+        label="Downvote"
+        variant="tertiary"
+      />
+    </div>
+  );
+}
diff --git a/apps/portal/src/components/questions/card/AnswerCard.tsx b/apps/portal/src/components/questions/card/AnswerCard.tsx
new file mode 100644
index 00000000..eb9fe9fd
--- /dev/null
+++ b/apps/portal/src/components/questions/card/AnswerCard.tsx
@@ -0,0 +1,23 @@
+import VotingButtons from '../VotingButtons';
+
+export type AnswerCardProps = {
+  author: string;
+  content: string;
+  upvoteCount: number;
+};
+
+export default function AnswerCard({
+  author,
+  upvoteCount,
+  content,
+}: AnswerCardProps) {
+  return (
+    <div className="flex gap-4 rounded-md border p-4">
+      <VotingButtons upvoteCount={upvoteCount} />
+      <div>
+        <h1 className="font-bold">{author}</h1>
+        <p>{content}</p>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/portal/src/components/questions/card/QuestionCard.tsx b/apps/portal/src/components/questions/card/QuestionCard.tsx
index b94366e5..08c1b7be 100644
--- a/apps/portal/src/components/questions/card/QuestionCard.tsx
+++ b/apps/portal/src/components/questions/card/QuestionCard.tsx
@@ -1,11 +1,11 @@
 import {
   ChatBubbleBottomCenterTextIcon,
-  ChevronDownIcon,
-  ChevronUpIcon,
   EyeIcon,
 } from '@heroicons/react/24/outline';
 import { Badge, Button } from '@tih/ui';
 
+import VotingButtons from '../VotingButtons';
+
 type UpvoteProps =
   | {
       showVoteButtons: true;
@@ -42,6 +42,7 @@ export type QuestionCardProps = ActionButtonProps &
   StatisticsProps &
   UpvoteProps & {
     content: string;
+    href?: string;
     location: string;
     receivedCount: number;
     role: string;
@@ -61,26 +62,11 @@ export default function QuestionCard({
   timestamp,
   role,
   location,
+  href,
 }: QuestionCardProps) {
-  return (
+  const mainCard = (
     <article className="flex gap-4 rounded-md border border-slate-300 bg-white p-4">
-      {showVoteButtons && (
-        <div className="flex flex-col items-center">
-          <Button
-            icon={ChevronUpIcon}
-            isLabelHidden={true}
-            label="Upvote"
-            variant="tertiary"
-          />
-          <p>{upvoteCount}</p>
-          <Button
-            icon={ChevronDownIcon}
-            isLabelHidden={true}
-            label="Downvote"
-            variant="tertiary"
-          />
-        </div>
-      )}
+      {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">
@@ -122,4 +108,14 @@ export default function QuestionCard({
       </div>
     </article>
   );
+
+  return href ? (
+    <a
+      className="ring-primary-500 rounded-md hover:bg-slate-50 focus:ring-2 focus-visible:outline-none active:bg-slate-100"
+      href={href}>
+      {mainCard}
+    </a>
+  ) : (
+    mainCard
+  );
 }
diff --git a/apps/portal/src/components/questions/card/QuestionOverviewCard.tsx b/apps/portal/src/components/questions/card/QuestionOverviewCard.tsx
index 0c61ece3..ecb4eb2e 100644
--- a/apps/portal/src/components/questions/card/QuestionOverviewCard.tsx
+++ b/apps/portal/src/components/questions/card/QuestionOverviewCard.tsx
@@ -1,19 +1,17 @@
 import type { QuestionCardProps } from './QuestionCard';
 import QuestionCard from './QuestionCard';
 
-export type QuestionOverviewCardProps = Required<
-  Omit<
-    QuestionCardProps & {
-      showActionButton: false;
-      showUserStatistics: true;
-      showVoteButtons: true;
-    },
-    | 'actionButtonLabel'
-    | 'onActionButtonClick'
-    | 'showActionButton'
-    | 'showUserStatistics'
-    | 'showVoteButtons'
-  >
+export type QuestionOverviewCardProps = Omit<
+  QuestionCardProps & {
+    showActionButton: false;
+    showUserStatistics: true;
+    showVoteButtons: true;
+  },
+  | 'actionButtonLabel'
+  | 'onActionButtonClick'
+  | 'showActionButton'
+  | 'showUserStatistics'
+  | 'showVoteButtons'
 >;
 
 export default function QuestionOverviewCard(props: QuestionOverviewCardProps) {
diff --git a/apps/portal/src/components/questions/card/SimilarQuestionCard.tsx b/apps/portal/src/components/questions/card/SimilarQuestionCard.tsx
index 0b591fb8..063bdf91 100644
--- a/apps/portal/src/components/questions/card/SimilarQuestionCard.tsx
+++ b/apps/portal/src/components/questions/card/SimilarQuestionCard.tsx
@@ -1,21 +1,19 @@
 import type { QuestionCardProps } from './QuestionCard';
 import QuestionCard from './QuestionCard';
 
-export type SimilarQuestionCardProps = Required<
-  Omit<
-    QuestionCardProps & {
-      showActionButton: true;
-      showUserStatistics: false;
-      showVoteButtons: false;
-    },
-    | 'actionButtonLabel'
-    | 'answerCount'
-    | 'onActionButtonClick'
-    | 'showActionButton'
-    | 'showUserStatistics'
-    | 'showVoteButtons'
-    | 'upvoteCount'
-  >
+export type SimilarQuestionCardProps = Omit<
+  QuestionCardProps & {
+    showActionButton: true;
+    showUserStatistics: false;
+    showVoteButtons: false;
+  },
+  | 'actionButtonLabel'
+  | 'answerCount'
+  | 'onActionButtonClick'
+  | 'showActionButton'
+  | 'showUserStatistics'
+  | 'showVoteButtons'
+  | 'upvoteCount'
 > & {
   onSimilarQuestionClick: () => void;
 };
diff --git a/apps/portal/src/pages/questions/[id]/[slug]/index.tsx b/apps/portal/src/pages/questions/[id]/[slug]/index.tsx
new file mode 100644
index 00000000..f5f8b0d0
--- /dev/null
+++ b/apps/portal/src/pages/questions/[id]/[slug]/index.tsx
@@ -0,0 +1,35 @@
+import { Button, Collapsible, TextArea } from '@tih/ui';
+
+import AnswerCard from '~/components/questions/card/AnswerCard';
+import QuestionOverviewCard from '~/components/questions/card/QuestionOverviewCard';
+
+import { SAMPLE_QUESTION } from '~/utils/questions/constants';
+
+export default function QuestionPage() {
+  const question = SAMPLE_QUESTION;
+  return (
+    <div className="flex w-full flex-col items-center overflow-y-auto p-4">
+      <div className="flex max-w-7xl flex-col gap-2">
+        <h1 className="text-2xl">Question overview</h1>
+        <QuestionOverviewCard {...question} />
+        <Collapsible label="256 comments">
+          <div>Comment placeholder</div>
+        </Collapsible>
+        <TextArea label="Contribute an answer" rows={5} />
+        <div className="flex justify-end">
+          <Button label="Contribute" variant="primary" />
+        </div>
+        <p>{question.answerCount} answers</p>
+        {Array.from({ length: question.answerCount }).map((_, index) => (
+          <AnswerCard
+            // eslint-disable-next-line react/no-array-index-key
+            key={index}
+            author="James Smith"
+            content="Hello"
+            upvoteCount={10}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/portal/src/pages/questions/index.tsx b/apps/portal/src/pages/questions/index.tsx
index c4102a7d..23ba9b32 100644
--- a/apps/portal/src/pages/questions/index.tsx
+++ b/apps/portal/src/pages/questions/index.tsx
@@ -13,6 +13,7 @@ import {
   LOCATIONS,
   QUESTION_AGES,
   QUESTION_TYPES,
+  SAMPLE_QUESTION,
 } from '~/utils/questions/constants';
 
 export default function QuestionsHomePage() {
@@ -219,13 +220,8 @@ export default function QuestionsHomePage() {
                 <QuestionOverviewCard
                   // eslint-disable-next-line react/no-array-index-key
                   key={index}
-                  answerCount={0}
-                  content="Given an array of integers nums and an integer target, return indices of the two numbers such that they add up. Given an array of integers nums and an integer target, return indices of the two numbers such that they add up. Given an array of integers nums and"
-                  location="Menlo Park, CA"
-                  receivedCount={0}
-                  role="Senior Engineering Manager"
-                  timestamp="Last month"
-                  upvoteCount={0}
+                  href="/questions/1/1"
+                  {...SAMPLE_QUESTION}
                 />
               ))}
             </div>
diff --git a/apps/portal/src/utils/questions/constants.ts b/apps/portal/src/utils/questions/constants.ts
index 2737e037..f6aaa3e4 100644
--- a/apps/portal/src/utils/questions/constants.ts
+++ b/apps/portal/src/utils/questions/constants.ts
@@ -68,3 +68,14 @@ export const LOCATIONS: FilterChoices = [
     value: 'taiwan',
   },
 ];
+
+export const SAMPLE_QUESTION = {
+  answerCount: 10,
+  content:
+    'Given an array of integers nums and an integer target, return indices of the two numbers such that they add up. Given an array of integers nums and an integer target, return indices of the two numbers such that they add up. Given an array of integers nums and',
+  location: 'Menlo Park, CA',
+  receivedCount: 12,
+  role: 'Software Engineer',
+  timestamp: 'Last month',
+  upvoteCount: 5,
+};