update chats

src/app/chat/components/item.tsx

@@ -45,7 +45,7 @@ export function ChatsListItem({ data }: { data: any }) {
 							</h5>
 						</div>
 						<div className="flex items-center">
-							{data.new_messages && (
+							{data.new_messages > 0 && (
 								<span className="inline-flex items-center justify-center rounded bg-fuchsia-400/10 w-8 px-1 py-1 text-xs font-medium text-fuchsia-500 ring-1 ring-inset ring-fuchsia-400/20">
 									{data.new_messages}
 								</span>

src/app/chat/components/list.tsx

@@ -15,13 +15,14 @@ export function ChatsList() {
 	} = useQuery(
 		["chats"],
 		async () => {
-			return await getChatsByPubkey(account.pubkey);
+			const chats = await getChatsByPubkey(account.pubkey);
+			const sorted = chats.sort(
+				(a, b) => parseInt(a.new_messages) - parseInt(b.new_messages),
+			);
+			return sorted;
 		},
 		{
 			enabled: account ? true : false,
-			refetchOnWindowFocus: false,
-			refetchOnMount: false,
-			refetchOnReconnect: false,
 		},
 	);
 

src/libs/storage.tsx

@@ -343,7 +343,8 @@ export async function getChatsByPubkey(pubkey: string) {
 	const result: any = await db.select(
 		`SELECT DISTINCT sender_pubkey FROM chats WHERE receiver_pubkey = "${pubkey}" ORDER BY created_at DESC;`,
 	);
-	return result;
+	const newArr: any = result.map((v) => ({ ...v, new_messages: 0 }));
+	return newArr;
 }
 
 // get chat messages
@@ -382,10 +383,11 @@ export async function createChat(
 	created_at: number,
 ) {
 	const db = await connect();
-	return await db.execute(
+	await db.execute(
 		"INSERT OR IGNORE INTO chats (event_id, receiver_pubkey, sender_pubkey, content, tags, created_at) VALUES (?, ?, ?, ?, ?, ?);",
 		[event_id, receiver_pubkey, sender_pubkey, content, tags, created_at],
 	);
+	return sender_pubkey;
 }
 
 // get last login

src/shared/accounts/active.tsx

@@ -1,30 +1,55 @@
-import { getLastLogin } from "@libs/storage";
+import { createChat, getLastLogin } from "@libs/storage";
 import { Image } from "@shared/image";
 import { NetworkStatusIndicator } from "@shared/networkStatusIndicator";
 import { RelayContext } from "@shared/relayProvider";
-import { useChannels } from "@stores/channels";
-import { useChats } from "@stores/chats";
 import { DEFAULT_AVATAR } from "@stores/constants";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useProfile } from "@utils/hooks/useProfile";
 import { sendNativeNotification } from "@utils/notification";
+import { produce } from "immer";
 import { useContext, useEffect } from "react";
 
 const lastLogin = await getLastLogin();
 
 export function ActiveAccount({ data }: { data: any }) {
 	const ndk = useContext(RelayContext);
-
-	const notifyChat = useChats((state: any) => state.add);
-	const notifyChannel = useChannels((state: any) => state.add);
+	const queryClient = useQueryClient();
 
 	const { status, user } = useProfile(data.pubkey);
 
+	const chat = useMutation({
+		mutationFn: (data: any) => {
+			return createChat(
+				data.id,
+				data.receiver_pubkey,
+				data.sender_pubkey,
+				data.content,
+				data.tags,
+				data.created_at,
+			);
+		},
+		onSuccess: (data: any) => {
+			const prev = queryClient.getQueryData(["chats"]);
+			const next = produce(prev, (draft: any) => {
+				const target = draft.findIndex(
+					(m: { sender_pubkey: string }) => m.sender_pubkey === data,
+				);
+				if (target !== -1) {
+					draft[target]["new_messages"] =
+						draft[target]["new_messages"] + 1 || 1;
+				} else {
+					draft.push({ sender_pubkey: data, new_messages: 1 });
+				}
+			});
+			queryClient.setQueryData(["chats"], next);
+		},
+	});
+
 	useEffect(() => {
 		const since = lastLogin > 0 ? lastLogin : Math.floor(Date.now() / 1000);
-		// subscribe to channel
 		const sub = ndk.subscribe(
 			{
-				kinds: [1, 4, 42],
+				kinds: [1, 4],
 				"#p": [data.pubkey],
 				since: since,
 			},
@@ -41,16 +66,17 @@ export function ActiveAccount({ data }: { data: any }) {
 					break;
 				case 4:
 					// update state
-					notifyChat(event.pubkey);
+					chat.mutate({
+						id: event.id,
+						receiver_pubkey: data.pubkey,
+						sender_pubkey: event.pubkey,
+						content: event.content,
+						tags: event.tags,
+						created_at: event.created_at,
+					});
 					// send native notifiation
 					sendNativeNotification("You've received new message");
 					break;
-				case 42:
-					// update state
-					notifyChannel(event);
-					// send native notifiation
-					sendNativeNotification(event.content);
-					break;
 				default:
 					break;
 			}