From bd3a54608490bcc0837fb8f2877361666365f19b Mon Sep 17 00:00:00 2001
From: Jeff Sieu <jeffsy00@gmail.com>
Date: Fri, 28 Oct 2022 14:08:08 +0800
Subject: [PATCH] [questions][fix] update roles typeahead

---
 .../questions/typeahead/RoleTypeahead.tsx     | 10 ++-
 .../[questionId]/[questionSlug]/index.tsx     | 16 ++++-
 apps/portal/src/pages/questions/browse.tsx    | 67 ++++++++++---------
 apps/portal/src/pages/questions/lists.tsx     | 64 +++++++++---------
 .../questions/relabelQuestionAggregates.ts    | 26 +++++++
 5 files changed, 116 insertions(+), 67 deletions(-)
 create mode 100644 apps/portal/src/utils/questions/relabelQuestionAggregates.ts

diff --git a/apps/portal/src/components/questions/typeahead/RoleTypeahead.tsx b/apps/portal/src/components/questions/typeahead/RoleTypeahead.tsx
index d40d6678..60dd3ffa 100644
--- a/apps/portal/src/components/questions/typeahead/RoleTypeahead.tsx
+++ b/apps/portal/src/components/questions/typeahead/RoleTypeahead.tsx
@@ -1,13 +1,21 @@
-import { ROLES } from '~/utils/questions/constants';
+import { JobTitleLabels } from '~/components/shared/JobTitles';
 
 import type { ExpandedTypeaheadProps } from './ExpandedTypeahead';
 import ExpandedTypeahead from './ExpandedTypeahead';
+import type { FilterChoices } from '../filter/FilterSection';
 
 export type RoleTypeaheadProps = Omit<
   ExpandedTypeaheadProps,
   'label' | 'onQueryChange' | 'options'
 >;
 
