From e44ed3f58cbf7ec175223f33f386b42ff95d201a Mon Sep 17 00:00:00 2001 From: Ren Amamiya <123083837+reyamir@users.noreply.github.com> Date: Thu, 15 Jun 2023 09:16:59 +0700 Subject: [PATCH] add trending profiles --- .../space/components/notes/mentions/note.tsx | 3 +- src/app/space/components/notes/metadata.tsx | 2 +- src/app/trending/_default.page.tsx | 1 + src/app/trending/components/profile.tsx | 89 +++++++++++++++++++ .../trending/components/trendingProfiles.tsx | 39 ++++++++ src/app/trending/layout.tsx | 14 +++ src/app/trending/pages/index.page.tsx | 9 ++ src/renderer/index.css | 2 +- 8 files changed, 156 insertions(+), 3 deletions(-) create mode 100644 src/app/trending/_default.page.tsx create mode 100644 src/app/trending/components/profile.tsx create mode 100644 src/app/trending/components/trendingProfiles.tsx create mode 100644 src/app/trending/layout.tsx create mode 100644 src/app/trending/pages/index.page.tsx diff --git a/src/app/space/components/notes/mentions/note.tsx b/src/app/space/components/notes/mentions/note.tsx index e69bd018..c10c5ef0 100644 --- a/src/app/space/components/notes/mentions/note.tsx +++ b/src/app/space/components/notes/mentions/note.tsx @@ -15,7 +15,8 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) { return ( {data ? ( diff --git a/src/app/space/components/notes/metadata.tsx b/src/app/space/components/notes/metadata.tsx index 0ba2799d..7037f170 100644 --- a/src/app/space/components/notes/metadata.tsx +++ b/src/app/space/components/notes/metadata.tsx @@ -71,7 +71,7 @@ export function NoteMetadata({
e.stopPropagation()} onKeyDown={(e) => e.stopPropagation()} - className="inline-flex items-center gap-2 w-full h-12 mt-4" + className="inline-flex items-center gap-2 w-full h-12" > {!data ? ( <> diff --git a/src/app/trending/_default.page.tsx b/src/app/trending/_default.page.tsx new file mode 100644 index 00000000..39399c7d --- /dev/null +++ b/src/app/trending/_default.page.tsx @@ -0,0 +1 @@ +export { LayoutTrending as Layout } from "./layout"; diff --git a/src/app/trending/components/profile.tsx b/src/app/trending/components/profile.tsx new file mode 100644 index 00000000..b9ddb4ba --- /dev/null +++ b/src/app/trending/components/profile.tsx @@ -0,0 +1,89 @@ +import { Image } from "@shared/image"; +import { DEFAULT_AVATAR } from "@stores/constants"; +import { compactNumber } from "@utils/number"; +import { shortenKey } from "@utils/shortenKey"; +import useSWR from "swr"; + +const fetcher = (url: string) => fetch(url).then((r) => r.json()); + +export function Profile({ data }: { data: any }) { + const { data: userStats, error } = useSWR( + `https://api.nostr.band/v0/stats/profile/${data.pubkey}`, + fetcher, + ); + + const embedProfile = data.profile ? JSON.parse(data.profile.content) : null; + const profile = embedProfile; + + if (!profile) + return ( +
+

Can't fetch profile

+
+ ); + + console.log(userStats); + + return ( +
+
+
+ +
+
+

+ {profile.display_name || profile.name} +

+

+ {profile.nip05 || shortenKey(data.pubkey)} +

+
+
+
+

+ {profile.about || profile.bio} +

+
+
+ {error &&

Failed to fetch

} + {!userStats ? ( +

Loading...

+ ) : ( +
+
+ + {userStats.stats[data.pubkey].followers_pubkey_count ?? 0} + + + Followers + +
+
+ + {userStats.stats[data.pubkey].pub_following_pubkey_count ?? 0} + + + Following + +
+
+ + {userStats.stats[data.pubkey].zaps_received + ? compactNumber.format( + userStats.stats[data.pubkey].zaps_received.msats / 1000, + ) + : 0} + + + Zaps received + +
+
+ )} +
+
+ ); +} diff --git a/src/app/trending/components/trendingProfiles.tsx b/src/app/trending/components/trendingProfiles.tsx new file mode 100644 index 00000000..333d4ba4 --- /dev/null +++ b/src/app/trending/components/trendingProfiles.tsx @@ -0,0 +1,39 @@ +import { NoteSkeleton } from "@app/space/components/notes/skeleton"; +import { Profile } from "@app/trending/components/profile"; +import useSWR from "swr"; + +const fetcher = (url: string) => fetch(url).then((r) => r.json()); + +export function TrendingProfiles() { + const { data, error } = useSWR( + "https://api.nostr.band/v0/trending/profiles", + fetcher, + ); + + return ( +
+
+

Trending Profiles

+
+
+ {error &&

Failed to load...

} + {!data ? ( +
+
+ +
+
+ ) : ( +
+ {data.profiles.map((item) => ( + + ))} +
+ )} +
+
+ ); +} diff --git a/src/app/trending/layout.tsx b/src/app/trending/layout.tsx new file mode 100644 index 00000000..7b41b1c9 --- /dev/null +++ b/src/app/trending/layout.tsx @@ -0,0 +1,14 @@ +import { MultiAccounts } from "@shared/multiAccounts"; +import { Navigation } from "@shared/navigation"; + +export function LayoutTrending({ children }: { children: React.ReactNode }) { + return ( +
+
+ + +
+
{children}
+
+ ); +} diff --git a/src/app/trending/pages/index.page.tsx b/src/app/trending/pages/index.page.tsx new file mode 100644 index 00000000..3d4ed841 --- /dev/null +++ b/src/app/trending/pages/index.page.tsx @@ -0,0 +1,9 @@ +import { TrendingProfiles } from "@app/trending/components/trendingProfiles"; + +export function Page() { + return ( +
+ +
+ ); +} diff --git a/src/renderer/index.css b/src/renderer/index.css index 13ee5c20..16e574e0 100644 --- a/src/renderer/index.css +++ b/src/renderer/index.css @@ -15,7 +15,7 @@ button { } .markdown { - @apply prose prose-zinc max-w-none select-text break-words dark:prose-invert prose-p:m-0 prose-p:leading-tight prose-a:font-normal prose-a:leading-tight prose-a:text-fuchsia-500 hover:prose-a:text-fuchsia-600 prose-ol:mb-1 prose-ul:mb-1 prose-li:leading-tight prose-blockquote:m-0 prose-ol:m-0 prose-hr:mx-0 prose-hr:my-2; + @apply prose prose-zinc max-w-none select-text break-words dark:prose-invert prose-p:mt-0 prose-p:mb-2 prose-p:last:mb-0 prose-p:leading-tight prose-a:font-normal prose-a:leading-tight prose-a:text-fuchsia-500 hover:prose-a:text-fuchsia-600 prose-ol:mb-1 prose-ul:mb-1 prose-li:leading-tight prose-blockquote:m-0 prose-ol:m-0 prose-hr:mx-0 prose-hr:my-2; } /* For Webkit-based browsers (Chrome, Safari and Opera) */