mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-18 11:13:30 +00:00
updated thread component
This commit is contained in:
parent
6f9f55a229
commit
0b28bf4ee8
@ -27,6 +27,13 @@ export function Thread({ data }: { data: any }) {
|
||||
[data]
|
||||
);
|
||||
|
||||
const computeItemKey = useCallback(
|
||||
(index) => {
|
||||
return data[index].id;
|
||||
},
|
||||
[data]
|
||||
);
|
||||
|
||||
return (
|
||||
<Virtuoso
|
||||
data={data}
|
||||
@ -35,6 +42,7 @@ export function Thread({ data }: { data: any }) {
|
||||
EmptyPlaceholder: () => <Placeholder />,
|
||||
ScrollSeekPlaceholder: () => <Placeholder />,
|
||||
}}
|
||||
computeItemKey={computeItemKey}
|
||||
scrollSeekConfiguration={{
|
||||
enter: (velocity) => Math.abs(velocity) > 800,
|
||||
exit: (velocity) => Math.abs(velocity) < 500,
|
||||
|
47
src/pages/feed/[id].tsx
Normal file
47
src/pages/feed/[id].tsx
Normal file
@ -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) => (
|
||||
<p key={event.id}>
|
||||
{event.pubkey} posted: {event.content}
|
||||
</p>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Page.getLayout = function getLayout(
|
||||
page:
|
||||
| string
|
||||
| number
|
||||
| boolean
|
||||
| ReactElement<unknown, string | JSXElementConstructor<unknown>>
|
||||
| ReactFragment
|
||||
| ReactPortal
|
||||
) {
|
||||
return (
|
||||
<BaseLayout>
|
||||
<UserLayout>{page}</UserLayout>
|
||||
</BaseLayout>
|
||||
);
|
||||
};
|
@ -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 (
|
||||
<div className="h-full w-full overflow-hidden rounded-lg border border-zinc-700 bg-zinc-900 shadow-input">
|
||||
<Thread data={events} />
|
||||
<div className="h-full w-full">
|
||||
<Suspense fallback={<Placeholder />}>
|
||||
<Thread data={events} />
|
||||
</Suspense>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user