From ef875ac2c65fbb60368f04b93bc44c00f73e25cd Mon Sep 17 00:00:00 2001
From: wlren <weilinwork99@gmail.com>
Date: Sun, 9 Oct 2022 21:57:18 +0800
Subject: [PATCH] [questions][chore] add dummy data, refactor

---
 .../answer/[answerId]/[answerSlug]/index.tsx  | 115 ++++++++++++++++++
 .../[questionSlug]}/index.tsx                 |  17 ++-
 apps/portal/src/utils/questions/constants.ts  |   1 +
 apps/portal/src/utils/questions/withHref.tsx  |  21 ++++
 4 files changed, 148 insertions(+), 6 deletions(-)
 create mode 100644 apps/portal/src/pages/questions/[questionId]/[questionSlug]/answer/[answerId]/[answerSlug]/index.tsx
 rename apps/portal/src/pages/questions/{[id]/[slug] => [questionId]/[questionSlug]}/index.tsx (86%)
 create mode 100644 apps/portal/src/utils/questions/withHref.tsx

diff --git a/apps/portal/src/pages/questions/[questionId]/[questionSlug]/answer/[answerId]/[answerSlug]/index.tsx b/apps/portal/src/pages/questions/[questionId]/[questionSlug]/answer/[answerId]/[answerSlug]/index.tsx
new file mode 100644
index 00000000..eea8f5cc
--- /dev/null
+++ b/apps/portal/src/pages/questions/[questionId]/[questionSlug]/answer/[answerId]/[answerSlug]/index.tsx
@@ -0,0 +1,115 @@
+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 FullQuestionCard from '~/components/questions/card/FullQuestionCard';
+
+import { SAMPLE_QUESTION } from '~/utils/questions/constants';
+import { useFormRegister } from '~/utils/questions/useFormRegister';
+
+export type AnswerData = {
+  answerContent: string;
+};
+
+export default function QuestionPage() {
+  const router = useRouter();
+  const {
+    register: formRegister,
+    handleSubmit,
+    formState: { isDirty, isValid },
+  } = useForm<AnswerData>({ mode: 'onChange' });
+  const register = useFormRegister(formRegister);
+  const question = SAMPLE_QUESTION;
+
+  const handleBackNavigation = () => {
+    router.back();
+  };
+
+  const handleSubmitAnswer = (data: AnswerData) => {
+    // eslint-disable-next-line no-console
+    console.log(data);
+  };
+
+  return (
+    <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">
+          <FullQuestionCard {...question} showVoteButtons={true} />
+          <div className="mx-2">
+            <Collapsible label="256 comments">
+              <div>Comment placeholder</div>
+            </Collapsible>
+          </div>
+          <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}
+              authorImageUrl="https://avatars.githubusercontent.com/u/66356390?v=4"
+              authorName="James Smith"
+              content="Hello"
+              createdAt={new Date()}
+              href={`${router.asPath}/answer/1/1`}
+              upvoteCount={10}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/portal/src/pages/questions/[id]/[slug]/index.tsx b/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx
similarity index 86%
rename from apps/portal/src/pages/questions/[id]/[slug]/index.tsx
rename to apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx
index 9206091d..debcdbe7 100644
--- a/apps/portal/src/pages/questions/[id]/[slug]/index.tsx
+++ b/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx
@@ -4,7 +4,7 @@ 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 FullQuestionCard from '~/components/questions/card/FullQuestionCard';
 
 import { SAMPLE_QUESTION } from '~/utils/questions/constants';
 import { useFormRegister } from '~/utils/questions/useFormRegister';
@@ -45,10 +45,12 @@ export default function QuestionPage() {
       </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>
+          <FullQuestionCard {...question} showVoteButtons={true} />
+          <div className="mx-2">
+            <Collapsible label="256 comments">
+              <div>Comment placeholder</div>
+            </Collapsible>
+          </div>
           <form onSubmit={handleSubmit(handleSubmitAnswer)}>
             <TextArea
               {...register('answerContent', { minLength: 1, required: true })}
@@ -98,8 +100,11 @@ export default function QuestionPage() {
             <AnswerCard
               // eslint-disable-next-line react/no-array-index-key
               key={index}
-              author="James Smith"
+              authorImageUrl="https://avatars.githubusercontent.com/u/66356390?v=4"
+              authorName="James Smith"
               content="Hello"
+              createdAt={new Date()}
+              href={`${router.asPath}/answer/1/1`}
               upvoteCount={10}
             />
           ))}
diff --git a/apps/portal/src/utils/questions/constants.ts b/apps/portal/src/utils/questions/constants.ts
index 0ef8a1d1..19851aa3 100644
--- a/apps/portal/src/utils/questions/constants.ts
+++ b/apps/portal/src/utils/questions/constants.ts
@@ -71,6 +71,7 @@ export const LOCATIONS: FilterChoices = [
 
 export const SAMPLE_QUESTION = {
   answerCount: 10,
+  company: 'Google',
   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 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',
diff --git a/apps/portal/src/utils/questions/withHref.tsx b/apps/portal/src/utils/questions/withHref.tsx
new file mode 100644
index 00000000..7fb98976
--- /dev/null
+++ b/apps/portal/src/utils/questions/withHref.tsx
@@ -0,0 +1,21 @@
+const withHref = <Props extends Record<string, unknown>>(
+  Component: React.ComponentType<Props>,
+) => {
+  return (
+    props: Props & {
+      href: string;
+    },
+  ) => {
+    const { href, ...others } = props;
+
+    return (
+      <a
+        className="ring-primary-500 rounded-md hover:bg-slate-50 focus:ring-2 focus-visible:outline-none active:bg-slate-100"
+        href={href}>
+        <Component {...(others as unknown as Props)} />
+      </a>
+    );
+  };
+};
+
+export default withHref;