13 changed files with 145 additions and 731 deletions
@ -0,0 +1,56 @@ |
|||||||
|
import { Skeleton } from '@/components/ui/skeleton' |
||||||
|
import { useProfileWall } from '@/hooks/useProfileWall' |
||||||
|
import { useTranslation } from 'react-i18next' |
||||||
|
|
||||||
|
export default function ProfileBadges({ |
||||||
|
pubkey, |
||||||
|
profileEventId |
||||||
|
}: { |
||||||
|
pubkey: string |
||||||
|
profileEventId?: string |
||||||
|
}) { |
||||||
|
const { t } = useTranslation() |
||||||
|
const { badges, isLoading } = useProfileWall(pubkey, profileEventId) |
||||||
|
|
||||||
|
if (isLoading && badges.length === 0) { |
||||||
|
return ( |
||||||
|
<div className="mt-3 flex flex-wrap gap-2" aria-hidden> |
||||||
|
<Skeleton className="h-14 w-14 rounded-lg" /> |
||||||
|
<Skeleton className="h-14 w-14 rounded-lg" /> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
if (badges.length === 0) return null |
||||||
|
|
||||||
|
return ( |
||||||
|
<section className="mt-3 min-w-0" aria-label={t('Badges')}> |
||||||
|
<div className="flex flex-wrap gap-2"> |
||||||
|
{badges.map((badge) => ( |
||||||
|
<div |
||||||
|
key={`${badge.definitionCoordinate}:${badge.awardEventId}`} |
||||||
|
className="flex max-w-[5.5rem] flex-col items-center gap-0.5" |
||||||
|
title={badge.description ?? badge.name} |
||||||
|
> |
||||||
|
{badge.imageUrl ? ( |
||||||
|
<img |
||||||
|
src={badge.imageUrl} |
||||||
|
alt={badge.name} |
||||||
|
className="h-14 w-14 rounded-lg border border-border object-cover" |
||||||
|
loading="lazy" |
||||||
|
/> |
||||||
|
) : ( |
||||||
|
<div |
||||||
|
className="flex h-14 w-14 items-center justify-center rounded-lg border border-border bg-muted px-1 text-center text-[10px] font-medium leading-tight" |
||||||
|
aria-hidden |
||||||
|
> |
||||||
|
{badge.name} |
||||||
|
</div> |
||||||
|
)} |
||||||
|
<span className="w-full truncate text-center text-[10px] text-muted-foreground">{badge.name}</span> |
||||||
|
</div> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
) |
||||||
|
} |
||||||
@ -1,298 +0,0 @@ |
|||||||
import NoteCard from '@/components/NoteCard' |
|
||||||
import { Skeleton } from '@/components/ui/skeleton' |
|
||||||
import { ExtendedKind } from '@/constants' |
|
||||||
import { useDeletedEvent } from '@/providers/DeletedEventProvider' |
|
||||||
import client from '@/services/client.service' |
|
||||||
import indexedDb from '@/services/indexed-db.service' |
|
||||||
import { generateBech32IdFromATag, getFirstHexEventIdFromETags } from '@/lib/tag' |
|
||||||
import { relayHintsFromEventTags } from '@/lib/relay-list-builder' |
|
||||||
import { hexPubkeysEqual, normalizeHexPubkey } from '@/lib/pubkey' |
|
||||||
import { RefreshCw } from 'lucide-react' |
|
||||||
import { kinds, type Event } from 'nostr-tools' |
|
||||||
import { |
|
||||||
forwardRef, |
|
||||||
useEffect, |
|
||||||
useImperativeHandle, |
|
||||||
useMemo, |
|
||||||
useRef, |
|
||||||
useState |
|
||||||
} from 'react' |
|
||||||
import { useTranslation } from 'react-i18next' |
|
||||||
import { useProfileTimeline } from '@/hooks/useProfileTimeline' |
|
||||||
|
|
||||||
const INITIAL_SHOW_COUNT = 25 |
|
||||||
const LOAD_MORE_COUNT = 25 |
|
||||||
const LIKED_REACTION_KINDS = [kinds.Reaction, ExtendedKind.EXTERNAL_REACTION] |
|
||||||
|
|
||||||
type ReactionTargetRef = { |
|
||||||
key: string |
|
||||||
fetchId: string |
|
||||||
hexId?: string |
|
||||||
relayHints: string[] |
|
||||||
} |
|
||||||
|
|
||||||
type LikedTarget = { |
|
||||||
reaction: Event |
|
||||||
target: Event |
|
||||||
} |
|
||||||
|
|
||||||
function isPositiveReaction(event: Event): boolean { |
|
||||||
return event.content.trim() !== '-' |
|
||||||
} |
|
||||||
|
|
||||||
function relayHintsForReactionTarget(event: Event, tag?: string[]): string[] { |
|
||||||
const hints = new Set(relayHintsFromEventTags(event)) |
|
||||||
const tagHint = tag?.[2]?.trim() |
|
||||||
if (tagHint) hints.add(tagHint) |
|
||||||
return [...hints] |
|
||||||
} |
|
||||||
|
|
||||||
function reactionTargetRef(event: Event): ReactionTargetRef | null { |
|
||||||
const hexId = getFirstHexEventIdFromETags(event.tags) |
|
||||||
if (hexId) { |
|
||||||
return { |
|
||||||
key: `e:${hexId.toLowerCase()}`, |
|
||||||
fetchId: hexId, |
|
||||||
hexId, |
|
||||||
relayHints: relayHintsForReactionTarget(event) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const addressTag = event.tags.find((tag) => (tag[0] === 'a' || tag[0] === 'A') && tag[1]) |
|
||||||
if (!addressTag) return null |
|
||||||
const bech32Id = generateBech32IdFromATag(addressTag) |
|
||||||
if (!bech32Id) return null |
|
||||||
return { |
|
||||||
key: `a:${addressTag[1]}`, |
|
||||||
fetchId: bech32Id, |
|
||||||
relayHints: relayHintsForReactionTarget(event, addressTag) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
function samePubkey(a: string, b: string): boolean { |
|
||||||
try { |
|
||||||
return hexPubkeysEqual(normalizeHexPubkey(a), normalizeHexPubkey(b)) |
|
||||||
} catch { |
|
||||||
return a === b |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
function newestReactionTargets(reactions: Event[]): Array<{ reaction: Event; targetRef: ReactionTargetRef }> { |
|
||||||
const byTarget = new Map<string, { reaction: Event; targetRef: ReactionTargetRef }>() |
|
||||||
for (const reaction of reactions) { |
|
||||||
if (!isPositiveReaction(reaction)) continue |
|
||||||
const targetRef = reactionTargetRef(reaction) |
|
||||||
if (!targetRef) continue |
|
||||||
const existing = byTarget.get(targetRef.key) |
|
||||||
if ( |
|
||||||
!existing || |
|
||||||
reaction.created_at > existing.reaction.created_at || |
|
||||||
(reaction.created_at === existing.reaction.created_at && reaction.id > existing.reaction.id) |
|
||||||
) { |
|
||||||
byTarget.set(targetRef.key, { reaction, targetRef }) |
|
||||||
} |
|
||||||
} |
|
||||||
return [...byTarget.values()].sort((a, b) => b.reaction.created_at - a.reaction.created_at) |
|
||||||
} |
|
||||||
|
|
||||||
const ProfileLikedFeed = forwardRef<{ refresh: () => void }, { pubkey: string }>(({ pubkey }, ref) => { |
|
||||||
const { t } = useTranslation() |
|
||||||
const { isEventDeleted } = useDeletedEvent() |
|
||||||
const [isRefreshing, setIsRefreshing] = useState(false) |
|
||||||
const [isResolvingTargets, setIsResolvingTargets] = useState(false) |
|
||||||
const [likedTargets, setLikedTargets] = useState<LikedTarget[]>([]) |
|
||||||
const [showCount, setShowCount] = useState(INITIAL_SHOW_COUNT) |
|
||||||
const bottomRef = useRef<HTMLDivElement>(null) |
|
||||||
|
|
||||||
const reactionKinds = useMemo(() => [...LIKED_REACTION_KINDS], []) |
|
||||||
const cacheKey = useMemo(() => `${pubkey}-profile-liked-v1`, [pubkey]) |
|
||||||
const { events: reactionEvents, isLoading, refresh } = useProfileTimeline({ |
|
||||||
pubkey, |
|
||||||
cacheKey, |
|
||||||
kinds: reactionKinds, |
|
||||||
limit: 200 |
|
||||||
}) |
|
||||||
|
|
||||||
const targetRefs = useMemo(() => newestReactionTargets(reactionEvents), [reactionEvents]) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
setShowCount(INITIAL_SHOW_COUNT) |
|
||||||
}, [pubkey]) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
if (!isLoading && !isResolvingTargets) { |
|
||||||
setIsRefreshing(false) |
|
||||||
} |
|
||||||
}, [isLoading, isResolvingTargets]) |
|
||||||
|
|
||||||
useImperativeHandle( |
|
||||||
ref, |
|
||||||
() => ({ |
|
||||||
refresh: () => { |
|
||||||
setIsRefreshing(true) |
|
||||||
refresh() |
|
||||||
} |
|
||||||
}), |
|
||||||
[refresh] |
|
||||||
) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
let cancelled = false |
|
||||||
const viewerPubkey = pubkey |
|
||||||
const toLikedTarget = (row: { reaction: Event; target: Event }): LikedTarget | null => { |
|
||||||
if (samePubkey(row.target.pubkey, viewerPubkey)) return null |
|
||||||
if (isEventDeleted(row.target)) return null |
|
||||||
return row |
|
||||||
} |
|
||||||
|
|
||||||
const cachedRows = targetRefs |
|
||||||
.map(({ reaction, targetRef }) => { |
|
||||||
const cached = targetRef.hexId ? client.peekSessionCachedEvent(targetRef.hexId) : undefined |
|
||||||
return cached ? toLikedTarget({ reaction, target: cached }) : null |
|
||||||
}) |
|
||||||
.filter((row): row is LikedTarget => !!row) |
|
||||||
|
|
||||||
setLikedTargets(cachedRows) |
|
||||||
if (targetRefs.length === 0) { |
|
||||||
setIsResolvingTargets(false) |
|
||||||
return () => { |
|
||||||
cancelled = true |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
setIsResolvingTargets(true) |
|
||||||
void (async () => { |
|
||||||
try { |
|
||||||
const hexIds = targetRefs.map(({ targetRef }) => targetRef.hexId).filter((id): id is string => !!id) |
|
||||||
if (hexIds.length > 0) { |
|
||||||
const [archived, publications] = await Promise.all([ |
|
||||||
indexedDb.getArchivedEventsByIds(hexIds), |
|
||||||
Promise.all(hexIds.map((id) => indexedDb.getEventFromPublicationStore(id))) |
|
||||||
]) |
|
||||||
if (cancelled) return |
|
||||||
const localById = new Map<string, Event>() |
|
||||||
for (const event of archived) localById.set(event.id, event) |
|
||||||
for (const event of publications) { |
|
||||||
if (event) localById.set(event.id, event) |
|
||||||
} |
|
||||||
const localResolved = targetRefs |
|
||||||
.map(({ reaction, targetRef }) => { |
|
||||||
const target = targetRef.hexId ? localById.get(targetRef.hexId) : undefined |
|
||||||
return target ? toLikedTarget({ reaction, target }) : null |
|
||||||
}) |
|
||||||
.filter((row): row is LikedTarget => !!row) |
|
||||||
if (localResolved.length > 0) { |
|
||||||
setLikedTargets((prev) => { |
|
||||||
const byTargetId = new Map(prev.map((row) => [row.target.id, row])) |
|
||||||
for (const row of localResolved) byTargetId.set(row.target.id, row) |
|
||||||
return [...byTargetId.values()].sort((a, b) => b.reaction.created_at - a.reaction.created_at) |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const missingHexIds = targetRefs |
|
||||||
.map(({ targetRef }) => targetRef.hexId) |
|
||||||
.filter((id): id is string => !!id && !client.peekSessionCachedEvent(id)) |
|
||||||
if (missingHexIds.length > 0) { |
|
||||||
await client.prefetchHexEventIds(missingHexIds) |
|
||||||
} |
|
||||||
|
|
||||||
const resolved = await Promise.all( |
|
||||||
targetRefs.map(async ({ reaction, targetRef }) => { |
|
||||||
const target = |
|
||||||
(targetRef.hexId ? client.peekSessionCachedEvent(targetRef.hexId) : undefined) ?? |
|
||||||
await client.fetchEvent(targetRef.fetchId, { relayHints: targetRef.relayHints }) |
|
||||||
if (!target) return null |
|
||||||
return toLikedTarget({ reaction, target }) |
|
||||||
}) |
|
||||||
) |
|
||||||
if (cancelled) return |
|
||||||
const byTargetId = new Map<string, LikedTarget>() |
|
||||||
for (const row of resolved) { |
|
||||||
if (!row) continue |
|
||||||
const existing = byTargetId.get(row.target.id) |
|
||||||
if ( |
|
||||||
!existing || |
|
||||||
row.reaction.created_at > existing.reaction.created_at || |
|
||||||
(row.reaction.created_at === existing.reaction.created_at && row.reaction.id > existing.reaction.id) |
|
||||||
) { |
|
||||||
byTargetId.set(row.target.id, row) |
|
||||||
} |
|
||||||
} |
|
||||||
setLikedTargets([...byTargetId.values()].sort((a, b) => b.reaction.created_at - a.reaction.created_at)) |
|
||||||
} finally { |
|
||||||
if (!cancelled) setIsResolvingTargets(false) |
|
||||||
} |
|
||||||
})() |
|
||||||
|
|
||||||
return () => { |
|
||||||
cancelled = true |
|
||||||
} |
|
||||||
}, [targetRefs, pubkey, isEventDeleted]) |
|
||||||
|
|
||||||
const displayedTargets = useMemo( |
|
||||||
() => likedTargets.slice(0, showCount), |
|
||||||
[likedTargets, showCount] |
|
||||||
) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
if (!bottomRef.current || displayedTargets.length >= likedTargets.length) return |
|
||||||
const observer = new IntersectionObserver( |
|
||||||
(entries) => { |
|
||||||
if (entries[0].isIntersecting && displayedTargets.length < likedTargets.length) { |
|
||||||
setShowCount((prev) => Math.min(prev + LOAD_MORE_COUNT, likedTargets.length)) |
|
||||||
} |
|
||||||
}, |
|
||||||
{ threshold: 0.1 } |
|
||||||
) |
|
||||||
observer.observe(bottomRef.current) |
|
||||||
return () => observer.disconnect() |
|
||||||
}, [displayedTargets.length, likedTargets.length]) |
|
||||||
|
|
||||||
if ((isLoading || isResolvingTargets) && likedTargets.length === 0) { |
|
||||||
return ( |
|
||||||
<div className="mt-4 space-y-2"> |
|
||||||
{Array.from({ length: 3 }).map((_, i) => ( |
|
||||||
<Skeleton key={i} className="h-32 w-full" /> |
|
||||||
))} |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
if (likedTargets.length === 0) { |
|
||||||
return ( |
|
||||||
<div className="px-4 py-8 text-center text-sm text-muted-foreground"> |
|
||||||
{t('No liked posts yet')} |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<div className="mt-4 min-w-0"> |
|
||||||
{isRefreshing && ( |
|
||||||
<div |
|
||||||
className="flex items-center justify-center gap-2 px-4 py-2 text-center text-sm text-green-500" |
|
||||||
role="status" |
|
||||||
aria-live="polite" |
|
||||||
> |
|
||||||
<RefreshCw className="h-4 w-4 shrink-0 animate-spin" aria-hidden /> |
|
||||||
{t('Refreshing liked posts...')} |
|
||||||
</div> |
|
||||||
)} |
|
||||||
<div className="space-y-2"> |
|
||||||
{displayedTargets.map(({ target }) => ( |
|
||||||
<NoteCard key={target.id} className="w-full" event={target} filterMutedNotes={false} bottomNoteLabel={t('Liked by you')} /> |
|
||||||
))} |
|
||||||
</div> |
|
||||||
{displayedTargets.length < likedTargets.length && ( |
|
||||||
<div ref={bottomRef} className="h-10 flex items-center justify-center"> |
|
||||||
<div className="text-sm text-muted-foreground">{t('Loading more...')}</div> |
|
||||||
</div> |
|
||||||
)} |
|
||||||
</div> |
|
||||||
) |
|
||||||
}) |
|
||||||
|
|
||||||
ProfileLikedFeed.displayName = 'ProfileLikedFeed' |
|
||||||
|
|
||||||
export default ProfileLikedFeed |
|
||||||
@ -1,101 +0,0 @@ |
|||||||
import NoteList, { type TNoteListRef } from '@/components/NoteList' |
|
||||||
import { buildAuthorInboxOutboxRelayUrls } from '@/lib/favorites-feed-relays' |
|
||||||
import { PROFILE_MEDIA_TAB_KINDS } from '@/constants' |
|
||||||
import { buildProfileMediaSubRequests } from '@/pages/primary/SpellsPage/fauxSpellFeeds' |
|
||||||
import { normalizeHexPubkey } from '@/lib/pubkey' |
|
||||||
import { useFavoriteRelays } from '@/providers/FavoriteRelaysProvider' |
|
||||||
import { useNostrOptional } from '@/providers/nostr-context' |
|
||||||
import { hexPubkeysEqual } from '@/lib/pubkey' |
|
||||||
import client from '@/services/client.service' |
|
||||||
import { forwardRef, useEffect, useMemo, useState } from 'react' |
|
||||||
|
|
||||||
const ProfileMediaFeed = forwardRef<TNoteListRef, { pubkey: string }>(({ pubkey }, ref) => { |
|
||||||
const nostr = useNostrOptional() |
|
||||||
const { blockedRelays } = useFavoriteRelays() |
|
||||||
const includeAuthorLocalRelays = useMemo(() => { |
|
||||||
const me = nostr?.pubkey?.trim() |
|
||||||
const pk = pubkey?.trim() |
|
||||||
if (!me || !pk) return false |
|
||||||
try { |
|
||||||
return hexPubkeysEqual(normalizeHexPubkey(me), normalizeHexPubkey(pk)) |
|
||||||
} catch { |
|
||||||
return false |
|
||||||
} |
|
||||||
}, [nostr?.pubkey, pubkey]) |
|
||||||
|
|
||||||
const [authorRelayUrls, setAuthorRelayUrls] = useState<string[] | null>(null) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
const pk = pubkey?.trim() |
|
||||||
if (!pk) { |
|
||||||
setAuthorRelayUrls([]) |
|
||||||
return |
|
||||||
} |
|
||||||
let cancelled = false |
|
||||||
setAuthorRelayUrls(null) |
|
||||||
void client |
|
||||||
.fetchRelayList(pk) |
|
||||||
.catch(() => ({ read: [] as string[], write: [] as string[] })) |
|
||||||
.then((authorRl) => { |
|
||||||
if (cancelled) return |
|
||||||
setAuthorRelayUrls(buildAuthorInboxOutboxRelayUrls(authorRl, blockedRelays, includeAuthorLocalRelays)) |
|
||||||
}) |
|
||||||
return () => { |
|
||||||
cancelled = true |
|
||||||
} |
|
||||||
}, [pubkey, blockedRelays, includeAuthorLocalRelays]) |
|
||||||
|
|
||||||
const subRequests = useMemo(() => { |
|
||||||
const pk = pubkey?.trim() |
|
||||||
if (!pk || !authorRelayUrls?.length) return [] |
|
||||||
return buildProfileMediaSubRequests(authorRelayUrls, blockedRelays, pk) |
|
||||||
}, [pubkey, authorRelayUrls, blockedRelays]) |
|
||||||
|
|
||||||
const feedSubscriptionKey = useMemo(() => { |
|
||||||
const pk = pubkey?.trim() |
|
||||||
if (!pk) return 'profile-media-empty' |
|
||||||
return `profile-media-${normalizeHexPubkey(pk)}` |
|
||||||
}, [pubkey]) |
|
||||||
|
|
||||||
const showKinds = useMemo(() => [...PROFILE_MEDIA_TAB_KINDS], []) |
|
||||||
|
|
||||||
if (authorRelayUrls === null) { |
|
||||||
return ( |
|
||||||
<div className="min-h-[min(40vh,320px)] min-w-0 px-2 py-8 text-center text-sm text-muted-foreground"> |
|
||||||
{/* Skeleton while author NIP-65 resolves — avoids provisional→refined subRequest churn */} |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
if (!subRequests.length) { |
|
||||||
return ( |
|
||||||
<div className="min-h-[min(40vh,320px)] min-w-0 px-2 py-8 text-center text-sm text-muted-foreground" /> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<div className="min-h-[min(40vh,320px)] min-w-0"> |
|
||||||
<NoteList |
|
||||||
ref={ref} |
|
||||||
subRequests={subRequests} |
|
||||||
feedSubscriptionKey={feedSubscriptionKey} |
|
||||||
hostPrimaryPageName="profile" |
|
||||||
showKinds={showKinds} |
|
||||||
useFilterAsIs |
|
||||||
preserveTimelineOnSubRequestsChange |
|
||||||
mergeTimelineWhenSubRequestFiltersMatch |
|
||||||
revealBatchSize={48} |
|
||||||
filterMutedNotes={false} |
|
||||||
showKind1OPs |
|
||||||
showKind1Replies |
|
||||||
showKind1111 |
|
||||||
hideReplies={false} |
|
||||||
timelinePublicReadFallback |
|
||||||
/> |
|
||||||
</div> |
|
||||||
) |
|
||||||
}) |
|
||||||
|
|
||||||
ProfileMediaFeed.displayName = 'ProfileMediaFeed' |
|
||||||
|
|
||||||
export default ProfileMediaFeed |
|
||||||
@ -1,50 +0,0 @@ |
|||||||
import ProfileSearchBar from '@/components/ui/ProfileSearchBar' |
|
||||||
import { ExtendedKind } from '@/constants' |
|
||||||
import { PROFILE_PUBLICATIONS_TAB_KINDS } from '@/constants' |
|
||||||
import { forwardRef, useMemo, useState } from 'react' |
|
||||||
import { useTranslation } from 'react-i18next' |
|
||||||
import ProfileTimeline from './ProfileTimeline' |
|
||||||
|
|
||||||
const ProfilePublicationsFeed = forwardRef<{ refresh: () => void }, { pubkey: string }>(({ pubkey }, ref) => { |
|
||||||
const { t } = useTranslation() |
|
||||||
const [searchQuery, setSearchQuery] = useState('') |
|
||||||
|
|
||||||
const kindsList = useMemo(() => [...PROFILE_PUBLICATIONS_TAB_KINDS], []) |
|
||||||
const cacheKey = useMemo(() => `${pubkey}-profile-publications-v3`, [pubkey]) |
|
||||||
const visiblePublicationFilter = useMemo( |
|
||||||
() => (event: { kind: number }) => event.kind !== ExtendedKind.PUBLICATION_CONTENT, |
|
||||||
[] |
|
||||||
) |
|
||||||
|
|
||||||
const getKindLabel = (_kindValue: string) => t('articles and publications') |
|
||||||
|
|
||||||
return ( |
|
||||||
<div className="mt-4"> |
|
||||||
<div className="mb-2 flex flex-wrap items-center gap-2 px-2"> |
|
||||||
<ProfileSearchBar |
|
||||||
onSearch={setSearchQuery} |
|
||||||
placeholder={t('Search articles...')} |
|
||||||
className="w-64 max-w-full" |
|
||||||
/> |
|
||||||
</div> |
|
||||||
<ProfileTimeline |
|
||||||
ref={ref} |
|
||||||
pubkey={pubkey} |
|
||||||
topSpace={0} |
|
||||||
searchQuery={searchQuery} |
|
||||||
kindFilter="all" |
|
||||||
kinds={kindsList} |
|
||||||
cacheKey={cacheKey} |
|
||||||
filterPredicate={visiblePublicationFilter} |
|
||||||
getKindLabel={getKindLabel} |
|
||||||
refreshLabel={t('Refreshing articles...')} |
|
||||||
emptyLabel={t('No articles or publications found')} |
|
||||||
emptySearchLabel={t('No articles or publications match your search')} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
) |
|
||||||
}) |
|
||||||
|
|
||||||
ProfilePublicationsFeed.displayName = 'ProfilePublicationsFeed' |
|
||||||
|
|
||||||
export default ProfilePublicationsFeed |
|
||||||
@ -1,117 +0,0 @@ |
|||||||
import NoteCard from '@/components/NoteCard' |
|
||||||
import { Skeleton } from '@/components/ui/skeleton' |
|
||||||
import { useProfileWall } from '@/hooks/useProfileWall' |
|
||||||
import { forwardRef, useEffect, useImperativeHandle, useState } from 'react' |
|
||||||
import { useTranslation } from 'react-i18next' |
|
||||||
import { RefreshCw } from 'lucide-react' |
|
||||||
|
|
||||||
type ProfileWallFeedProps = { |
|
||||||
pubkey: string |
|
||||||
profileEventId?: string |
|
||||||
} |
|
||||||
|
|
||||||
const ProfileWallFeed = forwardRef<{ refresh: () => void }, ProfileWallFeedProps>( |
|
||||||
({ pubkey, profileEventId }, ref) => { |
|
||||||
const { t } = useTranslation() |
|
||||||
const { badges, comments, isLoading, refresh } = useProfileWall(pubkey, profileEventId) |
|
||||||
const [isRefreshing, setIsRefreshing] = useState(false) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
if (!isLoading) setIsRefreshing(false) |
|
||||||
}, [isLoading]) |
|
||||||
|
|
||||||
useImperativeHandle( |
|
||||||
ref, |
|
||||||
() => ({ |
|
||||||
refresh: () => { |
|
||||||
setIsRefreshing(true) |
|
||||||
refresh() |
|
||||||
} |
|
||||||
}), |
|
||||||
[refresh] |
|
||||||
) |
|
||||||
|
|
||||||
if (isLoading && badges.length === 0 && comments.length === 0) { |
|
||||||
return ( |
|
||||||
<div className="mt-4 space-y-6 px-4"> |
|
||||||
<div className="flex gap-3"> |
|
||||||
<Skeleton className="h-24 w-24 rounded-full md:h-48 md:w-48" /> |
|
||||||
<Skeleton className="h-24 w-24 rounded-full md:h-48 md:w-48" /> |
|
||||||
</div> |
|
||||||
{Array.from({ length: 2 }).map((_, i) => ( |
|
||||||
<Skeleton key={i} className="h-32 w-full" /> |
|
||||||
))} |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<div className="mt-4 space-y-8"> |
|
||||||
{isRefreshing && ( |
|
||||||
<div |
|
||||||
className="flex items-center justify-center gap-2 px-4 py-2 text-center text-sm text-green-500" |
|
||||||
role="status" |
|
||||||
aria-live="polite" |
|
||||||
> |
|
||||||
<RefreshCw className="h-4 w-4 shrink-0 animate-spin" aria-hidden /> |
|
||||||
{t('Refreshing wall...')} |
|
||||||
</div> |
|
||||||
)} |
|
||||||
|
|
||||||
{badges.length > 0 && ( |
|
||||||
<section className="px-4" aria-label={t('Badges')}> |
|
||||||
<div className="flex flex-wrap gap-3 justify-center sm:justify-start"> |
|
||||||
{badges.map((badge) => ( |
|
||||||
<div |
|
||||||
key={`${badge.definitionCoordinate}:${badge.awardEventId}`} |
|
||||||
className="flex flex-col items-center gap-1" |
|
||||||
title={badge.description ?? badge.name} |
|
||||||
> |
|
||||||
{badge.imageUrl ? ( |
|
||||||
<img |
|
||||||
src={badge.imageUrl} |
|
||||||
alt={badge.name} |
|
||||||
className="h-24 w-24 rounded-lg object-cover md:h-48 md:w-48" |
|
||||||
loading="lazy" |
|
||||||
/> |
|
||||||
) : ( |
|
||||||
<div |
|
||||||
className="flex h-24 w-24 items-center justify-center rounded-lg border border-border bg-muted px-2 text-center text-xs font-medium md:h-48 md:w-48 md:text-sm" |
|
||||||
aria-hidden |
|
||||||
> |
|
||||||
{badge.name} |
|
||||||
</div> |
|
||||||
)} |
|
||||||
<span className="max-w-[6rem] truncate text-center text-xs text-muted-foreground md:max-w-[12rem]"> |
|
||||||
{badge.name} |
|
||||||
</span> |
|
||||||
</div> |
|
||||||
))} |
|
||||||
</div> |
|
||||||
</section> |
|
||||||
)} |
|
||||||
|
|
||||||
<section className="space-y-2" aria-labelledby="profile-wall-comments-heading"> |
|
||||||
<h2 id="profile-wall-comments-heading" className="px-4 text-sm font-semibold text-foreground"> |
|
||||||
{t('Wall')} |
|
||||||
</h2> |
|
||||||
{!profileEventId ? ( |
|
||||||
<p className="px-4 py-4 text-sm text-muted-foreground">{t('Profile metadata not loaded yet')}</p> |
|
||||||
) : comments.length === 0 ? ( |
|
||||||
<p className="px-4 py-4 text-sm text-muted-foreground">{t('No wall comments yet')}</p> |
|
||||||
) : ( |
|
||||||
<div className="space-y-2"> |
|
||||||
{comments.map((event) => ( |
|
||||||
<NoteCard key={event.id} className="w-full" event={event} filterMutedNotes={false} /> |
|
||||||
))} |
|
||||||
</div> |
|
||||||
)} |
|
||||||
</section> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
) |
|
||||||
|
|
||||||
ProfileWallFeed.displayName = 'ProfileWallFeed' |
|
||||||
|
|
||||||
export default ProfileWallFeed |
|
||||||
Loading…
Reference in new issue