diff --git a/src/components/ProfileSection.tsx b/src/components/ProfileSection.tsx index 08f4e6b..2d5dd41 100644 --- a/src/components/ProfileSection.tsx +++ b/src/components/ProfileSection.tsx @@ -1,7 +1,7 @@ import { FALLBACK_PROFILE_IMAGE } from 'constants.ts' import { Event, Filter, kinds, nip19, UnsignedEvent } from 'nostr-tools' import { QRCodeSVG } from 'qrcode.react' -import { Fragment, useMemo, useState } from 'react' +import { Fragment, useEffect, useMemo, useState } from 'react' import { Link } from 'react-router-dom' import { toast } from 'react-toastify' import { @@ -10,7 +10,7 @@ import { useDidMount, useNDKContext } from '../hooks' -import { appRoutes, getProfilePageRoute } from '../routes' +import { appRoutes, getFeedNotePageRoute, getProfilePageRoute } from '../routes' import '../styles/author.css' import '../styles/innerPage.css' import '../styles/socialPosts.css' @@ -18,6 +18,8 @@ import { UserRelaysType } from '../types' import { copyTextToClipboard, hexToNpub, + isValidImageUrl, + isValidUrl, log, LogType, now, @@ -26,8 +28,12 @@ import { } from '../utils' import { LoadingSpinner } from './LoadingSpinner' import { ZapPopUp } from './Zap' -import placeholder from '../assets/img/DEGMods Placeholder Img.png' -import { NDKEvent, NDKSubscriptionCacheUsage } from '@nostr-dev-kit/ndk' +import { + NDKEvent, + NDKFilter, + NDKKind, + NDKSubscriptionCacheUsage +} from '@nostr-dev-kit/ndk' import { useProfile } from 'hooks/useProfile' import { createPortal } from 'react-dom' @@ -36,55 +42,104 @@ type Props = { } export const ProfileSection = ({ pubkey }: Props) => { + const { ndk } = useNDKContext() + const profile = useProfile(pubkey, { + cacheUsage: NDKSubscriptionCacheUsage.PARALLEL + }) + const displayName = + profile?.displayName || profile?.name || '[name not set up]' + const [posts, setPosts] = useState([]) + useEffect(() => { + const filter: NDKFilter = { + authors: [pubkey], + kinds: [NDKKind.Text], + limit: 10 + } + ndk + .fetchEvents(filter, { + closeOnEose: true, + cacheUsage: NDKSubscriptionCacheUsage.PARALLEL + }) + .then((ndkEventSet) => { + const ndkEvents = Array.from(ndkEventSet) + const posts: Post[] = ndkEvents + .sort((a, b) => (b.created_at ?? 0) - (a.created_at ?? 0)) + .map((ndkEvent) => ({ + content: ndkEvent.content, + link: getFeedNotePageRoute(ndkEvent.encode()), + name: displayName + })) + posts.splice(5) + for (const post of posts) { + const imageUrls = post.content.match( + new RegExp( + /(?:https?:\/\/|www\.)(?:[a-zA-Z0-9.-]+\.[a-zA-Z]+(?::\d+)?)(?:[/?#][\p{L}\p{N}\p{M}&.-/?=#\-@%+_,:!~*]*)?/gu + ) + ) + if (imageUrls) { + for (const url of imageUrls) { + if (isValidUrl(url) && isValidImageUrl(url)) { + post.imageUrl = url + break + } + } + } + } + setPosts(posts) + }) + }, [displayName, ndk, pubkey]) + return (
-
-
- {posts.map((post, index) => ( - -
) @@ -222,25 +277,6 @@ interface Post { imageUrl?: string } -const posts: Post[] = [ - { - name: 'User name', - link: `feed-note.html`, - content: `user text, this is a long string of temporary text that would be replaced with the user post from their short posts` - }, - { - name: 'User name', - link: 'feed-note.html', - content: `user text, this is a long string of temporary text that would be replaced with the user post from their short posts` - }, - { - name: 'User name', - link: `feed-note.html`, - content: `user text, this is a long string of temporary text that would be replaced with the user post from their short posts`, - imageUrl: placeholder - } -] - type QRButtonWithPopUpProps = { nprofile: string }