+const ROLES: FilterChoices = Object.entries(JobTitleLabels).map(
+  ([slug, label]) => ({
+    id: slug,
+    label,
+    value: slug,
+  }),
+);
 export default function RoleTypeahead(props: RoleTypeaheadProps) {
   return (
     <ExpandedTypeahead
diff --git a/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx b/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx
index c9be44ce..3d277235 100644
--- a/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx
+++ b/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx
@@ -1,5 +1,6 @@
 import Head from 'next/head';
 import { useRouter } from 'next/router';
+import { useMemo } from 'react';
 import { useForm } from 'react-hook-form';
 import { ArrowSmallLeftIcon } from '@heroicons/react/24/outline';
 import { Button, Collapsible, Select, TextArea } from '@tih/ui';
@@ -11,6 +12,7 @@ import FullScreenSpinner from '~/components/questions/FullScreenSpinner';
 
 import { APP_TITLE } from '~/utils/questions/constants';
 import createSlug from '~/utils/questions/createSlug';
+import relabelQuestionAggregates from '~/utils/questions/relabelQuestionAggregates';
 import { useFormRegister } from '~/utils/questions/useFormRegister';
 import { trpc } from '~/utils/trpc';
 
@@ -52,6 +54,14 @@ export default function QuestionPage() {
     { questionId: questionId as string },
   ]);
 
+  const relabeledAggregatedEncounters = useMemo(() => {
+    if (!aggregatedEncounters) {
+      return aggregatedEncounters;
+    }
+
+    return relabelQuestionAggregates(aggregatedEncounters);
+  }, [aggregatedEncounters]);
+
   const utils = trpc.useContext();
 
   const { data: comments } = trpc.useQuery([
@@ -138,11 +148,11 @@ export default function QuestionPage() {
           <div className="flex max-w-7xl flex-1 flex-col gap-2">
             <FullQuestionCard
               {...question}
-              companies={aggregatedEncounters?.companyCounts ?? {}}
-              locations={aggregatedEncounters?.locationCounts ?? {}}
+              companies={relabeledAggregatedEncounters?.companyCounts ?? {}}
+              locations={relabeledAggregatedEncounters?.locationCounts ?? {}}
               questionId={question.id}
               receivedCount={undefined}
-              roles={aggregatedEncounters?.roleCounts ?? {}}
+              roles={relabeledAggregatedEncounters?.roleCounts ?? {}}
               timestamp={question.seenAt.toLocaleDateString(undefined, {
                 month: 'short',
                 year: 'numeric',
diff --git a/apps/portal/src/pages/questions/browse.tsx b/apps/portal/src/pages/questions/browse.tsx
index 89ab3c6d..7c876339 100644
--- a/apps/portal/src/pages/questions/browse.tsx
+++ b/apps/portal/src/pages/questions/browse.tsx
@@ -14,6 +14,7 @@ import QuestionSearchBar from '~/components/questions/QuestionSearchBar';
 import CompanyTypeahead from '~/components/questions/typeahead/CompanyTypeahead';
 import LocationTypeahead from '~/components/questions/typeahead/LocationTypeahead';
 import RoleTypeahead from '~/components/questions/typeahead/RoleTypeahead';
+import { JobTitleLabels } from '~/components/shared/JobTitles';
 
 import type { QuestionAge } from '~/utils/questions/constants';
 import { SORT_TYPES } from '~/utils/questions/constants';
@@ -21,6 +22,7 @@ import { SORT_ORDERS } from '~/utils/questions/constants';
 import { APP_TITLE } from '~/utils/questions/constants';
 import { QUESTION_AGES, QUESTION_TYPES } from '~/utils/questions/constants';
 import createSlug from '~/utils/questions/createSlug';
+import relabelQuestionAggregates from '~/utils/questions/relabelQuestionAggregates';
 import {
   useSearchParam,
   useSearchParamSingle,
@@ -275,7 +277,7 @@ export default function QuestionsBrowsePage() {
     return selectedRoles.map((role) => ({
       checked: true,
       id: role,
-      label: role,
+      label: JobTitleLabels[role as keyof typeof JobTitleLabels],
       value: role,
     }));
   }, [selectedRoles]);
@@ -369,7 +371,7 @@ export default function QuestionsBrowsePage() {
             setSelectedRoles([...selectedRoles, option.value]);
           } else {
             setSelectedRoles(
-              selectedCompanies.filter((role) => role !== option.value),
+              selectedRoles.filter((role) => role !== option.value),
             );
           }
         }}
@@ -470,36 +472,37 @@ export default function QuestionsBrowsePage() {
                 <div className="flex flex-col gap-2 pb-4">
                   {(questionsQueryData?.pages ?? []).flatMap(
                     ({ data: questions }) =>
-                      questions.map((question) => (
-                        <QuestionOverviewCard
-                          key={question.id}
-                          answerCount={question.numAnswers}
-                          companies={
-                            question.aggregatedQuestionEncounters.companyCounts
-                          }
-                          content={question.content}
-                          href={`/questions/${question.id}/${createSlug(
-                            question.content,
-                          )}`}
-                          locations={
-                            question.aggregatedQuestionEncounters.locationCounts
-                          }
-                          questionId={question.id}
-                          receivedCount={question.receivedCount}
-                          roles={
-                            question.aggregatedQuestionEncounters.roleCounts
-                          }
-                          timestamp={question.seenAt.toLocaleDateString(
-                            undefined,
-                            {
-                              month: 'short',
-                              year: 'numeric',
-                            },
-                          )}
-                          type={question.type}
-                          upvoteCount={question.numVotes}
-                        />
-                      )),
+                      questions.map((question) => {
+                        const { companyCounts, locationCounts, roleCounts } =
+                          relabelQuestionAggregates(
+                            question.aggregatedQuestionEncounters,
+                          );
+
+                        return (
+                          <QuestionOverviewCard
+                            key={question.id}
+                            answerCount={question.numAnswers}
+                            companies={companyCounts}
+                            content={question.content}
+                            href={`/questions/${question.id}/${createSlug(
+                              question.content,
+                            )}`}
+                            locations={locationCounts}
+                            questionId={question.id}
+                            receivedCount={question.receivedCount}
+                            roles={roleCounts}
+                            timestamp={question.seenAt.toLocaleDateString(
+                              undefined,
+                              {
+                                month: 'short',
+                                year: 'numeric',
+                              },
+                            )}
+                            type={question.type}
+                            upvoteCount={question.numVotes}
+                          />
+                        );
+                      }),
                   )}
                   <Button
                     disabled={!hasNextPage || isFetchingNextPage}
diff --git a/apps/portal/src/pages/questions/lists.tsx b/apps/portal/src/pages/questions/lists.tsx
index ea4009f8..cbf1b276 100644
--- a/apps/portal/src/pages/questions/lists.tsx
+++ b/apps/portal/src/pages/questions/lists.tsx
@@ -15,6 +15,7 @@ import DeleteListDialog from '~/components/questions/DeleteListDialog';
 import { Button } from '~/../../../packages/ui/dist';
 import { APP_TITLE } from '~/utils/questions/constants';
 import createSlug from '~/utils/questions/createSlug';
+import relabelQuestionAggregates from '~/utils/questions/relabelQuestionAggregates';
 import { trpc } from '~/utils/trpc';
 
 export default function ListPage() {
@@ -172,37 +173,38 @@ export default function ListPage() {
                 {lists?.[selectedListIndex] && (
                   <div className="flex flex-col gap-4 pb-4">
                     {lists[selectedListIndex].questionEntries.map(
-                      ({ question, id: entryId }) => (
-                        <QuestionListCard
-                          key={question.id}
-                          companies={
-                            question.aggregatedQuestionEncounters.companyCounts
-                          }
-                          content={question.content}
-                          href={`/questions/${question.id}/${createSlug(
-                            question.content,
-                          )}`}
-                          locations={
-                            question.aggregatedQuestionEncounters.locationCounts
-                          }
-                          questionId={question.id}
-                          receivedCount={question.receivedCount}
-                          roles={
-                            question.aggregatedQuestionEncounters.roleCounts
-                          }
-                          timestamp={question.seenAt.toLocaleDateString(
-                            undefined,
-                            {
-                              month: 'short',
-                              year: 'numeric',
-                            },
-                          )}
-                          type={question.type}
-                          onDelete={() => {
-                            deleteQuestionEntry({ id: entryId });
-                          }}
-                        />
-                      ),
+                      ({ question, id: entryId }) => {
+                        const { companyCounts, locationCounts, roleCounts } =
+                          relabelQuestionAggregates(
+                            question.aggregatedQuestionEncounters,
+                          );
+
+                        return (
+                          <QuestionListCard
+                            key={question.id}
+                            companies={companyCounts}
+                            content={question.content}
+                            href={`/questions/${question.id}/${createSlug(
+                              question.content,
+                            )}`}
+                            locations={locationCounts}
+                            questionId={question.id}
+                            receivedCount={question.receivedCount}
+                            roles={roleCounts}
+                            timestamp={question.seenAt.toLocaleDateString(
+                              undefined,
+                              {
+                                month: 'short',
+                                year: 'numeric',
+                              },
+                            )}
+                            type={question.type}
+                            onDelete={() => {
+                              deleteQuestionEntry({ id: entryId });
+                            }}
+                          />
+                        );
+                      },
                     )}
                     {lists[selectedListIndex].questionEntries?.length === 0 && (
                       <div className="flex w-full items-center justify-center gap-2 rounded-md border border-slate-300 bg-slate-200 p-4 text-slate-600">
diff --git a/apps/portal/src/utils/questions/relabelQuestionAggregates.ts b/apps/portal/src/utils/questions/relabelQuestionAggregates.ts
new file mode 100644
index 00000000..50a2a5dd
--- /dev/null
+++ b/apps/portal/src/utils/questions/relabelQuestionAggregates.ts
@@ -0,0 +1,26 @@
+import { JobTitleLabels } from '~/components/shared/JobTitles';
+
+import type { AggregatedQuestionEncounter } from '~/types/questions';
+
+export default function relabelQuestionAggregates({
+  locationCounts,
+  companyCounts,
+  roleCounts,
+  latestSeenAt,
+}: AggregatedQuestionEncounter) {
+  const newRoleCounts = Object.fromEntries(
+    Object.entries(roleCounts).map(([roleId, count]) => [
+      JobTitleLabels[roleId as keyof typeof JobTitleLabels],
+      count,
+    ]),
+  );
+
+  const relabeledAggregate: AggregatedQuestionEncounter = {
+    companyCounts,
+    latestSeenAt,
+    locationCounts,
+    roleCounts: newRoleCounts,
+  };
+
+  return relabeledAggregate;
+}