diff --git a/src/components/thread.tsx b/src/components/thread.tsx index ad2e22fd..5826c23a 100644 --- a/src/components/thread.tsx +++ b/src/components/thread.tsx @@ -27,6 +27,13 @@ export function Thread({ data }: { data: any }) { [data] ); + const computeItemKey = useCallback( + (index) => { + return data[index].id; + }, + [data] + ); + return ( , ScrollSeekPlaceholder: () => , }} + computeItemKey={computeItemKey} scrollSeekConfiguration={{ enter: (velocity) => Math.abs(velocity) > 800, exit: (velocity) => Math.abs(velocity) < 500, diff --git a/src/pages/feed/[id].tsx b/src/pages/feed/[id].tsx new file mode 100644 index 00000000..7f18b937 --- /dev/null +++ b/src/pages/feed/[id].tsx @@ -0,0 +1,47 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ +import BaseLayout from '@layouts/baseLayout'; +import UserLayout from '@layouts/userLayout'; + +import { useRouter } from 'next/router'; +import { useNostrEvents } from 'nostr-react'; +import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal } from 'react'; + +export default function Page() { + const router = useRouter(); + const { id }: any = router.query; + + const { events } = useNostrEvents({ + filter: { + '#e': [id], + since: 0, + kinds: [1], + limit: 20, + }, + }); + + return ( + <> + {events.map((event) => ( +

+ {event.pubkey} posted: {event.content} +

+ ))} + + ); +} + +Page.getLayout = function getLayout( + page: + | string + | number + | boolean + | ReactElement> + | ReactFragment + | ReactPortal +) { + return ( + + {page} + + ); +}; diff --git a/src/pages/feed/global.tsx b/src/pages/feed/global.tsx index 6a61a42e..f7764374 100644 --- a/src/pages/feed/global.tsx +++ b/src/pages/feed/global.tsx @@ -1,12 +1,20 @@ import BaseLayout from '@layouts/baseLayout'; import UserLayout from '@layouts/userLayout'; +import { Placeholder } from '@components/note/placeholder'; import { Thread } from '@components/thread'; import { hoursAgo } from '@utils/getDate'; import { dateToUnix, useNostrEvents } from 'nostr-react'; -import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useRef } from 'react'; +import { + JSXElementConstructor, + ReactElement, + ReactFragment, + ReactPortal, + Suspense, + useRef, +} from 'react'; export default function Page() { const now = useRef(new Date()); @@ -15,12 +23,15 @@ export default function Page() { filter: { since: dateToUnix(hoursAgo(1, now.current)), kinds: [1], + limit: 100, }, }); return ( -
- +
+ }> + +
); }