From 61a8669b20d353e30a921fefcc407e96b3f12a46 Mon Sep 17 00:00:00 2001
From: Jeff Sieu <jeffsy00@gmail.com>
Date: Mon, 10 Oct 2022 04:08:04 +0800
Subject: [PATCH] [questions][fix] show question type in badge

---
 .../src/components/questions/FullScreenSpinner.tsx |  9 +++++++++
 .../components/questions/card/FullQuestionCard.tsx | 14 +++-----------
 .../src/components/questions/card/QuestionCard.tsx |  4 +++-
 .../answer/[answerId]/[answerSlug]/index.tsx       |  4 ++--
 .../[questionId]/[questionSlug]/index.tsx          |  9 +++------
 apps/portal/src/pages/questions/index.tsx          |  1 +
 .../src/server/router/questions-question-router.ts |  2 ++
 apps/portal/src/types/questions.d.ts               |  1 +
 8 files changed, 24 insertions(+), 20 deletions(-)
 create mode 100644 apps/portal/src/components/questions/FullScreenSpinner.tsx

diff --git a/apps/portal/src/components/questions/FullScreenSpinner.tsx b/apps/portal/src/components/questions/FullScreenSpinner.tsx
new file mode 100644
index 00000000..02e6e02f
--- /dev/null
+++ b/apps/portal/src/components/questions/FullScreenSpinner.tsx
@@ -0,0 +1,9 @@
+import { Spinner } from '@tih/ui';
+
+export default function FullScreenSpinner() {
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <Spinner size="lg" />
+    </div>
+  );
+}
diff --git a/apps/portal/src/components/questions/card/FullQuestionCard.tsx b/apps/portal/src/components/questions/card/FullQuestionCard.tsx
index f0dc1e4f..bc6f5f30 100644
--- a/apps/portal/src/components/questions/card/FullQuestionCard.tsx
+++ b/apps/portal/src/components/questions/card/FullQuestionCard.tsx
@@ -19,6 +19,7 @@ export type FullQuestionCardProps = UpvoteProps & {
   receivedCount: number;
   role: string;
   timestamp: string;
+  type: string;
 };
 
 export default function FullQuestionCard({
@@ -29,6 +30,7 @@ export default function FullQuestionCard({
   timestamp,
   role,
   location,
+  type,
 }: FullQuestionCardProps) {
   const altText = company + ' logo';
   return (
@@ -41,7 +43,7 @@ export default function FullQuestionCard({
         </div>
         <div className="flex items-baseline justify-between">
           <div className="flex items-center gap-2 text-slate-500">
-            <Badge label="Technical" variant="primary" />
+            <Badge label={type} variant="primary" />
             <p className="text-xs">
               {timestamp} · {location} · {role}
             </p>
@@ -53,14 +55,4 @@ export default function FullQuestionCard({
       </div>
     </article>
   );
-
-  // Return href ? (
-  //   <a
-  //     className="ring-primary-500 rounded-md hover:bg-slate-50 focus:ring-2 focus-visible:outline-none active:bg-slate-100"
-  //     href={href}>
-  //     {mainCard}
-  //   </a>
-  // ) : (
-  //   mainCard
-  // );
 }
diff --git a/apps/portal/src/components/questions/card/QuestionCard.tsx b/apps/portal/src/components/questions/card/QuestionCard.tsx
index 2c034b9f..75e95dd2 100644
--- a/apps/portal/src/components/questions/card/QuestionCard.tsx
+++ b/apps/portal/src/components/questions/card/QuestionCard.tsx
@@ -47,12 +47,14 @@ export type QuestionCardProps = ActionButtonProps &
     receivedCount: number;
     role: string;
     timestamp: string;
+    type: string;
   };
 
 export default function QuestionCard({
   answerCount,
   content,
   // ReceivedCount,
+  type,
   showVoteButtons,
   showUserStatistics,
   showActionButton,
@@ -69,7 +71,7 @@ export default function QuestionCard({
       <div className="flex flex-col gap-2">
         <div className="flex items-baseline justify-between">
           <div className="flex items-center gap-2 text-slate-500">
-            <Badge label="Technical" variant="primary" />
+            <Badge label={type} variant="primary" />
             <p className="text-xs">
               {timestamp} · {location} · {role}
             </p>
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
index b2251a37..aac0a7a2 100644
--- 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
@@ -5,6 +5,7 @@ import { Button, Select, TextArea } from '@tih/ui';
 
 import FullAnswerCard from '~/components/questions/card/FullAnswerCard';
 import CommentListItem from '~/components/questions/CommentListItem';
+import FullScreenSpinner from '~/components/questions/FullScreenSpinner';
 
 import {
   SAMPLE_ANSWER,
@@ -67,8 +68,7 @@ export default function QuestionPage() {
   };
 
   if (!answer) {
-    // TODO: Make this look nicer
-    return <div>Answer not found</div>;
+    return <FullScreenSpinner />;
   }
 
   return (
diff --git a/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx b/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx
index 387a62f9..92149e81 100644
--- a/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx
+++ b/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx
@@ -1,11 +1,12 @@
 import { useRouter } from 'next/router';
 import { useForm } from 'react-hook-form';
 import { ArrowSmallLeftIcon } from '@heroicons/react/24/outline';
-import { Button, Collapsible, Select, Spinner, TextArea } from '@tih/ui';
+import { Button, Collapsible, Select, TextArea } from '@tih/ui';
 
 import AnswerCard from '~/components/questions/card/AnswerCard';
 import FullQuestionCard from '~/components/questions/card/FullQuestionCard';
 import CommentListItem from '~/components/questions/CommentListItem';
+import FullScreenSpinner from '~/components/questions/FullScreenSpinner';
 
 import {
   SAMPLE_ANSWER,
@@ -96,11 +97,7 @@ export default function QuestionPage() {
   };
 
   if (!question) {
-    return (
-      <div className="flex h-full w-full items-center justify-center">
-        <Spinner size="lg" />
-      </div>
-    );
+    return <FullScreenSpinner />;
   }
 
   return (
diff --git a/apps/portal/src/pages/questions/index.tsx b/apps/portal/src/pages/questions/index.tsx
index 97a8ed52..331ef57b 100644
--- a/apps/portal/src/pages/questions/index.tsx
+++ b/apps/portal/src/pages/questions/index.tsx
@@ -248,6 +248,7 @@ export default function QuestionsHomePage() {
                   receivedCount={0} // TODO: Implement received count
                   role={question.role}
                   timestamp={question.seenAt.toLocaleDateString()}
+                  type={question.type}
                   upvoteCount={question.numVotes}
                 />
               ))}
diff --git a/apps/portal/src/server/router/questions-question-router.ts b/apps/portal/src/server/router/questions-question-router.ts
index 55bf5981..bd65474a 100644
--- a/apps/portal/src/server/router/questions-question-router.ts
+++ b/apps/portal/src/server/router/questions-question-router.ts
@@ -88,6 +88,7 @@ export const questionsQuestionRouter = createProtectedRouter()
             numVotes: votes,
             role: data.encounters[0].role ?? 'Unknown role',
             seenAt: data.encounters[0].seenAt,
+            type: data.questionType,
             updatedAt: data.updatedAt,
             user: data.user?.name ?? '',
           };
@@ -160,6 +161,7 @@ export const questionsQuestionRouter = createProtectedRouter()
         numVotes: votes,
         role: questionData.encounters[0].role ?? 'Unknown role',
         seenAt: questionData.encounters[0].seenAt,
+        type: questionData.questionType,
         updatedAt: questionData.updatedAt,
         user: questionData.user?.name ?? '',
       };
diff --git a/apps/portal/src/types/questions.d.ts b/apps/portal/src/types/questions.d.ts
index 977d38c1..3797bf38 100644
--- a/apps/portal/src/types/questions.d.ts
+++ b/apps/portal/src/types/questions.d.ts
@@ -9,6 +9,7 @@ export type Question = {
   numVotes: number;
   role: string;
   seenAt: Date;
+  type: stringl;
   updatedAt: Date;
   user: string;
 };