From 1143cdfc88fb25a13669f60ca62426d0d79cf5cb Mon Sep 17 00:00:00 2001
From: artur <brugeman.artur@gmail.com>
Date: Tue, 7 Mar 2023 08:46:48 +0300
Subject: [PATCH] Add sort order dropbox for people search

---
 packages/app/src/Pages/SearchPage.tsx | 28 ++++++++++++++++++++++-----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/packages/app/src/Pages/SearchPage.tsx b/packages/app/src/Pages/SearchPage.tsx
index f35e4811..70655450 100644
--- a/packages/app/src/Pages/SearchPage.tsx
+++ b/packages/app/src/Pages/SearchPage.tsx
@@ -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>