From 4adc6a50137dd5ac5dd2b5bd61e8a139b6d4d063 Mon Sep 17 00:00:00 2001
From: Jeff Sieu <jeffsy00@gmail.com>
Date: Sat, 8 Oct 2022 18:06:33 +0800
Subject: [PATCH] [questions][ui] add similar question card

---
 .../questions/ContributeQuestionCard.tsx      |  19 ++-
 ...Modal.tsx => ContributeQuestionDialog.tsx} |  47 ++++---
 .../questions/ContributeQuestionForm.tsx      |  68 ++++++----
 ...dDraftModal.tsx => DiscardDraftDialog.tsx} |  26 ++--
 .../questions/QuestionOverviewCard.tsx        |  72 -----------
 .../questions/card/QuestionCard.tsx           | 122 ++++++++++++++++++
 .../questions/card/QuestionOverviewCard.tsx   |  28 ++++
 .../questions/card/SimilarQuestionCard.tsx    |  33 +++++
 apps/portal/src/pages/questions/index.tsx     |   2 +-
 9 files changed, 278 insertions(+), 139 deletions(-)
 rename apps/portal/src/components/questions/{ContributeQuestionModal.tsx => ContributeQuestionDialog.tsx} (70%)
 rename apps/portal/src/components/questions/{DiscardDraftModal.tsx => DiscardDraftDialog.tsx} (87%)
 delete mode 100644 apps/portal/src/components/questions/QuestionOverviewCard.tsx
 create mode 100644 apps/portal/src/components/questions/card/QuestionCard.tsx
 create mode 100644 apps/portal/src/components/questions/card/QuestionOverviewCard.tsx
 create mode 100644 apps/portal/src/components/questions/card/SimilarQuestionCard.tsx

diff --git a/apps/portal/src/components/questions/ContributeQuestionCard.tsx b/apps/portal/src/components/questions/ContributeQuestionCard.tsx
index bd6c4d78..951510b8 100644
--- a/apps/portal/src/components/questions/ContributeQuestionCard.tsx
+++ b/apps/portal/src/components/questions/ContributeQuestionCard.tsx
@@ -10,7 +10,7 @@ import {
 } from '@heroicons/react/24/outline';
 import { Button, TextInput } from '@tih/ui';
 
