From dd861149914bf147184b43430982789162462581 Mon Sep 17 00:00:00 2001
From: wlren <weilinwork99@gmail.com>
Date: Sun, 9 Oct 2022 19:38:05 +0800
Subject: [PATCH] [questions][ui] question page

---
 .../questions/QuestionsNavigation.ts          |   6 +-
 .../src/pages/questions/[id]/[slug]/index.tsx | 117 ++++++++++++++----
 apps/portal/src/pages/questions/index.tsx     |   4 +
 apps/portal/src/utils/questions/constants.ts  |   2 +-
 4 files changed, 104 insertions(+), 25 deletions(-)

diff --git a/apps/portal/src/components/questions/QuestionsNavigation.ts b/apps/portal/src/components/questions/QuestionsNavigation.ts
index 21df89db..0c5a6c43 100644
--- a/apps/portal/src/components/questions/QuestionsNavigation.ts
+++ b/apps/portal/src/components/questions/QuestionsNavigation.ts
@@ -2,9 +2,9 @@ import type { ProductNavigationItems } from '~/components/global/ProductNavigati
 
 const navigation: ProductNavigationItems = [
   { href: '/questions', name: 'Home' },
-  { href: '#', name: 'My Lists' },
-  { href: '#', name: 'My Questions' },
-  { href: '#', name: 'History' },
+  { href: '/questions', name: 'My Lists' },
+  { href: '/questions', name: 'My Questions' },
+  { href: '/questions', name: 'History' },
 ];
 
 const config = {
diff --git a/apps/portal/src/pages/questions/[id]/[slug]/index.tsx b/apps/portal/src/pages/questions/[id]/[slug]/index.tsx
index f5f8b0d0..9206091d 100644
--- a/apps/portal/src/pages/questions/[id]/[slug]/index.tsx
+++ b/apps/portal/src/pages/questions/[id]/[slug]/index.tsx
@@ -1,34 +1,109 @@
-import { Button, Collapsible, TextArea } from '@tih/ui';
+import { useRouter } from 'next/router';
+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 QuestionOverviewCard from '~/components/questions/card/QuestionOverviewCard';
 
 import { SAMPLE_QUESTION } from '~/utils/questions/constants';
+import { useFormRegister } from '~/utils/questions/useFormRegister';
+
+export type AnswerQuestionData = {
+  answerContent: string;
+};
 
 export default function QuestionPage() {
+  const router = useRouter();
+  const {
+    register: formRegister,
+    handleSubmit,
+    formState: { isDirty, isValid },
+  } = useForm<AnswerQuestionData>({ mode: 'onChange' });
+  const register = useFormRegister(formRegister);
   const question = SAMPLE_QUESTION;
+
+  const handleBackNavigation = () => {
+    router.back();
+  };
+
+  const handleSubmitAnswer = (data: AnswerQuestionData) => {
+    // eslint-disable-next-line no-console
+    console.log(data);
+  };
+
   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 className="flex">
+      <div className="flex items-baseline gap-2 py-4 pl-4">
+        <Button
+          addonPosition="start"
+          display="inline"
+          icon={ArrowSmallLeftIcon}
+          label="Back"
+          variant="secondary"
+          onClick={handleBackNavigation}></Button>
+      </div>
+      <div className="flex flex-col items-center overflow-y-auto py-4 px-5">
+        <div className="flex max-w-7xl flex-col gap-2">
+          <QuestionOverviewCard {...question} />
+          <Collapsible label="256 comments">
+            <div>Comment placeholder</div>
+          </Collapsible>
+          <form onSubmit={handleSubmit(handleSubmitAnswer)}>
+            <TextArea
+              {...register('answerContent', { minLength: 1, required: true })}
+              label="Contribute your answer"
+              required={true}
+              resize="vertical"
+              rows={5}
+            />
+            <div className="mt-2 flex justify-end">
+              <Button
+                disabled={!isDirty || !isValid}
+                label="Contribute"
+                type="submit"
+                variant="primary"
+              />
+            </div>
+          </form>
+          <div className="my-2 flex items-baseline justify-between">
+            <p>{question.answerCount} answers</p>
+            <div className="flex items-baseline gap-2">
+              <span aria-hidden={true} className="text-sm">
+                Sort by:
+              </span>
+              <Select
+                display="inline"
+                isLabelHidden={true}
+                label="Sort by"
+                options={[
+                  {
+                    label: 'Most recent',
+                    value: 'most-recent',
+                  },
+                  {
+                    label: 'Most upvotes',
+                    value: 'most-upvotes',
+                  },
+                ]}
+                value="most-recent"
+                onChange={(value) => {
+                  // eslint-disable-next-line no-console
+                  console.log(value);
+                }}></Select>
+            </div>
+          </div>
+
+          {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>
-        <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 e77618ed..7ac08d25 100644
--- a/apps/portal/src/pages/questions/index.tsx
+++ b/apps/portal/src/pages/questions/index.tsx
@@ -215,6 +215,10 @@ export default function QuestionsHomePage() {
                   },
                 ]}
                 sortValue="most-recent"
+                onSortChange={(value) => {
+                  // eslint-disable-next-line no-console
+                  console.log(value);
+                }}
               />
               {Array.from({ length: 10 }).map((_, index) => (
                 <QuestionOverviewCard
diff --git a/apps/portal/src/utils/questions/constants.ts b/apps/portal/src/utils/questions/constants.ts
index f6aaa3e4..0ef8a1d1 100644
--- a/apps/portal/src/utils/questions/constants.ts
+++ b/apps/portal/src/utils/questions/constants.ts
@@ -72,7 +72,7 @@ export const LOCATIONS: FilterChoices = [
 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',
+    '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 andiven 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 andiven 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 andiven 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 andiven 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 andiven 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 andiven 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 andiven 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',