Kieran
/
snort
4
13
Fork 14
Code Issues 71 Pull Requests 1 Packages Projects Releases 24 Wiki Activity

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
Signed by: Kieran
GPG Key ID: DE71CEB3925BE941
1 changed files with 23 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
packages/app/src/Pages/SearchPage.tsx
View File

@ -20,6 +20,7 @@ const SearchPage = () => {
const { formatMessage } = useIntl();
const [search, setSearch] = useState<string | undefined>(params.keyword);
const [keyword, setKeyword] = useState<string | undefined>(params.keyword);
const [sortPopular, setSortPopular] = useState<boolean>(true);
// tabs
const SearchTab = {
Posts: { text: formatMessage(messages.Posts), value: POSTS },
@ -60,21 +61,40 @@ const SearchPage = () => {
const pf = tab.value == PROFILES;
return (
<>
{sortOptions()}
<Timeline
key={keyword + (pf ? "_p" : "")}
subject={{
type: pf ? "profile_keyword" : "post_keyword",
items: [keyword],
items: [keyword + (sortPopular ? " sort:popular" : "")],
discriminator: keyword,
}}
postsOnly={false}
noSort={pf}
noSort={pf && sortPopular}
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) {
return <TabElement key={v.value} t={v} tab={tab} setTab={setTab} />;
}
@ -94,9 +114,7 @@ const SearchPage = () => {
autoFocus={true}
/>
</div>
<div className="tabs">
{[SearchTab.Posts, SearchTab.Profiles].map(renderTab)}
</div>
<div className="tabs">{[SearchTab.Posts, SearchTab.Profiles].map(renderTab)}</div>
{!keyword && <TrendingUsers />}
{tabContent()}
</div>