Updated structure

src/components/app/AppLayout.tsx

@@ -4,7 +4,6 @@ import React, { useEffect } from "react";
 import { cn } from "@/lib/utils";
 import { useRouter } from "next/navigation";
 import { toast } from "sonner";
-import auth from "@/lib/node";
 import { useIsMobile } from "@/hooks/is-mobile";
 import App from "@/types/app";
 import { Message } from "@/types/types";
@@ -14,6 +13,7 @@ import SidebarDMs from "./SidebarDMs";
 import SidebarChannels from "./SidebarChannels";
 import DMItem from "./DMItem";
 import { useEffectOnceWhenReady } from "@/hooks/use-once";
+import { getNode, useNullNode } from "@/hooks/use-node";
 
 export default function AppLayout({
   children,
@@ -28,44 +28,46 @@ export default function AppLayout({
 }) {
   const router = useRouter();
   const isMobile = useIsMobile();
+  const node = useNullNode();
 
   useEffectOnceWhenReady(
     () => {
       if (!app.profile?.node_address) return;
 
-      auth({
-        id: app.profile.node_address,
-        wsRef: app.node,
-        onNewMessage: (m) => {
-          if (m.from !== chatWith && m.from !== app.profile?.id)
-            toast(
-              `New message from ${
-                app.profiles[m.from]?.display_name || m.from
-              }`,
-              {
-                description: m.contents.slice(0, 80),
-                action: {
-                  label: "View",
-                  onClick: () => router.push(`/chat/${m.from}`),
-                },
-                position: "top-right",
-              }
-            );
+      return getNode(
+        app.profile?.node_address,
+        app.privateMessages,
+        {
+          onNewMessage: (m) => {
+            if (m.from !== chatWith && m.from !== app.profile?.id)
+              toast(
+                `New message from ${
+                  app.profiles[m.from]?.display_name || m.from
+                }`,
+                {
+                  description: m.contents.slice(0, 80),
+                  action: {
+                    label: "View",
+                    onClick: () => router.push(`/chat/${m.from}`),
+                  },
+                  position: "top-right",
+                }
+              );
 
-          if (onNewMessage) onNewMessage(m);
+            if (onNewMessage) onNewMessage(m);
+          },
         },
-        messageStore: app.privateMessages,
-      });
-
-      app.setProfiles((prev) => {
-        if (app.profile) prev[app.profile.id] = app.profile;
-        return prev;
-      });
+        node
+      );
     },
     [chatWith, app.profile],
     [undefined, undefined]
   );
 
+  useEffect(() => {
+    app.node.current = node.current;
+  }, [node]);
+
   useEffect(() => app.setSidebarOpen(!isMobile), [isMobile]);
 
   return (

src/components/channel/ChannelView.tsx

@@ -1,29 +1,36 @@
 import { Message } from "@/types/types";
 import MessageBox from "./MessageBox";
 import App from "@/types/app";
-import React from "react";
+import React, { RefObject } from "react";
 import PluginChannel from "./PluginChannel";
-import { IndicatorContext } from "@/types/protocol";
+import { ClientMessage, IndicatorContext } from "@/types/protocol";
 import VoiceBox from "./voice/VoiceBox";
 import { sendVoice } from "@/lib/audio";
+import { NodeClient } from "@/lib/node";
 
 export default function ChannelView({
   app,
   messages,
   ip,
-  serverRef,
+  node,
   indicators,
 }: {
   app: App;
   messages: Message[];
   ip: string;
-  serverRef: React.RefObject<WebSocket | null>;
   indicators: IndicatorContext[];
+  node: RefObject<NodeClient | null>;
 }) {
   if (!app.currentChannel)
     return (
       <div className="h-svh w-full max-h-svh flex flex-col pb-5 pl-5 gap-5" />
     );
+
+  const sendRequest = (req: ClientMessage) => {
+    node.current?.socket?.send(JSON.stringify(req));
+    console.log(node.current?.socket);
+  };
+
   switch (app.currentChannel.kind) {
     case "text":
       return (
@@ -31,10 +38,7 @@ export default function ChannelView({
           app={app}
           channelName={app.currentChannel.name}
           messages={messages}
-          sendRequest={(req) => {
-            while (serverRef.current?.CONNECTING) {}
-            serverRef.current?.send(JSON.stringify(req));
-          }}
+          sendRequest={sendRequest}
           indicators={indicators.filter(
             (indicator) =>
               indicator.indicator.params.user_id !== app.profile?.id
@@ -49,13 +53,13 @@ export default function ChannelView({
           channelName={app.currentChannel.name}
           channelId={app.currentChannel.id}
           messages={messages}
-          sendRequest={(req) => {
-            while (serverRef.current?.CONNECTING) {}
-            serverRef.current?.send(JSON.stringify(req));
-          }}
+          sendRequest={sendRequest}
           sendVoice={(data) => {
-            while (!serverRef.current || serverRef.current?.CONNECTING) {}
-            sendVoice(serverRef.current, data);
+            if (!node.current?.socket) {
+              return;
+            }
+
+            sendVoice(node.current?.socket, data);
           }}
           indicators={indicators.filter(
             (indicator) =>
@@ -66,12 +70,7 @@ export default function ChannelView({
 
     default:
       return (
-        <PluginChannel
-          app={app}
-          messages={messages}
-          ip={ip}
-          serverRef={serverRef}
-        />
+        <PluginChannel app={app} messages={messages} ip={ip} node={node} />
       );
   }
 }

src/components/channel/PluginChannel.tsx

@@ -2,17 +2,18 @@ import { Message } from "@/types/types";
 import App from "@/types/app";
 import React, { useEffect, useRef } from "react";
 import { useParentCommunication } from "react-iframes-bridge";
+import { NodeClient } from "@/lib/node";
 
 export default function PluginChannel({
   app,
   messages,
   ip,
-  serverRef,
+  node,
 }: {
   app: App;
   messages: Message[];
   ip: string;
-  serverRef: React.RefObject<WebSocket | null>;
+  node: React.RefObject<NodeClient | null>;
 }) {
   if (!app.currentChannel)
     return (
@@ -32,7 +33,7 @@ export default function PluginChannel({
     });
 
     parentComm.onMessage("SEND_MESSAGE", (msg: string) => {
-      serverRef.current?.send(
+      node.current?.socket?.send(
         JSON.stringify({
           type: "send_message",
           params: {