From 964f791e46154e38a4444c5ce2ae22dc5796ff82 Mon Sep 17 00:00:00 2001 From: Jeff Sieu Date: Tue, 8 Nov 2022 01:18:39 +0800 Subject: [PATCH] [questions][ui] improve browse sort ui --- .../questions/ContributeQuestionCard.tsx | 20 +-- .../questions/QuestionSearchBar.tsx | 118 +++++++++++++----- .../questions/SortOptionsSelect.tsx | 2 +- .../card/question/BaseQuestionCard.tsx | 13 +- .../forms/ContributeQuestionForm.tsx | 7 +- .../[questionId]/[questionSlug]/index.tsx | 5 +- apps/portal/src/pages/questions/browse.tsx | 10 +- apps/portal/src/pages/questions/lists.tsx | 8 +- apps/portal/src/utils/questions/constants.ts | 26 ++-- 9 files changed, 119 insertions(+), 90 deletions(-) diff --git a/apps/portal/src/components/questions/ContributeQuestionCard.tsx b/apps/portal/src/components/questions/ContributeQuestionCard.tsx index be050d96..7ffa2b2a 100644 --- a/apps/portal/src/components/questions/ContributeQuestionCard.tsx +++ b/apps/portal/src/components/questions/ContributeQuestionCard.tsx @@ -1,5 +1,4 @@ import { useState } from 'react'; -import { TextInput } from '@tih/ui'; import { useProtectedCallback } from '~/utils/questions/useProtectedCallback'; @@ -27,22 +26,13 @@ export default function ContributeQuestionCard({ return (
void; @@ -13,6 +16,22 @@ export type QuestionSearchBarProps = SortOptionsSelectProps & { query: string; }; +function getSortOrderLabel(sortOrder: SortOrder, sortType: SortType): string { + switch (sortType) { + case SortType.NEW: + return sortOrder === SortOrder.ASC ? 'Oldest first' : 'Newest first'; + case SortType.TOP: + return sortOrder === SortOrder.ASC + ? 'Least upvotes first' + : 'Most upvotes first'; + case SortType.ENCOUNTERS: + return sortOrder === SortOrder.ASC + ? 'Least received first' + : 'Most received first'; + } + return ''; +} + export default function QuestionSearchBar({ onFilterOptionsToggle, onQueryChange, @@ -20,44 +39,75 @@ export default function QuestionSearchBar({ ...sortOptionsSelectProps }: QuestionSearchBarProps) { return ( -
-
-
- { - onQueryChange(value); - }} - /> +
+
+
+
+ { + onQueryChange(value); + }} + /> +
+
+
+
+
-
-
+
+
+
-
-
-
- -
); } diff --git a/apps/portal/src/components/questions/SortOptionsSelect.tsx b/apps/portal/src/components/questions/SortOptionsSelect.tsx index 9a9efb64..14e2d841 100644 --- a/apps/portal/src/components/questions/SortOptionsSelect.tsx +++ b/apps/portal/src/components/questions/SortOptionsSelect.tsx @@ -35,7 +35,7 @@ export default function SortOptionsSelect({ const sortOrders = sortOrderOptions ?? SORT_ORDERS; return ( -
+