From 4a2f3d4e68cfab7e1df1896885cfc3ec6813d243 Mon Sep 17 00:00:00 2001
From: Jeff Sieu <jeffsy00@gmail.com>
Date: Sat, 5 Nov 2022 23:05:46 +0800
Subject: [PATCH] [questions][feat] sort questions by encounter

---
 .../questions/SortOptionsSelect.tsx           | 18 ++++---
 apps/portal/src/pages/questions/browse.tsx    | 53 ++++++++++++-------
 apps/portal/src/utils/questions/constants.ts  | 15 ++++++
 3 files changed, 59 insertions(+), 27 deletions(-)

diff --git a/apps/portal/src/components/questions/SortOptionsSelect.tsx b/apps/portal/src/components/questions/SortOptionsSelect.tsx
index 17e555f7..9a9efb64 100644
--- a/apps/portal/src/components/questions/SortOptionsSelect.tsx
+++ b/apps/portal/src/components/questions/SortOptionsSelect.tsx
@@ -8,16 +8,15 @@ export type SortOption<Value> = {
   value: Value;
 };
 
-const sortTypeOptions = SORT_TYPES;
-const sortOrderOptions = SORT_ORDERS;
-
 type SortOrderProps<Order> = {
   onSortOrderChange?: (sortValue: Order) => void;
+  sortOrderOptions?: Array<SortOption<Order>>;
   sortOrderValue: Order;
 };
 
 type SortTypeProps<Type> = {
   onSortTypeChange?: (sortType: Type) => void;
+  sortTypeOptions?: Array<SortOption<Type>>;
   sortTypeValue: Type;
 };
 
@@ -29,17 +28,22 @@ export default function SortOptionsSelect({
   sortOrderValue,
   onSortTypeChange,
   sortTypeValue,
+  sortOrderOptions,
+  sortTypeOptions,
 }: SortOptionsSelectProps) {
+  const sortTypes = sortTypeOptions ?? SORT_TYPES;
+  const sortOrders = sortOrderOptions ?? SORT_ORDERS;
+
   return (
     <div className="flex items-end justify-end gap-4">
       <div className="flex items-center gap-2">
         <Select
           display="inline"
           label="Sort by"
-          options={sortTypeOptions}
+          options={sortTypes}
           value={sortTypeValue}
           onChange={(value) => {
-            const chosenOption = sortTypeOptions.find(
+            const chosenOption = sortTypes.find(
               (option) => String(option.value) === value,
             );
             if (chosenOption) {
@@ -52,10 +56,10 @@ export default function SortOptionsSelect({
         <Select
           display="inline"
           label="Order by"
-          options={sortOrderOptions}
+          options={sortOrders}
           value={sortOrderValue}
           onChange={(value) => {
-            const chosenOption = sortOrderOptions.find(
+            const chosenOption = sortOrders.find(
               (option) => String(option.value) === value,
             );
             if (chosenOption) {
diff --git a/apps/portal/src/pages/questions/browse.tsx b/apps/portal/src/pages/questions/browse.tsx
index c3b25e59..e2d42770 100644
--- a/apps/portal/src/pages/questions/browse.tsx
+++ b/apps/portal/src/pages/questions/browse.tsx
@@ -20,6 +20,7 @@ import RoleTypeahead from '~/components/questions/typeahead/RoleTypeahead';
 import { JobTitleLabels } from '~/components/shared/JobTitles';
 
 import type { QuestionAge } from '~/utils/questions/constants';
+import { QUESTION_SORT_TYPES } 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';
@@ -35,6 +36,30 @@ import type { Location } from '~/types/questions.d';
 import { SortType } from '~/types/questions.d';
 import { SortOrder } from '~/types/questions.d';
 
+function sortOrderToString(value: SortOrder): string | null {
+  switch (value) {
+    case SortOrder.ASC:
+      return 'ASC';
+    case SortOrder.DESC:
+      return 'DESC';
+    default:
+      return null;
+  }
+}
+
+function sortTypeToString(value: SortType): string | null {
+  switch (value) {
+    case SortType.TOP:
+      return 'TOP';
+    case SortType.NEW:
+      return 'NEW';
+    case SortType.ENCOUNTERS:
+      return 'ENCOUNTERS';
+    default:
+      return null;
+  }
+}
+
 export default function QuestionsBrowsePage() {
   const router = useRouter();
 
@@ -89,15 +114,7 @@ export default function QuestionsBrowsePage() {
   const [sortOrder, setSortOrder, isSortOrderInitialized] =
     useSearchParamSingle<SortOrder>('sortOrder', {
       defaultValue: SortOrder.DESC,
-      paramToString: (value) => {
-        if (value === SortOrder.ASC) {
-          return 'ASC';
-        }
-        if (value === SortOrder.DESC) {
-          return 'DESC';
-        }
-        return null;
-      },
+      paramToString: sortOrderToString,
       stringToParam: (param) => {
         const uppercaseParam = param.toUpperCase();
         if (uppercaseParam === 'ASC') {
@@ -113,15 +130,7 @@ export default function QuestionsBrowsePage() {
   const [sortType, setSortType, isSortTypeInitialized] =
     useSearchParamSingle<SortType>('sortType', {
       defaultValue: SortType.TOP,
-      paramToString: (value) => {
-        if (value === SortType.NEW) {
-          return 'NEW';
-        }
-        if (value === SortType.TOP) {
-          return 'TOP';
-        }
-        return null;
-      },
+      paramToString: sortTypeToString,
       stringToParam: (param) => {
         const uppercaseParam = param.toUpperCase();
         if (uppercaseParam === 'NEW') {
@@ -130,6 +139,9 @@ export default function QuestionsBrowsePage() {
         if (uppercaseParam === 'TOP') {
           return SortType.TOP;
         }
+        if (uppercaseParam === 'ENCOUNTERS') {
+          return SortType.ENCOUNTERS;
+        }
         return null;
       },
     });
@@ -266,8 +278,8 @@ export default function QuestionsBrowsePage() {
           questionAge: selectedQuestionAge,
           questionTypes: selectedQuestionTypes,
           roles: selectedRoles,
-          sortOrder: sortOrder === SortOrder.ASC ? 'ASC' : 'DESC',
-          sortType: sortType === SortType.TOP ? 'TOP' : 'NEW',
+          sortOrder: sortOrderToString(sortOrder),
+          sortType: sortTypeToString(sortType),
         },
       });
 
@@ -509,6 +521,7 @@ export default function QuestionsBrowsePage() {
                   <QuestionSearchBar
                     query={query}
                     sortOrderValue={sortOrder}
+                    sortTypeOptions={QUESTION_SORT_TYPES}
                     sortTypeValue={sortType}
                     onFilterOptionsToggle={() => {
                       setFilterDrawerOpen(!filterDrawerOpen);
diff --git a/apps/portal/src/utils/questions/constants.ts b/apps/portal/src/utils/questions/constants.ts
index bada8a57..c707dd0e 100644
--- a/apps/portal/src/utils/questions/constants.ts
+++ b/apps/portal/src/utils/questions/constants.ts
@@ -85,6 +85,21 @@ export const SORT_TYPES = [
   },
 ];
 
+export const QUESTION_SORT_TYPES = [
+  {
+    label: 'New',
+    value: SortType.NEW,
+  },
+  {
+    label: 'Top',
+    value: SortType.TOP,
+  },
+  {
+    label: 'Encounters',
+    value: SortType.ENCOUNTERS,
+  },
+];
+
 export const SAMPLE_QUESTION = {
   answerCount: 10,
   commentCount: 10,