mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-19 11:43: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]
|
[data]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const computeItemKey = useCallback(
|
||||||
|
(index) => {
|
||||||
|
return data[index].id;
|
||||||
|
},
|
||||||
|
[data]
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Virtuoso
|
<Virtuoso
|
||||||
data={data}
|
data={data}
|
||||||
@ -35,6 +42,7 @@ export function Thread({ data }: { data: any }) {
|
|||||||
EmptyPlaceholder: () => <Placeholder />,
|
EmptyPlaceholder: () => <Placeholder />,
|
||||||
ScrollSeekPlaceholder: () => <Placeholder />,
|
ScrollSeekPlaceholder: () => <Placeholder />,
|
||||||
}}
|
}}
|
||||||
|
computeItemKey={computeItemKey}
|
||||||
scrollSeekConfiguration={{
|
scrollSeekConfiguration={{
|
||||||
enter: (velocity) => Math.abs(velocity) > 800,
|
enter: (velocity) => Math.abs(velocity) > 800,
|
||||||
exit: (velocity) => Math.abs(velocity) < 500,
|
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 BaseLayout from '@layouts/baseLayout';
|
||||||
import UserLayout from '@layouts/userLayout';
|
import UserLayout from '@layouts/userLayout';
|
||||||
|
|
||||||
|
import { Placeholder } from '@components/note/placeholder';
|
||||||
import { Thread } from '@components/thread';
|
import { Thread } from '@components/thread';
|
||||||
|
|
||||||
import { hoursAgo } from '@utils/getDate';
|
import { hoursAgo } from '@utils/getDate';
|
||||||
|
|
||||||
import { dateToUnix, useNostrEvents } from 'nostr-react';
|
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() {
|
export default function Page() {
|
||||||
const now = useRef(new Date());
|
const now = useRef(new Date());
|
||||||
@ -15,12 +23,15 @@ export default function Page() {
|
|||||||
filter: {
|
filter: {
|
||||||
since: dateToUnix(hoursAgo(1, now.current)),
|
since: dateToUnix(hoursAgo(1, now.current)),
|
||||||
kinds: [1],
|
kinds: [1],
|
||||||
|
limit: 100,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="h-full w-full overflow-hidden rounded-lg border border-zinc-700 bg-zinc-900 shadow-input">
|
<div className="h-full w-full">
|
||||||
|
<Suspense fallback={<Placeholder />}>
|
||||||
<Thread data={events} />
|
<Thread data={events} />
|
||||||
|
</Suspense>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user