[questions][feat] sort questions by encounter

pull/514/head
Jeff Sieu 3 years ago
parent 9f1d53ff96
commit 4a2f3d4e68

@ -8,16 +8,15 @@ export type SortOption<Value> = {
value: Value; value: Value;
}; };
const sortTypeOptions = SORT_TYPES;
const sortOrderOptions = SORT_ORDERS;
type SortOrderProps<Order> = { type SortOrderProps<Order> = {
onSortOrderChange?: (sortValue: Order) => void; onSortOrderChange?: (sortValue: Order) => void;
sortOrderOptions?: Array<SortOption<Order>>;
sortOrderValue: Order; sortOrderValue: Order;
}; };
type SortTypeProps<Type> = { type SortTypeProps<Type> = {
onSortTypeChange?: (sortType: Type) => void; onSortTypeChange?: (sortType: Type) => void;
sortTypeOptions?: Array<SortOption<Type>>;
sortTypeValue: Type; sortTypeValue: Type;
}; };
@ -29,17 +28,22 @@ export default function SortOptionsSelect({
sortOrderValue, sortOrderValue,
onSortTypeChange, onSortTypeChange,
sortTypeValue, sortTypeValue,
sortOrderOptions,
sortTypeOptions,
}: SortOptionsSelectProps) { }: SortOptionsSelectProps) {
const sortTypes = sortTypeOptions ?? SORT_TYPES;
const sortOrders = sortOrderOptions ?? SORT_ORDERS;
return ( return (
<div className="flex items-end justify-end gap-4"> <div className="flex items-end justify-end gap-4">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Select <Select
display="inline" display="inline"
label="Sort by" label="Sort by"
options={sortTypeOptions} options={sortTypes}
value={sortTypeValue} value={sortTypeValue}
onChange={(value) => { onChange={(value) => {
const chosenOption = sortTypeOptions.find( const chosenOption = sortTypes.find(
(option) => String(option.value) === value, (option) => String(option.value) === value,
); );
if (chosenOption) { if (chosenOption) {
@ -52,10 +56,10 @@ export default function SortOptionsSelect({
<Select <Select
display="inline" display="inline"
label="Order by" label="Order by"
options={sortOrderOptions} options={sortOrders}
value={sortOrderValue} value={sortOrderValue}
onChange={(value) => { onChange={(value) => {
const chosenOption = sortOrderOptions.find( const chosenOption = sortOrders.find(
(option) => String(option.value) === value, (option) => String(option.value) === value,
); );
if (chosenOption) { if (chosenOption) {

@ -20,6 +20,7 @@ import RoleTypeahead from '~/components/questions/typeahead/RoleTypeahead';
import { JobTitleLabels } from '~/components/shared/JobTitles'; import { JobTitleLabels } from '~/components/shared/JobTitles';
import type { QuestionAge } from '~/utils/questions/constants'; import type { QuestionAge } from '~/utils/questions/constants';
import { QUESTION_SORT_TYPES } from '~/utils/questions/constants';
import { APP_TITLE } from '~/utils/questions/constants'; import { APP_TITLE } from '~/utils/questions/constants';
import { QUESTION_AGES, QUESTION_TYPES } from '~/utils/questions/constants'; import { QUESTION_AGES, QUESTION_TYPES } from '~/utils/questions/constants';
import createSlug from '~/utils/questions/createSlug'; import createSlug from '~/utils/questions/createSlug';
@ -35,6 +36,30 @@ import type { Location } from '~/types/questions.d';
import { SortType } from '~/types/questions.d'; import { SortType } from '~/types/questions.d';
import { SortOrder } 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() { export default function QuestionsBrowsePage() {
const router = useRouter(); const router = useRouter();
@ -89,15 +114,7 @@ export default function QuestionsBrowsePage() {
const [sortOrder, setSortOrder, isSortOrderInitialized] = const [sortOrder, setSortOrder, isSortOrderInitialized] =
useSearchParamSingle<SortOrder>('sortOrder', { useSearchParamSingle<SortOrder>('sortOrder', {
defaultValue: SortOrder.DESC, defaultValue: SortOrder.DESC,
paramToString: (value) => { paramToString: sortOrderToString,
if (value === SortOrder.ASC) {
return 'ASC';
}
if (value === SortOrder.DESC) {
return 'DESC';
}
return null;
},
stringToParam: (param) => { stringToParam: (param) => {
const uppercaseParam = param.toUpperCase(); const uppercaseParam = param.toUpperCase();
if (uppercaseParam === 'ASC') { if (uppercaseParam === 'ASC') {
@ -113,15 +130,7 @@ export default function QuestionsBrowsePage() {
const [sortType, setSortType, isSortTypeInitialized] = const [sortType, setSortType, isSortTypeInitialized] =
useSearchParamSingle<SortType>('sortType', { useSearchParamSingle<SortType>('sortType', {
defaultValue: SortType.TOP, defaultValue: SortType.TOP,
paramToString: (value) => { paramToString: sortTypeToString,
if (value === SortType.NEW) {
return 'NEW';
}
if (value === SortType.TOP) {
return 'TOP';
}
return null;
},
stringToParam: (param) => { stringToParam: (param) => {
const uppercaseParam = param.toUpperCase(); const uppercaseParam = param.toUpperCase();
if (uppercaseParam === 'NEW') { if (uppercaseParam === 'NEW') {
@ -130,6 +139,9 @@ export default function QuestionsBrowsePage() {
if (uppercaseParam === 'TOP') { if (uppercaseParam === 'TOP') {
return SortType.TOP; return SortType.TOP;
} }
if (uppercaseParam === 'ENCOUNTERS') {
return SortType.ENCOUNTERS;
}
return null; return null;
}, },
}); });
@ -266,8 +278,8 @@ export default function QuestionsBrowsePage() {
questionAge: selectedQuestionAge, questionAge: selectedQuestionAge,
questionTypes: selectedQuestionTypes, questionTypes: selectedQuestionTypes,
roles: selectedRoles, roles: selectedRoles,
sortOrder: sortOrder === SortOrder.ASC ? 'ASC' : 'DESC', sortOrder: sortOrderToString(sortOrder),
sortType: sortType === SortType.TOP ? 'TOP' : 'NEW', sortType: sortTypeToString(sortType),
}, },
}); });
@ -509,6 +521,7 @@ export default function QuestionsBrowsePage() {
<QuestionSearchBar <QuestionSearchBar
query={query} query={query}
sortOrderValue={sortOrder} sortOrderValue={sortOrder}
sortTypeOptions={QUESTION_SORT_TYPES}
sortTypeValue={sortType} sortTypeValue={sortType}
onFilterOptionsToggle={() => { onFilterOptionsToggle={() => {
setFilterDrawerOpen(!filterDrawerOpen); setFilterDrawerOpen(!filterDrawerOpen);

@ -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 = { export const SAMPLE_QUESTION = {
answerCount: 10, answerCount: 10,
commentCount: 10, commentCount: 10,

Loading…
Cancel
Save