[questions][ui] Full UI for questions/answer/comment (#346)

* [questions][ui] Add DiscardDraftModal

* [questions][ui] add question draft dialog form

* [questions][ui] refactor bottom contribute bar

* [questions][ui] landing page

* [questions][ui] add similar question card

* [questions][ui] use TIH dialog for discard

* [questions][ui] add aria-hidden for select label

* [questions][ui] extract useFormRegister hook

* [questions][ui] change landing page to component

* [questions][ui] load filter from query param

* [question][chore] add constants.ts

* [questions][ui] add app logo

* [questions][ui] remove form

* [questions][ui] fix dialog closing

* [questions][chore] minor changes

* [questions][ui] radio button

* [questions][ui] add vertical scrolling

* [questions][ui] Question age url param change

* [questions][chore] refactor and add in todo

* [questions][ui] contribute card clickable

* [questions][ui] landing page github stars

* [questions][ui] edit css for question card

* [question][ui] add question detail page

* [questions][ui] remove navbar import

* [questions][ui] css changes

* [questions][ui] hide sidebar

* [questions][ui] contribute questions form ui

* [questions][ui] question page

* [questions][bug] remove button

* [questions][ui] voting button size

* [questions][chore] add dummy data, refactor

* [questions][ui] answer card

* [questions][chore] add sample data

* [questions][ui] add hover

* [questions][ui] clean up old href

* [questions][ui] add comments & commments page

* [question][feat] cache filter options to localStorage

* [questions][fix] fix index refreshing constantly

* [questions][ui] set fixed sample date

Co-authored-by: Jeff Sieu <jeffsy00@gmail.com>

apps/portal/src/components/questions/ContributeQuestionCard.tsx

@@ -1,102 +1,74 @@
-import type { ComponentProps, ForwardedRef } from 'react';
 import { useState } from 'react';
-import { forwardRef } from 'react';
-import type { UseFormRegisterReturn } from 'react-hook-form';
-import { useForm } from 'react-hook-form';
 import {
   BuildingOffice2Icon,
   CalendarDaysIcon,
   QuestionMarkCircleIcon,
 } from '@heroicons/react/24/outline';
-import { Button, TextInput } from '@tih/ui';
+import { TextInput } from '@tih/ui';
 
-import ContributeQuestionModal from './ContributeQuestionModal';
+import ContributeQuestionDialog from './ContributeQuestionDialog';
 
-export type ContributeQuestionData = {
-  company: string;
-  date: Date;
-  questionContent: string;
-  questionType: string;
-};
+export default function ContributeQuestionCard() {
+  const [showDraftDialog, setShowDraftDialog] = useState(false);
 
-type TextInputProps = ComponentProps<typeof TextInput>;
+  const handleDraftDialogCancel = () => {
+    setShowDraftDialog(false);
+  };
 
-type FormTextInputProps = Omit<TextInputProps, 'onChange'> &
-  Pick<UseFormRegisterReturn<never>, 'onChange'>;
+  const handleOpenContribute = () => {
+    setShowDraftDialog(true);
+  };
 
-function FormTextInputWithRef(
-  props: FormTextInputProps,
-  ref?: ForwardedRef<HTMLInputElement>,
-) {
-  const { onChange, ...rest } = props;
   return (
-    <TextInput
-      {...(rest as TextInputProps)}
-      ref={ref}
-      onChange={(_, event) => onChange(event)}
-    />
-  );
-}
-
-const FormTextInput = forwardRef(FormTextInputWithRef);
-
-export type ContributeQuestionCardProps = {
-  onSubmit: (data: ContributeQuestionData) => void;
-};
-
-export default function ContributeQuestionCard({
-  onSubmit,
-}: ContributeQuestionCardProps) {
-  const { register, handleSubmit } = useForm<ContributeQuestionData>();
-  const [isOpen, setOpen] = useState<boolean>(false);
-  return (
-    <>
-      <form
-        className="flex flex-col items-stretch justify-center gap-2 rounded-md border border-slate-300 p-4"
-        onSubmit={handleSubmit(onSubmit)}>
-        <FormTextInput
+    <div>
+      <button
+        className="flex flex-col items-stretch justify-center gap-2 rounded-md border border-slate-300 bg-white p-4 text-left hover:bg-gray-100"
+        type="button"
+        onClick={handleOpenContribute}>
+        <TextInput
+          disabled={true}
           isLabelHidden={true}
           label="Question"
           placeholder="Contribute a question"
-          {...register('questionContent')}
+          onChange={handleOpenContribute}
         />
         <div className="flex items-end justify-center gap-x-2">
           <div className="min-w-[150px] flex-1">
-            <FormTextInput
+            <TextInput
+              disabled={true}
               label="Company"
               startAddOn={BuildingOffice2Icon}
               startAddOnType="icon"
-              {...register('company')}
+              onChange={handleOpenContribute}
             />
           </div>
           <div className="min-w-[150px] flex-1">
-            <FormTextInput
+            <TextInput
+              disabled={true}
               label="Question type"
               startAddOn={QuestionMarkCircleIcon}
               startAddOnType="icon"
-              {...register('questionType')}
+              onChange={handleOpenContribute}
             />
           </div>
           <div className="min-w-[150px] flex-1">
-            <FormTextInput
+            <TextInput
+              disabled={true}
               label="Date"
               startAddOn={CalendarDaysIcon}
               startAddOnType="icon"
-              {...register('date')}
+              onChange={handleOpenContribute}
             />
           </div>
-          <Button
-            label="Contribute"
-            type="submit"
-            variant="primary"
-            onClick={() => setOpen(true)}
-          />
+          <h1 className="bg-primary-600 hover:bg-primary-700 rounded-full px-3 py-2 text-white">
+            Contribute
+          </h1>
         </div>
-      </form>
-
-      <ContributeQuestionModal
-        contributeState={isOpen}
-        setContributeState={setOpen}></ContributeQuestionModal>
-    </>
+      </button>
+      <ContributeQuestionDialog
+        show={showDraftDialog}
+        onCancel={handleDraftDialogCancel}
+      />
+    </div>
   );
 }