From e8ba344ecb8662cdf48df26829c93b0da3677604 Mon Sep 17 00:00:00 2001
From: Jeff Sieu <jeffsy00@gmail.com>
Date: Fri, 21 Oct 2022 12:36:23 +0800
Subject: [PATCH] [questions][ui] updates

---
 .../questions/card/QuestionCard.tsx           |  35 ++-
 .../questions/card/QuestionListCard.tsx       |   2 +-
 .../forms/CreateQuestionEncounterForm.tsx     | 201 +++++++++---------
 .../questions/typeahead/ExpandedTypeahead.tsx |   2 +-
 .../src/utils/questions/RequireAllOrNone.ts   |   1 +
 5 files changed, 119 insertions(+), 122 deletions(-)
 create mode 100644 apps/portal/src/utils/questions/RequireAllOrNone.ts

diff --git a/apps/portal/src/components/questions/card/QuestionCard.tsx b/apps/portal/src/components/questions/card/QuestionCard.tsx
index 55c87957..effe2190 100644
--- a/apps/portal/src/components/questions/card/QuestionCard.tsx
+++ b/apps/portal/src/components/questions/card/QuestionCard.tsx
@@ -112,17 +112,7 @@ export default function QuestionCard({
   const [showReceivedForm, setShowReceivedForm] = useState(false);
   const { handleDownvote, handleUpvote, vote } = useQuestionVote(questionId);
   const hoverClass = showHover ? 'hover:bg-slate-50' : '';
-  const cardContent = showReceivedForm ? (
-    <CreateQuestionEncounterForm
-      onCancel={() => {
-        setShowReceivedForm(false);
-      }}
-      onSubmit={(data) => {
-        onReceivedSubmit?.(data);
-        setShowReceivedForm(false);
-      }}
-    />
-  ) : (
+  const cardContent = (
     <>
       {showVoteButtons && (
         <VotingButtons
@@ -132,7 +122,7 @@ export default function QuestionCard({
           onUpvote={handleUpvote}
         />
       )}
-      <div className="flex flex-col gap-2">
+      <div className="flex flex-col items-start gap-2">
         <div className="flex items-baseline justify-between">
           <div className="flex items-baseline gap-2 text-slate-500">
             <Badge label={company} variant="primary" />
@@ -150,12 +140,10 @@ export default function QuestionCard({
             />
           )}
         </div>
-        <div className="ml-2">
-          <p className={clsx(truncateContent && 'line-clamp-2 text-ellipsis')}>
-            {content}
-          </p>
-        </div>
-        {(showAnswerStatistics || showReceivedStatistics) && (
+        <p className={clsx(truncateContent && 'line-clamp-2 text-ellipsis')}>
+          {content}
+        </p>
+        {!showReceivedForm && (showAnswerStatistics || showReceivedStatistics) && (
           <div className="flex gap-2">
             {showAnswerStatistics && (
               <Button
@@ -190,6 +178,17 @@ export default function QuestionCard({
             )}
           </div>
         )}
+        {showReceivedForm && (
+          <CreateQuestionEncounterForm
+            onCancel={() => {
+              setShowReceivedForm(false);
+            }}
+            onSubmit={(data) => {
+              onReceivedSubmit?.(data);
+              setShowReceivedForm(false);
+            }}
+          />
+        )}
       </div>
     </>
   );
diff --git a/apps/portal/src/components/questions/card/QuestionListCard.tsx b/apps/portal/src/components/questions/card/QuestionListCard.tsx
index 2921a117..d340a2ea 100644
--- a/apps/portal/src/components/questions/card/QuestionListCard.tsx
+++ b/apps/portal/src/components/questions/card/QuestionListCard.tsx
@@ -21,7 +21,7 @@ export type QuestionListCardProps = Omit<
 function QuestionListCardWithoutHref(props: QuestionListCardProps) {
   return (
     <QuestionCard
-      {...props}
+      {...(props as any)}
       showActionButton={false}
       showAnswerStatistics={false}
       showDeleteButton={true}
diff --git a/apps/portal/src/components/questions/forms/CreateQuestionEncounterForm.tsx b/apps/portal/src/components/questions/forms/CreateQuestionEncounterForm.tsx
index 40dc05be..bd4dd4d3 100644
--- a/apps/portal/src/components/questions/forms/CreateQuestionEncounterForm.tsx
+++ b/apps/portal/src/components/questions/forms/CreateQuestionEncounterForm.tsx
@@ -2,7 +2,6 @@ import { startOfMonth } from 'date-fns';
 import { useState } from 'react';
 import { Button } from '@tih/ui';
 
-import CompaniesTypeahead from '~/components/shared/CompaniesTypeahead';
 import type { Month } from '~/components/shared/MonthYearPicker';
 import MonthYearPicker from '~/components/shared/MonthYearPicker';
 
@@ -36,115 +35,113 @@ export default function CreateQuestionEncounterForm({
   );
 
   return (
-    <div>
-      <Button
-        label="Cancel"
-        variant="tertiary"
-        onClick={(event) => {
-          event.preventDefault();
-          onCancel();
-        }}
-      />
-      <div className="flex items-center gap-2">
-        <p className="font-md text-md text-slate-600">I saw this question at</p>
-        {step === 0 && (
-          <div>
-            <CompanyTypeahead
-              placeholder="Other company"
-              suggestedCount={3}
-              onSuggestionClick={({ value: company }) => {
-                setSelectedCompany(company);
-                setStep(step + 1);
-              }}
-              isLabelHidden={true}
-              onSelect={({ value: company }) => {
-                setSelectedCompany(company);
-              }}
-            />
-          </div>
-        )}
-        {step === 1 && (
-          <div>
-            <LocationTypeahead
-              suggestedCount={3}
-              onSuggestionClick={({ value: location }) => {
-                setSelectedLocation(location);
-                setStep(step + 1);
-              }}
-              isLabelHidden={true}
-              placeholder="Other location"
-              // eslint-disable-next-line @typescript-eslint/no-empty-function
-              onQueryChange={() => {}}
-              onSelect={({ value: location }) => {
-                setSelectedLocation(location);
-              }}
-            />
-          </div>
-        )}
-        {step === 2 && (
-          <div>
-            <RoleTypeahead
-              isLabelHidden={true}
-              suggestedCount={3}
-              onSuggestionClick={({ value: role }) => {
-                setSelectedRole(role);
-                setStep(step + 1);
-              }}
-              placeholder="Other role"
-              // eslint-disable-next-line @typescript-eslint/no-empty-function
-              onQueryChange={() => {}}
-              onSelect={({ value: role }) => {
-                setSelectedRole(role);
-              }}
-            />
-          </div>
-        )}
-        {step === 3 && (
-          <MonthYearPicker
-            yearLabel={''}
-            monthLabel={''}
-            value={{
-              month: ((selectedDate?.getMonth() ?? 0) + 1) as Month,
-              year: selectedDate?.getFullYear() as number,
+    <div className="flex items-center gap-2">
+      <p className="font-md text-md text-slate-600">I saw this question at</p>
+      {step === 0 && (
+        <div>
+          <CompanyTypeahead
+            placeholder="Other company"
+            suggestedCount={3}
+            onSuggestionClick={({ value: company }) => {
+              setSelectedCompany(company);
+              setStep(step + 1);
             }}
-            onChange={(value) => {
-              setSelectedDate(
-                startOfMonth(new Date(value.year, value.month - 1)),
-              );
+            isLabelHidden={true}
+            onSelect={({ value: company }) => {
+              setSelectedCompany(company);
             }}
           />
-        )}
-        {step < 3 && (
-          <Button
-            label="Next"
-            variant="primary"
-            onClick={() => {
+        </div>
+      )}
+      {step === 1 && (
+        <div>
+          <LocationTypeahead
+            suggestedCount={3}
+            onSuggestionClick={({ value: location }) => {
+              setSelectedLocation(location);
               setStep(step + 1);
             }}
+            isLabelHidden={true}
+            placeholder="Other location"
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
+            onQueryChange={() => {}}
+            onSelect={({ value: location }) => {
+              setSelectedLocation(location);
+            }}
           />
-        )}
-        {step === 3 && (
-          <Button
-            label="Submit"
-            variant="primary"
-            onClick={() => {
-              if (
-                selectedCompany &&
-                selectedLocation &&
-                selectedRole &&
-                selectedDate
-              ) {
-                onSubmit({
-                  company: selectedCompany,
-                  location: selectedLocation,
-                  role: selectedRole,
-                  seenAt: selectedDate,
-                });
-              }
+        </div>
+      )}
+      {step === 2 && (
+        <div>
+          <RoleTypeahead
+            isLabelHidden={true}
+            suggestedCount={3}
+            onSuggestionClick={({ value: role }) => {
+              setSelectedRole(role);
+              setStep(step + 1);
+            }}
+            placeholder="Other role"
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
+            onQueryChange={() => {}}
+            onSelect={({ value: role }) => {
+              setSelectedRole(role);
             }}
           />
-        )}
-      </div>
+        </div>
+      )}
+      {step === 3 && (
+        <MonthYearPicker
+          yearLabel={''}
+          monthLabel={''}
+          value={{
+            month: ((selectedDate?.getMonth() ?? 0) + 1) as Month,
+            year: selectedDate?.getFullYear() as number,
+          }}
+          onChange={(value) => {
+            setSelectedDate(
+              startOfMonth(new Date(value.year, value.month - 1)),
+            );
+          }}
+        />
+      )}
+      {step < 3 && (
+        <Button
+          label="Next"
+          variant="primary"
+          onClick={() => {
+            setStep(step + 1);
+          }}
+        />
+      )}
+      {step === 3 && (
+        <Button
+          label="Submit"
+          variant="primary"
+          onClick={() => {
+            if (
+              selectedCompany &&
+              selectedLocation &&
+              selectedRole &&
+              selectedDate
+            ) {
+              onSubmit({
+                company: selectedCompany,
+                location: selectedLocation,
+                role: selectedRole,
+                seenAt: selectedDate,
+              });
+            }
+          }}
+        />
+      )}
+      <Button
+        label="Cancel"
+        variant="tertiary"
+        onClick={(event) => {
+          event.preventDefault();
+          onCancel();
+        }}
+      />
     </div>
   );
 }
diff --git a/apps/portal/src/components/questions/typeahead/ExpandedTypeahead.tsx b/apps/portal/src/components/questions/typeahead/ExpandedTypeahead.tsx
index 05d34195..b06f49b7 100644
--- a/apps/portal/src/components/questions/typeahead/ExpandedTypeahead.tsx
+++ b/apps/portal/src/components/questions/typeahead/ExpandedTypeahead.tsx
@@ -1,7 +1,7 @@
 import type { ComponentProps } from 'react';
 import { Button, Typeahead } from '@tih/ui';
 
-type RequireAllOrNone<T> = T | { [K in keyof T]?: never };
+import type { RequireAllOrNone } from '~/utils/questions/RequireAllOrNone';
 
 type TypeaheadProps = ComponentProps<typeof Typeahead>;
 type TypeaheadOption = TypeaheadProps['options'][number];
diff --git a/apps/portal/src/utils/questions/RequireAllOrNone.ts b/apps/portal/src/utils/questions/RequireAllOrNone.ts
new file mode 100644
index 00000000..82c8b0e5
--- /dev/null
+++ b/apps/portal/src/utils/questions/RequireAllOrNone.ts
@@ -0,0 +1 @@
+export type RequireAllOrNone<T> = T | { [K in keyof T]?: never };