polish

src/app/auth/onboarding.tsx

@@ -1,37 +1,29 @@
-import { NDKEvent, NDKPrivateKeySigner } from "@nostr-dev-kit/ndk";
+import { usePublish } from "@libs/ndk";
 import { LoaderIcon } from "@shared/icons";
 import { ArrowRightCircleIcon } from "@shared/icons/arrowRightCircle";
-import { RelayContext } from "@shared/relayProvider";
 import { User } from "@shared/user";
-import { dateToUnix } from "@utils/date";
 import { useAccount } from "@utils/hooks/useAccount";
-import { useContext, useState } from "react";
+import { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 
 export function OnboardingScreen() {
-	const ndk = useContext(RelayContext);
+	const publish = usePublish();
 	const navigate = useNavigate();
 
 	const { status, account } = useAccount();
 	const [loading, setLoading] = useState(false);
 
-	const publish = async () => {
+	const submit = async () => {
 		try {
 			setLoading(true);
 
-			const event = new NDKEvent(ndk);
-			const signer = new NDKPrivateKeySigner(account.privkey);
-			ndk.signer = signer;
-
-			event.content =
-				"Running Lume, fighting for better future, join us here: https://lume.nu";
-			event.created_at = dateToUnix();
-			event.pubkey = account.pubkey;
-			event.kind = 1;
-			event.tags = [];
-
 			// publish event
-			event.publish();
+			publish({
+				content:
+					"Running Lume, fighting for better future, join us here: https://lume.nu",
+				kind: 1,
+				tags: [],
+			});
 
 			// redirect to home
 			setTimeout(() => navigate("/", { replace: true }), 1200);
@@ -81,7 +73,7 @@ export function OnboardingScreen() {
 				<div className="mt-4 w-full flex flex-col gap-2">
 					<button
 						type="button"
-						onClick={() => publish()}
+						onClick={() => submit()}
 						className="inline-flex h-12 w-full items-center justify-between gap-2 rounded-lg px-6 font-medium text-zinc-100 bg-fuchsia-500 hover:bg-fuchsia-600"
 					>
 						{loading ? (

src/app/chat/components/messages/form.tsx

@@ -1,20 +1,14 @@
-import { NDKEvent, NDKPrivateKeySigner } from "@nostr-dev-kit/ndk";
+import { usePublish } from "@libs/ndk";
 import { EnterIcon } from "@shared/icons";
 import { MediaUploader } from "@shared/mediaUploader";
-import { RelayContext } from "@shared/relayProvider";
-import { useChatMessages } from "@stores/chats";
-import { dateToUnix } from "@utils/date";
 import { nip04 } from "nostr-tools";
-import { useCallback, useContext, useState } from "react";
+import { useCallback, useState } from "react";
 
 export function ChatMessageForm({
 	receiverPubkey,
-	userPubkey,
 	userPrivkey,
 }: { receiverPubkey: string; userPubkey: string; userPrivkey: string }) {
-	const ndk = useContext(RelayContext);
-	const addMessage = useChatMessages((state: any) => state.add);
-
+	const publish = usePublish();
 	const [value, setValue] = useState("");
 
 	const encryptMessage = useCallback(async () => {
@@ -23,23 +17,10 @@ export function ChatMessageForm({
 
 	const submit = async () => {
 		const message = await encryptMessage();
+		const tags = [["p", receiverPubkey]];
 
-		const signer = new NDKPrivateKeySigner(userPrivkey);
-		ndk.signer = signer;
-
-		const event = new NDKEvent(ndk);
-		// build event
-		event.content = message;
-		event.kind = 4;
-		event.created_at = dateToUnix();
-		event.pubkey = userPubkey;
-		event.tags = [["p", receiverPubkey]];
-
-		// publish event
-		event.publish();
-
-		// add message to store
-		addMessage(receiverPubkey, event);
+		// publish message
+		publish({ content: message, kind: 4, tags });
 
 		// reset state
 		setValue("");

src/app/chat/index.tsx

@@ -1,14 +1,18 @@
 import { ChatMessageForm } from "@app/chat/components/messages/form";
 import { ChatMessageItem } from "@app/chat/components/messages/item";
 import { ChatSidebar } from "@app/chat/components/sidebar";
-import { getChatMessages } from "@libs/storage";
-import { useQuery } from "@tanstack/react-query";
+import { createChat, getChatMessages } from "@libs/storage";
+import { NDKSubscription } from "@nostr-dev-kit/ndk";
+import { RelayContext } from "@shared/relayProvider";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useAccount } from "@utils/hooks/useAccount";
-import { useCallback, useRef } from "react";
+import { useCallback, useContext, useEffect, useRef } from "react";
 import { useParams } from "react-router-dom";
 import { Virtuoso } from "react-virtuoso";
 
 export function ChatScreen() {
+	const ndk = useContext(RelayContext);
+	const queryClient = useQueryClient();
 	const virtuosoRef = useRef(null);
 
 	const { pubkey } = useParams();
@@ -43,6 +47,51 @@ export function ChatScreen() {
 		[data],
 	);
 
+	const chat = useMutation({
+		mutationFn: (data: any) => {
+			return createChat(
+				data.id,
+				data.receiver_pubkey,
+				data.sender_pubkey,
+				data.content,
+				data.tags,
+				data.created_at,
+			);
+		},
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["chat", pubkey] });
+		},
+	});
+
+	useEffect(() => {
+		const sub: NDKSubscription = ndk.subscribe(
+			{
+				kinds: [4],
+				authors: [account.pubkey],
+				"#p": [pubkey],
+				since: Math.floor(Date.now() / 1000),
+			},
+			{
+				closeOnEose: false,
+			},
+		);
+
+		sub.addListener("event", (event) => {
+			chat.mutate({
+				id: event.id,
+				receiver_pubkey: pubkey,
+				sender_pubkey: event.pubkey,
+				content: event.content,
+				tags: event.tags,
+				created_at: event.created_at,
+			});
+		});
+
+		return () => {
+			sub.stop();
+		};
+	}, [pubkey]);
+
 	return (
 		<div className="h-full w-full grid grid-cols-3">
 			<div className="col-span-2 flex flex-col justify-between border-r border-zinc-900">