Trying to fix DMs

src/app/chat/[id]/page.tsx

@@ -5,11 +5,12 @@ import AppLayout from "@/components/app/AppLayout";
 import { useParams, useRouter } from "next/navigation";
 import useApp from "@/hooks/use-app";
 import { useEffect, useRef, useState } from "react";
-import auth from "@/lib/auth";
+import auth, { waitForOpen } from "@/lib/auth";
 import useAsync from "@/hooks/use-async";
 import { Button } from "@/components/ui/button";
 import useIndicators from "@/hooks/use-indicators";
 import { useEffectOnceWhenReady } from "@/hooks/use-once";
+import { ClientMessage } from "@/types/protocol";
 
 export default function DMs() {
   const { id } = useParams<{ id: string }>();
@@ -19,11 +20,30 @@ export default function DMs() {
   const router = useRouter();
   const { indicators, addIndicator } = useIndicators();
 
+  const sendRequest = async (req: ClientMessage) => {
+    console.log("Sending request: ", req);
+    await waitForOpen(targetNode.current);
+    await waitForOpen(app.node.current);
+
+    switch (req.type) {
+      case "send_message":
+        targetNode.current?.send(JSON.stringify(req));
+        break;
+      case "load_chunk":
+        targetNode.current?.send(JSON.stringify(req));
+        app.node.current?.send(JSON.stringify(req));
+        break;
+      default:
+        app.node.current?.send(JSON.stringify(req));
+        break;
+    }
+  };
+
   useEffectOnceWhenReady(
     () => {
       async function connectTargetNode() {
         if (!target) return;
-        auth({
+        await auth({
           id: target.node_address,
           wsRef: targetNode,
           messageStore: app.privateMessages,
@@ -31,13 +51,13 @@ export default function DMs() {
         });
       }
 
-      connectTargetNode();
-
+      connectTargetNode().then(() => {
         app.setCurrentChannel({
           id: id,
           name: target?.display_name || id,
           kind: "text",
         });
+      });
     },
     [target],
     [(v) => v]
@@ -54,25 +74,7 @@ export default function DMs() {
             (m.channel_id === id && m.from === app.profile?.id) ||
             (m.from === id && m.channel_id === app.profile?.id)
         )}
-        sendRequest={(req) => {
-          console.log("Sending request: ", req);
-          while (
-            targetNode.current?.CONNECTING ||
-            app.node.current?.CONNECTING
-          ) {}
-          switch (req.type) {
-            case "send_message":
-              targetNode.current?.send(JSON.stringify(req));
-              break;
-            case "load_chunk":
-              targetNode.current?.send(JSON.stringify(req));
-              app.node.current?.send(JSON.stringify(req));
-              break;
-            default:
-              app.node.current?.send(JSON.stringify(req));
-              break;
-          }
-        }}
+        sendRequest={sendRequest}
         indicators={indicators.filter(
           (indicator) => indicator.indicator.params.user_id !== app.profile?.id
         )}

src/app/chat/page.tsx

@@ -33,7 +33,6 @@ export default function ChatHub() {
 
   const app = useApp();
   const recentPeople = app.dms.slice(0, 3);
-  const activeServers: Server[] = Object.values(app.servers).slice(0, 3);
   const trendingServers: Server[] = [
     {
       id: "7de3138f-e0b6-4d96-8158-8c7e866ba0ff",

src/lib/auth.ts

@@ -163,3 +163,24 @@ export default async function auth({
     ws.close();
   };
 }
+
+export async function waitForOpen(ws: WebSocket | null): Promise<void> {
+  if (ws?.readyState === WebSocket.OPEN) return Promise.resolve();
+
+  return new Promise((resolve, reject) => {
+    const onOpen = () => {
+      ws?.removeEventListener("open", onOpen);
+      ws?.removeEventListener("error", onError);
+      resolve();
+    };
+
+    const onError = (e: Event) => {
+      ws?.removeEventListener("open", onOpen);
+      ws?.removeEventListener("error", onError);
+      reject(e);
+    };
+
+    ws?.addEventListener("open", onOpen);
+    ws?.addEventListener("error", onError);
+  });
+}