feat: trending notes

packages/app/src/Element/TrendingPosts.tsx

@@ -0,0 +1,34 @@
+import { useEffect, useState } from "react";
+import { RawEvent, TaggedRawEvent } from "@snort/nostr";
+import { FormattedMessage } from "react-intl";
+
+import PageSpinner from "Element/PageSpinner";
+import Note from "Element/Note";
+import NostrBandApi from "NostrBand";
+
+export default function TrendingNotes() {
+  const [posts, setPosts] = useState<Array<RawEvent>>();
+
+  async function loadTrendingNotes() {
+    const api = new NostrBandApi();
+    const trending = await api.trendingNotes();
+    setPosts(trending.notes.map(a => a.event));
+  }
+
+  useEffect(() => {
+    loadTrendingNotes().catch(console.error);
+  }, []);
+
+  if (!posts) return <PageSpinner />;
+
+  return (
+    <>
+      <h3>
+        <FormattedMessage defaultMessage="Trending Notes" />
+      </h3>
+      {posts.map(e => (
+        <Note key={e.id} data={e as TaggedRawEvent} related={[]} depth={0} />
+      ))}
+    </>
+  );
+}

packages/app/src/Element/TrendingUsers.tsx

@@ -4,37 +4,20 @@ import { FormattedMessage } from "react-intl";
 
 import FollowListBase from "Element/FollowListBase";
 import PageSpinner from "Element/PageSpinner";
+import NostrBandApi from "NostrBand";
 
-interface TrendingUser {
-  pubkey: HexKey;
-}
-
-interface TrendingUserResponse {
-  profiles: Array<TrendingUser>;
-}
-
-async function fetchTrendingUsers() {
-  try {
-    const res = await fetch(`https://api.nostr.band/v0/trending/profiles`);
-    if (res.ok) {
-      const data = (await res.json()) as TrendingUserResponse;
-      return data.profiles.map(a => a.pubkey);
-    }
-  } catch (e) {
-    console.warn(`Failed to load link preview`);
-  }
-}
-
-const TrendingUsers = () => {
+export default function TrendingUsers() {
   const [userList, setUserList] = useState<HexKey[]>();
 
+  async function loadTrendingUsers() {
+    const api = new NostrBandApi();
+    const users = await api.trendingProfiles();
+    const keys = users.profiles.map(a => a.pubkey);
+    setUserList(keys);
+  }
+
   useEffect(() => {
-    (async () => {
-      const data = await fetchTrendingUsers();
-      if (data) {
-        setUserList(data);
-      }
-    })();
+    loadTrendingUsers().catch(console.error);
   }, []);
 
   if (!userList) return <PageSpinner />;
@@ -42,11 +25,9 @@ const TrendingUsers = () => {
   return (
     <>
       <h3>
-        <FormattedMessage defaultMessage="Trending Users" />
+        <FormattedMessage defaultMessage="Trending People" />
       </h3>
       <FollowListBase pubkeys={userList} showAbout={true} />
     </>
   );
-};
-
-export default TrendingUsers;
+}