93 lines
2.9 KiB
TypeScript
93 lines
2.9 KiB
TypeScript
import { Box, Container, Spinner } from "@/components";
|
|
import { Conversation } from "@/components/conversation";
|
|
import { Quote } from "@/components/quote";
|
|
import { RepostNote } from "@/components/repost";
|
|
import { TextNote } from "@/components/text";
|
|
import { User } from "@/components/user";
|
|
import { type LumeEvent, NostrQuery } from "@/system";
|
|
import { Kind } from "@/types";
|
|
import { createFileRoute, defer } from "@tanstack/react-router";
|
|
import { Await } from "@tanstack/react-router";
|
|
import { Suspense, useCallback } from "react";
|
|
import { WindowVirtualizer } from "virtua";
|
|
|
|
export const Route = createFileRoute("/users/$id")({
|
|
beforeLoad: async () => {
|
|
const settings = await NostrQuery.getUserSettings();
|
|
return { settings };
|
|
},
|
|
loader: async ({ params }) => {
|
|
return { data: defer(NostrQuery.getUserEvents(params.id)) };
|
|
},
|
|
component: Screen,
|
|
});
|
|
|
|
function Screen() {
|
|
const { id } = Route.useParams();
|
|
const { data } = Route.useLoaderData();
|
|
|
|
const renderItem = useCallback(
|
|
(event: LumeEvent) => {
|
|
if (!event) return;
|
|
switch (event.kind) {
|
|
case Kind.Repost:
|
|
return <RepostNote key={event.id} event={event} className="mb-3" />;
|
|
default: {
|
|
if (event.isConversation) {
|
|
return (
|
|
<Conversation key={event.id} className="mb-3" event={event} />
|
|
);
|
|
}
|
|
if (event.isQuote) {
|
|
return <Quote key={event.id} event={event} className="mb-3" />;
|
|
}
|
|
return <TextNote key={event.id} event={event} className="mb-3" />;
|
|
}
|
|
}
|
|
},
|
|
[data],
|
|
);
|
|
|
|
return (
|
|
<Container withDrag>
|
|
<Box className="px-0 scrollbar-none bg-black/5 dark:bg-white/5">
|
|
<WindowVirtualizer>
|
|
<User.Provider pubkey={id}>
|
|
<User.Root>
|
|
<User.Cover className="object-cover w-full h-44" />
|
|
<div className="relative flex flex-col px-3 -mt-8">
|
|
<User.Avatar className="rounded-full size-14" />
|
|
<div className="inline-flex items-center justify-between mb-4">
|
|
<div className="flex items-center gap-1">
|
|
<User.Name className="text-lg font-semibold leading-tight" />
|
|
<User.NIP05 />
|
|
</div>
|
|
<User.Button className="inline-flex items-center justify-center w-24 text-sm font-medium text-white bg-black rounded-full h-9 hover:bg-neutral-900 dark:bg-neutral-900" />
|
|
</div>
|
|
<User.About />
|
|
</div>
|
|
</User.Root>
|
|
</User.Provider>
|
|
<div className="px-3 mt-5">
|
|
<div className="mb-3">
|
|
<h3 className="text-lg font-semibold">Latest notes</h3>
|
|
</div>
|
|
<Suspense
|
|
fallback={
|
|
<div className="flex h-20 w-full items-center justify-center gap-1.5 text-sm font-medium">
|
|
<Spinner className="size-5" />
|
|
Loading...
|
|
</div>
|
|
}
|
|
>
|
|
<Await promise={data}>
|
|
{(events) => events.map((event) => renderItem(event))}
|
|
</Await>
|
|
</Suspense>
|
|
</div>
|
|
</WindowVirtualizer>
|
|
</Box>
|
|
</Container>
|
|
);
|
|
}
|