+ {user.banner ? (
+ 
+ ) : (
+
+ )}
-
+
-
+
+
diff --git a/src/app/users/components/metadata.tsx b/src/app/users/components/stats.tsx
similarity index 71%
rename from src/app/users/components/metadata.tsx
rename to src/app/users/components/stats.tsx
index c72ad043..9c25d232 100644
--- a/src/app/users/components/metadata.tsx
+++ b/src/app/users/components/stats.tsx
@@ -1,8 +1,10 @@
import { useQuery } from '@tanstack/react-query';
+import { LoaderIcon } from '@shared/icons';
+
import { compactNumber } from '@utils/number';
-export function UserMetadata({ pubkey }: { pubkey: string }) {
+export function UserStats({ pubkey }: { pubkey: string }) {
const { status, data } = useQuery(['user-metadata', pubkey], async () => {
const res = await fetch(`https://api.nostr.band/v0/stats/profile/${pubkey}`);
if (!res.ok) {
@@ -12,24 +14,32 @@ export function UserMetadata({ pubkey }: { pubkey: string }) {
});
if (status === 'loading') {
- return
-
- {user?.displayName || user?.name || 'No name'}
+
-
- {user?.displayName || user?.name || 'No name'}
+
+ {user.display_name || user.displayName || user.name || 'No name'}
-
- {user?.nip05 || shortenKey(pubkey)}
+
+ {user.nip05 || user.username || shortenKey(pubkey)}
- {status === 'loading' ? (
-
- ) : followed ? (
-
+
-
+ {user.about || user.bio ? (
+
+ {user.about || user.bio} +
) : ( - + <> )} - - Message - - - {db.account.pubkey === pubkey &&
-
- {user?.about || user?.bio} -
-
+ {status === 'loading' ? (
+
+ ) : followed ? (
+
+ ) : (
+
+ )}
+
+ Message
+
+ {db.account.pubkey === pubkey && (
+ <>
+
+
Loading...
; + return ( +
+
+ );
+ }
+
+ if (status === 'error') {
+ return ;
}
return (
-
+
{compactNumber.format(data.stats[pubkey].followers_pubkey_count) ?? 0}
Followers
-
+
{compactNumber.format(data.stats[pubkey].pub_following_pubkey_count) ?? 0}
Following
-
+
{data.stats[pubkey].zaps_received
? compactNumber.format(data.stats[pubkey].zaps_received.msats / 1000)
@@ -37,7 +47,7 @@ export function UserMetadata({ pubkey }: { pubkey: string }) {
Zaps received
-
+
{data.stats[pubkey].zaps_sent
? compactNumber.format(data.stats[pubkey].zaps_sent.msats / 1000)
diff --git a/src/app/users/index.tsx b/src/app/users/index.tsx
index 201a8fa1..695f0391 100644
--- a/src/app/users/index.tsx
+++ b/src/app/users/index.tsx
@@ -1,38 +1,115 @@
+import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
import { useQuery } from '@tanstack/react-query';
import { useVirtualizer } from '@tanstack/react-virtual';
-import { useRef } from 'react';
+import { useCallback, useRef } from 'react';
import { useParams } from 'react-router-dom';
+import { UserProfile } from '@app/users/components/profile';
+
import { useNDK } from '@libs/ndk/provider';
-import { NoteSkeleton, TextNote } from '@shared/notes';
+import {
+ ArticleNote,
+ FileNote,
+ NoteSkeleton,
+ NoteWrapper,
+ Repost,
+ TextNote,
+ UnknownNote,
+} from '@shared/notes';
import { nHoursAgo } from '@utils/date';
-import { LumeEvent } from '@utils/types';
-
-import { UserProfile } from './components/profile';
export function UserScreen() {
- const parentRef = useRef();
-
const { pubkey } = useParams();
const { ndk } = useNDK();
const { status, data } = useQuery(['user-feed', pubkey], async () => {
const events = await ndk.fetchEvents({
- kinds: [1],
+ kinds: [NDKKind.Text, NDKKind.Repost, NDKKind.Article],
authors: [pubkey],
since: nHoursAgo(48),
});
- return [...events] as unknown as LumeEvent[];
+ return [...events] as unknown as NDKEvent[];
});
- const rowVirtualizer = useVirtualizer({
+ const parentRef = useRef();
+ const virtualizer = useVirtualizer({
count: data ? data.length : 0,
getScrollElement: () => parentRef.current,
- estimateSize: () => 400,
+ estimateSize: () => 650,
+ overscan: 2,
});
+ const items = virtualizer.getVirtualItems();
- const itemsVirtualizer = rowVirtualizer.getVirtualItems();
+ // render event match event kind
+ const renderItem = useCallback(
+ (index: string | number) => {
+ const event: NDKEvent = data[index];
+ if (!event) return;
+
+ switch (event.kind) {
+ case NDKKind.Text:
+ return (
+
+
+
+
+ );
+ case NDKKind.Repost:
+ return (
+
+
+ );
+ case 1063:
+ return (
+
+
+
+
+ );
+ case NDKKind.Article:
+ return (
+
+
+
+
+ );
+ default:
+ return (
+
+
+
+
+ );
+ }
+ },
+ [data]
+ );
return (
-
-
- Latest posts
- 48 hours ago -
+
+
+ Latest postrs +
+
{status === 'loading' ? (
-
) : (
)}
diff --git a/src/index.css b/src/index.css
index 87a1b332..f757e792 100644
--- a/src/index.css
+++ b/src/index.css
@@ -15,7 +15,7 @@ button {
}
.markdown {
- @apply prose prose-white max-w-none select-text hyphens-auto text-white prose-p:mb-2 prose-p:mt-0 prose-p:break-words prose-p:[word-break:break-word] prose-p:last:mb-0 prose-a:break-words prose-a:break-all prose-a:font-normal prose-a:leading-tight prose-a:after:content-['_↗'] hover:prose-a:text-fuchsia-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-fuchsia-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2;
+ @apply prose prose-white max-w-none select-text hyphens-auto text-white prose-p:mb-2 prose-p:mt-0 prose-p:break-words prose-p:[word-break:break-word] prose-p:last:mb-0 prose-a:break-words prose-a:break-all prose-a:font-normal hover:prose-a:text-fuchsia-500 prose-blockquote:mb-1 prose-blockquote:mt-1 prose-blockquote:border-l-[2px] prose-blockquote:border-fuchsia-500 prose-blockquote:pl-2 prose-pre:whitespace-pre-wrap prose-pre:break-words prose-pre:break-all prose-ol:m-0 prose-ol:mb-1 prose-ul:mb-1 prose-ul:mt-1 prose-img:mb-2 prose-img:mt-3 prose-hr:mx-0 prose-hr:my-2;
}
.ProseMirror p.is-empty::before {
diff --git a/src/shared/navigation.tsx b/src/shared/navigation.tsx
index 919db17d..be144e58 100644
--- a/src/shared/navigation.tsx
+++ b/src/shared/navigation.tsx
@@ -110,7 +110,7 @@ export function Navigation() {
+
- ) : itemsVirtualizer.length === 0 ? (
+ ) : items.length === 0 ? (
-
- No new posts in 48 hours ago +
+ User doesn't have any postrs in the last 48 hours.
- {itemsVirtualizer.map((virtualRow) => (
-
-
- ))}
-
+ {items.map((item) => renderItem(item.index))}