Add people search

packages/app/src/Pages/SearchPage.tsx

@@ -1,33 +1,39 @@
 import { useIntl, FormattedMessage } from "react-intl";
 import { useParams } from "react-router-dom";
-import ProfilePreview from "Element/ProfilePreview";
 import Timeline from "Element/Timeline";
+import { Tab, TabElement } from "Element/Tabs";
 import { useEffect, useState } from "react";
 import { debounce } from "Util";
 import { router } from "index";
 import { SearchRelays } from "Const";
 import { System } from "System";
-import { MetadataCache } from "Cache";
-import { UserCache } from "Cache/UserCache";
 import TrendingUsers from "Element/TrendingUsers";
+import useHorizontalScroll from "Hooks/useHorizontalScroll";
 
 import messages from "./messages";
 
+const POSTS = 0;
+const PROFILES = 1;
+
 const SearchPage = () => {
   const params = useParams();
   const { formatMessage } = useIntl();
   const [search, setSearch] = useState<string | undefined>(params.keyword);
   const [keyword, setKeyword] = useState<string | undefined>(params.keyword);
-  const [allUsers, setAllUsers] = useState<MetadataCache[]>();
+  // tabs
+  const SearchTab = {
+    Posts: { text: formatMessage(messages.Posts), value: POSTS },
+    Profiles: { text: formatMessage(messages.People), value: PROFILES },
+  };
+  const [tab, setTab] = useState<Tab>(SearchTab.Posts);
+  const horizontalScroll = useHorizontalScroll();
 
   useEffect(() => {
     if (keyword) {
       // "navigate" changing only url
       router.navigate(`/search/${encodeURIComponent(keyword)}`);
-      UserCache.search(keyword).then(v => setAllUsers(v));
     } else {
       router.navigate(`/search`);
-      setAllUsers([]);
     }
   }, [keyword]);
 
@@ -50,6 +56,30 @@ const SearchPage = () => {
     };
   }, []);
 
+  function tabContent() {
+    if (!keyword) return null;
+    const pf = tab.value == PROFILES;
+    return (
+      <>
+        <Timeline
+          key={keyword + (pf ? "_p" : "")}
+          subject={{
+            type: pf ? "profile_keyword" : "post_keyword",
+            items: [keyword],
+            discriminator: keyword,
+          }}
+          postsOnly={false}
+          noSort={pf}
+          method={"LIMIT_UNTIL"}
+        />
+      </>
+    );
+  }
+
+  function renderTab(v: Tab) {
+    return <TabElement key={v.value} t={v} tab={tab} setTab={setTab} />;
+  }
+
   return (
     <div className="main-content">
       <h2>
@@ -65,20 +95,11 @@ const SearchPage = () => {
           autoFocus={true}
         />
       </div>
+      <div className="tabs" ref={horizontalScroll}>
+        {[SearchTab.Posts, SearchTab.Profiles].map(renderTab)}
+      </div>
       {!keyword && <TrendingUsers />}
-      {keyword && allUsers?.slice(0, 3).map(u => <ProfilePreview actions={<></>} className="card" pubkey={u.pubkey} />)}
-      {keyword && (
-        <Timeline
-          key={keyword}
-          subject={{
-            type: "keyword",
-            items: [keyword],
-            discriminator: keyword,
-          }}
-          postsOnly={false}
-          method={"TIME_RANGE"}
-        />
-      )}
+      {tabContent()}
     </div>
   );
 };

packages/app/src/Pages/messages.ts

@@ -46,4 +46,6 @@ export default defineMessages({
   },
   Bookmarks: { defaultMessage: "Bookmarks" },
   BookmarksCount: { defaultMessage: "{n} Bookmarks" },
+  KeyPlaceholder: { defaultMessage: "nsec, npub, nip-05, hex" },
+  People: { defaultMessage: "People" },
 });