-import ContributeQuestionModal from './ContributeQuestionModal';
+import ContributeQuestionDialog from './ContributeQuestionDialog';
 
 export type ContributeQuestionData = {
   company: string;
@@ -48,7 +48,12 @@ export default function ContributeQuestionCard({
   onSubmit,
 }: ContributeQuestionCardProps) {
   const { register, handleSubmit } = useForm<ContributeQuestionData>();
-  const [isOpen, setOpen] = useState<boolean>(false);
+  const [showDraftDialog, setShowDraftDialog] = useState(false);
+
+  const handleDraftDialogCancel = () => {
+    setShowDraftDialog(false);
+  };
+
   return (
     <>
       <form
@@ -89,14 +94,14 @@ export default function ContributeQuestionCard({
             label="Contribute"
             type="submit"
             variant="primary"
-            onClick={() => setOpen(true)}
+            onClick={() => setShowDraftDialog(true)}
           />
         </div>
       </form>
-
-      <ContributeQuestionModal
-        contributeState={isOpen}
-        setContributeState={setOpen}></ContributeQuestionModal>
+      <ContributeQuestionDialog
+        show={showDraftDialog}
+        onCancel={handleDraftDialogCancel}
+      />
     </>
   );
 }
diff --git a/apps/portal/src/components/questions/ContributeQuestionModal.tsx b/apps/portal/src/components/questions/ContributeQuestionDialog.tsx
similarity index 70%
rename from apps/portal/src/components/questions/ContributeQuestionModal.tsx
rename to apps/portal/src/components/questions/ContributeQuestionDialog.tsx
index 8240fb71..211a78a9 100644
--- a/apps/portal/src/components/questions/ContributeQuestionModal.tsx
+++ b/apps/portal/src/components/questions/ContributeQuestionDialog.tsx
@@ -1,39 +1,38 @@
-import type { Dispatch, SetStateAction } from 'react';
 import { Fragment, useState } from 'react';
 import { Dialog, Transition } from '@headlessui/react';
 
 import ContributeQuestionForm from './ContributeQuestionForm';
-import DiscardDraftModal from './DiscardDraftModal';
+import DiscardDraftDialog from './DiscardDraftDialog';
 
-export type ContributeQuestionModalProps = {
-  contributeState: boolean;
-  setContributeState: Dispatch<SetStateAction<boolean>>;
+export type ContributeQuestionDialogProps = {
+  onCancel: () => void;
+  show: boolean;
 };
 
-export default function ContributeQuestionModal({
-  contributeState,
-  setContributeState,
-}: ContributeQuestionModalProps) {
-  const [isDiscardOpen, setIsDiscardOpen] = useState<boolean>(false);
+export default function ContributeQuestionDialog({
+  show,
+  onCancel,
+}: ContributeQuestionDialogProps) {
+  const [showDiscardDialog, setShowDiscardDialog] = useState(false);
 
-  const handleDiscardDraft = () => {
-    // eslint-disable-next-line no-console
-    console.log('discarded draft');
-    setContributeState(false);
-    setIsDiscardOpen(false);
+  const handleDraftDiscard = () => {
+    setShowDiscardDialog(false);
+    onCancel();
   };
 
-  const handleCancelDiscard = () => {
-    setIsDiscardOpen(false);
+  const handleDiscardCancel = () => {
+    setShowDiscardDialog(false);
   };
 
   return (
     <div>
-      <Transition.Root as={Fragment} show={contributeState}>
+      <Transition.Root as={Fragment} show={show}>
         <Dialog
           as="div"
           className="relative z-10"
-          onClose={() => setContributeState(false)}>
+          onClose={() => {
+            // Todo: save state
+          }}>
           <Transition.Child
             as={Fragment}
             enter="ease-out duration-300"
@@ -65,7 +64,7 @@ export default function ContributeQuestionModal({
                         </Dialog.Title>
                         <div className="mt-2">
                           <ContributeQuestionForm
-                            onDiscard={() => setIsDiscardOpen(true)}
+                            onDiscard={() => setShowDiscardDialog(true)}
                             onSubmit={(data) => {
                               // eslint-disable-next-line no-console
                               console.log(data);
@@ -81,10 +80,10 @@ export default function ContributeQuestionModal({
           </div>
         </Dialog>
       </Transition.Root>
-      <DiscardDraftModal
-        handleCancelDiscard={handleCancelDiscard}
-        handleDiscardDraft={handleDiscardDraft}
-        isDiscardOpen={isDiscardOpen}></DiscardDraftModal>
+      <DiscardDraftDialog
+        show={showDiscardDialog}
+        onCancel={handleDiscardCancel}
+        onDiscard={handleDraftDiscard}></DiscardDraftDialog>
     </div>
   );
 }
diff --git a/apps/portal/src/components/questions/ContributeQuestionForm.tsx b/apps/portal/src/components/questions/ContributeQuestionForm.tsx
index a35e1335..bb974710 100644
--- a/apps/portal/src/components/questions/ContributeQuestionForm.tsx
+++ b/apps/portal/src/components/questions/ContributeQuestionForm.tsx
@@ -7,8 +7,15 @@ import {
   QuestionMarkCircleIcon,
   UserIcon,
 } from '@heroicons/react/24/outline';
-import { Button, HorizontalDivider, TextArea, TextInput } from '@tih/ui';
+import {
+  Button,
+  Collapsible,
+  HorizontalDivider,
+  TextArea,
+  TextInput,
+} from '@tih/ui';
 
+import SimilarQuestionCard from './card/SimilarQuestionCard';
 import Checkbox from './ui-patch/Checkbox';
 
 export type ContributeQuestionData = {
@@ -50,7 +57,7 @@ export default function ContributeQuestionForm({
 
   return (
     <form
-      className="flex flex-col items-stretch justify-center gap-2"
+      className="flex flex-col items-stretch justify-center gap-2 pb-[100px]"
       onSubmit={handleSubmit(onSubmit)}>
       <TextArea
         isLabelHidden={true}
@@ -59,7 +66,7 @@ export default function ContributeQuestionForm({
         rows={5}
         {...register('questionContent')}
       />
-      <div className="flex flex-wrap items-end justify-center gap-x-2">
+      <div className="flex flex-wrap items-end justify-center gap-2">
         <div className="min-w-[150px] flex-1">
           <TextInput
             label="Company"
@@ -85,28 +92,31 @@ export default function ContributeQuestionForm({
           />
         </div>
       </div>
+      <Collapsible defaultOpen={true} label="Additional info">
+        <div className="flex flex-wrap items-end justify-center gap-2">
+          <div className="min-w-[150px] flex-1">
+            <TextInput
+              label="Location"
+              startAddOn={CalendarDaysIcon}
+              startAddOnType="icon"
+              {...register('location')}
+            />
+          </div>
+          <div className="min-w-[150px] flex-1">
+            <TextInput
+              label="Position"
+              startAddOn={UserIcon}
+              startAddOnType="icon"
+              {...register('position')}
+            />
+          </div>
+          {/* <Button label="Contribute" type="submit" variant="primary" /> */}
+        </div>
+      </Collapsible>
       <div className="w-full">
         <HorizontalDivider />
       </div>
-      <div className="flex flex-wrap items-end justify-center gap-x-2">
-        <div className="min-w-[150px] flex-1">
-          <TextInput
-            label="Location"
-            startAddOn={CalendarDaysIcon}
-            startAddOnType="icon"
-            {...register('location')}
-          />
-        </div>
-        <div className="min-w-[150px] flex-1">
-          <TextInput
-            label="Position"
-            startAddOn={UserIcon}
-            startAddOnType="icon"
-            {...register('position')}
-          />
-        </div>
-      </div>
-      <div className="bg-primary-50 px-4 py-3 sm:flex sm:flex-row sm:justify-between sm:px-6">
+      <div className="bg-primary-50 fixed bottom-0 left-0 w-full px-4 py-3 sm:flex sm:flex-row sm:justify-between sm:px-6">
         <div className="mb-1 flex">
           <Checkbox
             checked={canSubmit}
@@ -128,6 +138,20 @@ export default function ContributeQuestionForm({
             variant="primary"></Button>
         </div>
       </div>
+      <h1>Are these questions the same as yours?</h1>
+      <div>
+        <SimilarQuestionCard
+          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"
+          location="Menlo Park, CA"
+          role="Senior Engineering Manager"
+          similarCount={0}
+          timestamp="Today"
+          onSimilarQuestionClick={() => {
+            // eslint-disable-next-line no-console
+            console.log('hi!');
+          }}
+        />
+      </div>
     </form>
   );
 }
diff --git a/apps/portal/src/components/questions/DiscardDraftModal.tsx b/apps/portal/src/components/questions/DiscardDraftDialog.tsx
similarity index 87%
rename from apps/portal/src/components/questions/DiscardDraftModal.tsx
rename to apps/portal/src/components/questions/DiscardDraftDialog.tsx
index 053c7986..a0921cfa 100644
--- a/apps/portal/src/components/questions/DiscardDraftModal.tsx
+++ b/apps/portal/src/components/questions/DiscardDraftDialog.tsx
@@ -2,19 +2,19 @@ import { Fragment } from 'react';
 import { Dialog, Transition } from '@headlessui/react';
 import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
 
-export type DiscardDraftModalProps = {
-  handleCancelDiscard: () => void;
-  handleDiscardDraft: () => void;
-  isDiscardOpen: boolean;
+export type DiscardDraftDialogProps = {
+  onCancel: () => void;
+  onDiscard: () => void;
+  show: boolean;
 };
-export default function DiscardDraftModal({
-  isDiscardOpen,
-  handleCancelDiscard,
-  handleDiscardDraft,
-}: DiscardDraftModalProps) {
+export default function DiscardDraftDialog({
+  show,
+  onCancel,
+  onDiscard,
+}: DiscardDraftDialogProps) {
   return (
-    <Transition.Root as={Fragment} show={isDiscardOpen}>
-      <Dialog as="div" className="relative z-10" onClose={handleCancelDiscard}>
+    <Transition.Root as={Fragment} show={show}>
+      <Dialog as="div" className="relative z-10" onClose={onCancel}>
         <Transition.Child
           as={Fragment}
           enter="ease-out duration-300"
@@ -62,13 +62,13 @@ export default function DiscardDraftModal({
                   <button
                     className="inline-flex w-full justify-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
                     type="button"
-                    onClick={handleDiscardDraft}>
+                    onClick={onDiscard}>
                     Discard
                   </button>
                   <button
                     className="mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
                     type="button"
-                    onClick={handleCancelDiscard}>
+                    onClick={onCancel}>
                     Cancel
                   </button>
                 </div>
diff --git a/apps/portal/src/components/questions/QuestionOverviewCard.tsx b/apps/portal/src/components/questions/QuestionOverviewCard.tsx
deleted file mode 100644
index 31435c04..00000000
--- a/apps/portal/src/components/questions/QuestionOverviewCard.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import {
-  ChatBubbleBottomCenterTextIcon,
-  ChevronDownIcon,
-  ChevronUpIcon,
-  EyeIcon,
-} from '@heroicons/react/24/outline';
-import { Badge, Button } from '@tih/ui';
-
-export type QuestionOverviewCardProps = {
-  answerCount: number;
-  content: string;
-  location: string;
-  role: string;
-  similarCount: number;
-  timestamp: string;
-  upvoteCount: number;
-};
-
-export default function QuestionOverviewCard({
-  answerCount,
-  content,
-  similarCount,
-  upvoteCount,
-  timestamp,
-  role,
-  location,
-}: QuestionOverviewCardProps) {
-  return (
-    <article className="flex gap-2 rounded-md border border-slate-300 p-4">
-      <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>
-      <div className="flex flex-col gap-2">
-        <div className="flex items-center gap-2 text-slate-500">
-          <Badge label="Technical" variant="primary" />
-          <p className="text-xs">
-            {timestamp} · {location} · {role}
-          </p>
-        </div>
-        <p className="line-clamp-2 text-ellipsis">{content}</p>
-        <div className="flex gap-2">
-          <Button
-            addonPosition="start"
-            icon={ChatBubbleBottomCenterTextIcon}
-            label={`${answerCount} answers`}
-            size="sm"
-            variant="tertiary"
-          />
-          <Button
-            addonPosition="start"
-            icon={EyeIcon}
-            label={`${similarCount} received this`}
-            size="sm"
-            variant="tertiary"
-          />
-        </div>
-      </div>
-    </article>
-  );
-}
diff --git a/apps/portal/src/components/questions/card/QuestionCard.tsx b/apps/portal/src/components/questions/card/QuestionCard.tsx
new file mode 100644
index 00000000..821bfd28
--- /dev/null
+++ b/apps/portal/src/components/questions/card/QuestionCard.tsx
@@ -0,0 +1,122 @@
+import {
+  ChatBubbleBottomCenterTextIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+  EyeIcon,
+} from '@heroicons/react/24/outline';
+import { Badge, Button } from '@tih/ui';
+
+type UpvoteProps =
+  | {
+      showVoteButtons: true;
+      upvoteCount: number;
+    }
+  | {
+      showVoteButtons?: false;
+      upvoteCount?: never;
+    };
+
+type StatisticsProps =
+  | {
+      answerCount: number;
+      showUserStatistics: true;
+    }
+  | {
+      answerCount?: never;
+      showUserStatistics?: false;
+    };
+
+type ActionButtonProps =
+  | {
+      actionButtonLabel: string;
+      onActionButtonClick: () => void;
+      showActionButton: true;
+    }
+  | {
+      actionButtonLabel?: never;
+      onActionButtonClick?: never;
+      showActionButton?: false;
+    };
+
+export type QuestionCardProps = ActionButtonProps &
+  StatisticsProps &
+  UpvoteProps & {
+    content: string;
+    location: string;
+    role: string;
+    similarCount: number;
+    timestamp: string;
+  };
+
+export default function QuestionCard({
+  answerCount,
+  content,
+  similarCount,
+  showVoteButtons,
+  showUserStatistics,
+  showActionButton,
+  actionButtonLabel,
+  onActionButtonClick,
+  upvoteCount,
+  timestamp,
+  role,
+  location,
+}: QuestionCardProps) {
+  return (
+    <article className="flex gap-2 rounded-md border border-slate-300 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>
+      )}
+      <div className="flex flex-col gap-2">
+        <div className="flex items-start justify-between">
+          <div className="flex items-center gap-2 text-slate-500">
+            <Badge label="Technical" variant="primary" />
+            <p className="text-xs">
+              {timestamp} · {location} · {role}
+            </p>
+          </div>
+          {showActionButton && (
+            <Button
+              label={actionButtonLabel}
+              variant="tertiary"
+              onClick={onActionButtonClick}
+            />
+          )}
+        </div>
+        <p className="line-clamp-2 text-ellipsis">{content}</p>
+        {showUserStatistics && (
+          <div className="flex gap-2">
+            <Button
+              addonPosition="start"
+              icon={ChatBubbleBottomCenterTextIcon}
+              label={`${answerCount} answers`}
+              size="sm"
+              variant="tertiary"
+            />
+            <Button
+              addonPosition="start"
+              icon={EyeIcon}
+              label={`${similarCount} received this`}
+              size="sm"
+              variant="tertiary"
+            />
+          </div>
+        )}
+      </div>
+    </article>
+  );
+}
diff --git a/apps/portal/src/components/questions/card/QuestionOverviewCard.tsx b/apps/portal/src/components/questions/card/QuestionOverviewCard.tsx
new file mode 100644
index 00000000..0c61ece3
--- /dev/null
+++ b/apps/portal/src/components/questions/card/QuestionOverviewCard.tsx
@@ -0,0 +1,28 @@
+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 default function QuestionOverviewCard(props: QuestionOverviewCardProps) {
+  return (
+    <QuestionCard
+      {...props}
+      showActionButton={false}
+      showUserStatistics={true}
+      showVoteButtons={true}
+    />
+  );
+}
diff --git a/apps/portal/src/components/questions/card/SimilarQuestionCard.tsx b/apps/portal/src/components/questions/card/SimilarQuestionCard.tsx
new file mode 100644
index 00000000..0b591fb8
--- /dev/null
+++ b/apps/portal/src/components/questions/card/SimilarQuestionCard.tsx
@@ -0,0 +1,33 @@
+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'
+  >
+> & {
+  onSimilarQuestionClick: () => void;
+};
+
+export default function SimilarQuestionCard(props: SimilarQuestionCardProps) {
+  const { onSimilarQuestionClick, ...rest } = props;
+  return (
+    <QuestionCard
+      {...rest}
+      actionButtonLabel="Yes, this is my question"
+      showActionButton={true}
+      onActionButtonClick={onSimilarQuestionClick}
+    />
+  );
+}
diff --git a/apps/portal/src/pages/questions/index.tsx b/apps/portal/src/pages/questions/index.tsx
index ee7b3512..59668f52 100644
--- a/apps/portal/src/pages/questions/index.tsx
+++ b/apps/portal/src/pages/questions/index.tsx
@@ -1,9 +1,9 @@
 import { useMemo, useState } from 'react';
 
+import QuestionOverviewCard from '~/components/questions/card/QuestionOverviewCard';
 import ContributeQuestionCard from '~/components/questions/ContributeQuestionCard';
 import type { FilterOptions } from '~/components/questions/filter/FilterSection';
 import FilterSection from '~/components/questions/filter/FilterSection';
-import QuestionOverviewCard from '~/components/questions/QuestionOverviewCard';
 import QuestionSearchBar from '~/components/questions/QuestionSearchBar';
 
 type FilterChoices = Array<Omit<FilterOptions, 'checked'>>;