60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
import { useArk } from "@lume/ark";
|
|
import { LoaderIcon } from "@lume/icons";
|
|
import { cn } from "@lume/utils";
|
|
import { useEffect, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { ReplyForm } from "./editor/replyForm";
|
|
import { Reply } from "./note/primitives/reply";
|
|
import { EventWithReplies } from "@lume/types";
|
|
|
|
export function ReplyList({
|
|
eventId,
|
|
className,
|
|
}: {
|
|
eventId: string;
|
|
className?: string;
|
|
}) {
|
|
const ark = useArk();
|
|
|
|
const [t] = useTranslation();
|
|
const [data, setData] = useState<null | EventWithReplies[]>(null);
|
|
|
|
useEffect(() => {
|
|
async function getReplies() {
|
|
const events = await ark.get_event_thread(eventId);
|
|
setData(events);
|
|
}
|
|
getReplies();
|
|
}, [eventId]);
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"flex flex-col divide-y divide-neutral-100 dark:divide-neutral-900",
|
|
className,
|
|
)}
|
|
>
|
|
<ReplyForm
|
|
eventId={eventId}
|
|
className="border-t border-neutral-100 py-4 dark:border-neutral-900"
|
|
/>
|
|
{!data ? (
|
|
<div className="mt-4 flex h-16 items-center justify-center p-3">
|
|
<LoaderIcon className="h-5 w-5 animate-spin" />
|
|
</div>
|
|
) : data.length === 0 ? (
|
|
<div className="mt-4 flex w-full items-center justify-center">
|
|
<div className="flex flex-col items-center justify-center gap-2 py-6">
|
|
<h3 className="text-3xl">👋</h3>
|
|
<p className="leading-none text-neutral-600 dark:text-neutral-400">
|
|
{t("note.reply.empty")}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
data.map((event) => <Reply key={event.id} event={event} />)
|
|
)}
|
|
</div>
|
|
);
|
|
}
|