diff --git a/apps/desktop2/src/routes/events/$eventId.tsx b/apps/desktop2/src/routes/events/$eventId.tsx
index 09a36bcb..64fa5a76 100644
--- a/apps/desktop2/src/routes/events/$eventId.tsx
+++ b/apps/desktop2/src/routes/events/$eventId.tsx
@@ -1,69 +1,82 @@
import { Note } from "@/components/note";
-import { type LumeEvent, NostrQuery, useEvent } from "@lume/system";
+import { type LumeEvent, NostrQuery } from "@lume/system";
import { Box, Container, Spinner } from "@lume/ui";
import { createFileRoute } from "@tanstack/react-router";
+import { useEffect, useState } from "react";
import { WindowVirtualizer } from "virtua";
-import { ReplyList } from "./-components/replyList";
+import { Reply } from "./-components/reply";
export const Route = createFileRoute("/events/$eventId")({
beforeLoad: async () => {
const settings = await NostrQuery.getUserSettings();
return { settings };
},
+ loader: async ({ params }) => {
+ const event = await NostrQuery.getEvent(params.eventId);
+ return event;
+ },
component: Screen,
});
function Screen() {
- const { eventId } = Route.useParams();
- const { isLoading, isError, data } = useEvent(eventId);
+ const event = Route.useLoaderData();
- if (isLoading) {
- return (
-
-
-
- );
- }
+ const [reload, setReload] = useState(false);
+ const [replies, setReplies] = useState(null);
- if (isError) {
- ;
- }
+ useEffect(() => {
+ let mounted = true;
+
+ if (event) {
+ event.getAllReplies().then((data) => {
+ if (mounted) setReplies(data);
+ });
+ }
+
+ return () => {
+ mounted = false;
+ };
+ }, [event]);
return (
-
- {data ? (
-
- ) : (
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Replies ({replies?.length ?? 0})
- )}
+ {!replies ? (
+
+ ) : !replies.length ? (
+
+
+
👋
+
+ Be the first to Reply!
+
+
+
+ ) : (
+ replies.map((event) =>
)
+ )}
+
);
}
-
-function MainNote({ data }: { data: LumeEvent }) {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
diff --git a/apps/desktop2/src/routes/events/-components/reply.tsx b/apps/desktop2/src/routes/events/-components/reply.tsx
index 73c75b3f..a0de8a8c 100644
--- a/apps/desktop2/src/routes/events/-components/reply.tsx
+++ b/apps/desktop2/src/routes/events/-components/reply.tsx
@@ -1,18 +1,18 @@
-import type { EventWithReplies } from "@lume/types";
+import { Note } from "@/components/note";
+import type { LumeEvent } from "@lume/system";
import { cn } from "@lume/utils";
import { SubReply } from "./subReply";
-import { Note } from "@/components/note";
-export function Reply({ event }: { event: EventWithReplies }) {
+export function Reply({ event }: { event: LumeEvent }) {
return (
-
+
-
+
diff --git a/packages/system/src/event.ts b/packages/system/src/event.ts
index 1180bf65..3fee7b67 100644
--- a/packages/system/src/event.ts
+++ b/packages/system/src/event.ts
@@ -17,6 +17,7 @@ export class LumeEvent {
public sig: string;
public meta: Meta;
public relay?: string;
+ public replies?: LumeEvent[];
#raw: NostrEvent;
constructor(event: NostrEvent) {
@@ -94,20 +95,22 @@ export class LumeEvent {
return { id, relayHint };
}
- public async getReplies(id: string) {
- const query = await commands.getReplies(id);
+ public async getAllReplies() {
+ const query = await commands.getReplies(this.id);
if (query.status === "ok") {
const events = query.data.map((item) => {
- const raw = JSON.parse(item.raw) as EventWithReplies;
+ const nostrEvent: NostrEvent = JSON.parse(item.raw);
if (item.parsed) {
- raw.meta = item.parsed;
+ nostrEvent.meta = item.parsed;
} else {
- raw.meta = null;
+ nostrEvent.meta = null;
}
- return raw;
+ const lumeEvent = new LumeEvent(nostrEvent);
+
+ return lumeEvent;
});
if (events.length > 0) {
@@ -115,7 +118,7 @@ export class LumeEvent {
for (const event of events) {
const tags = event.tags.filter(
- (el) => el[0] === "e" && el[1] !== id && el[3] !== "mention",
+ (el) => el[0] === "e" && el[1] !== this.id && el[3] !== "mention",
);
if (tags.length > 0) {
@@ -141,6 +144,9 @@ export class LumeEvent {
}
return events;
+ } else {
+ console.error(query.error);
+ return [];
}
}
diff --git a/packages/system/src/query.ts b/packages/system/src/query.ts
index da4e50dc..716ee6f5 100644
--- a/packages/system/src/query.ts
+++ b/packages/system/src/query.ts
@@ -10,7 +10,7 @@ import { LumeEvent } from "./event";
export class NostrQuery {
static #toLumeEvents(richEvents: RichEvent[]) {
const events = richEvents.map((item) => {
- const nostrEvent = JSON.parse(item.raw) as NostrEvent;
+ const nostrEvent: NostrEvent = JSON.parse(item.raw);
if (item.parsed) {
nostrEvent.meta = item.parsed;