Add sort order dropbox for people search

This commit is contained in:
artur 2023-03-07 08:46:48 +03:00 committed by Kieran
parent 51aba89e45
commit 1143cdfc88
No known key found for this signature in database
GPG Key ID: DE71CEB3925BE941

View File

@ -20,6 +20,7 @@ const SearchPage = () => {
const { formatMessage } = useIntl(); const { formatMessage } = useIntl();
const [search, setSearch] = useState<string | undefined>(params.keyword); const [search, setSearch] = useState<string | undefined>(params.keyword);
const [keyword, setKeyword] = useState<string | undefined>(params.keyword); const [keyword, setKeyword] = useState<string | undefined>(params.keyword);
const [sortPopular, setSortPopular] = useState<boolean>(true);
// tabs // tabs
const SearchTab = { const SearchTab = {
Posts: { text: formatMessage(messages.Posts), value: POSTS }, Posts: { text: formatMessage(messages.Posts), value: POSTS },
@ -60,21 +61,40 @@ const SearchPage = () => {
const pf = tab.value == PROFILES; const pf = tab.value == PROFILES;
return ( return (
<> <>
{sortOptions()}
<Timeline <Timeline
key={keyword + (pf ? "_p" : "")} key={keyword + (pf ? "_p" : "")}
subject={{ subject={{
type: pf ? "profile_keyword" : "post_keyword", type: pf ? "profile_keyword" : "post_keyword",
items: [keyword], items: [keyword + (sortPopular ? " sort:popular" : "")],
discriminator: keyword, discriminator: keyword,
}} }}
postsOnly={false} postsOnly={false}
noSort={pf} noSort={pf && sortPopular}
method={"LIMIT_UNTIL"} method={"LIMIT_UNTIL"}
/> />
</> </>
); );
} }
function sortOptions() {
if (tab.value != PROFILES) return null;
return (
<div className="flex mb10 f-end">
<FormattedMessage defaultMessage="Sort" description="Label for sorting options for people search" />
&nbsp;
<select onChange={e => setSortPopular(e.target.value == "true")} value={sortPopular ? "true" : "false"}>
<option value={"true"}>
<FormattedMessage defaultMessage="Popular" description="Sort order name" />
</option>
<option value={"false"}>
<FormattedMessage defaultMessage="Recent" description="Sort order name" />
</option>
</select>
</div>
);
}
function renderTab(v: Tab) { function renderTab(v: Tab) {
return <TabElement key={v.value} t={v} tab={tab} setTab={setTab} />; return <TabElement key={v.value} t={v} tab={tab} setTab={setTab} />;
} }
@ -94,9 +114,7 @@ const SearchPage = () => {
autoFocus={true} autoFocus={true}
/> />
</div> </div>
<div className="tabs"> <div className="tabs">{[SearchTab.Posts, SearchTab.Profiles].map(renderTab)}</div>
{[SearchTab.Posts, SearchTab.Profiles].map(renderTab)}
</div>
{!keyword && <TrendingUsers />} {!keyword && <TrendingUsers />}
{tabContent()} {tabContent()}
</div> </div>