Added simple DMs with node

src/app/home/page.tsx

@@ -1,20 +1,52 @@
 "use client";
 
-import AppSidebar from "@/components/Sidebar";
+import { useEffect, useRef, useState } from "react";
 import MessageBox from "@/components/MessageBox";
-import useUser from "@/hooks/get-user";
+import AppSidebar from "@/components/Sidebar";
+import Message from "@/types/message";
+import useUser, { User } from "@/hooks/get-user";
+import { NumberMap } from "@/types/typeUtils";
+import auth from "@/lib/auth";
 
-export default function HomePage() {
+// In this testing instance we are assuming that Alice's node is localhost
+// To make this functional we need to add a settings feature to the api
+
+export default function AppHome() {
+  // Again we assume a static id, specifically Alice's user id
+  // const { id } = useParams<{ id: string }>();
+  const ip = "localhost";
+  const wsRef = useRef<WebSocket | null>(null);
+  const [messages, setMessages] = useState<Message[]>([]);
   const { user, loading } = useUser();
+  const [userList, setUserList] = useState<NumberMap<User>>({});
+
+  useEffect(() => {
+    if (!ip || !user || loading) return;
+    auth(ip, wsRef, () => {}, setMessages);
+    setUserList((prev) => {
+      prev[user.id] = user;
+      return prev;
+    });
+  }, [ip, user, loading]);
 
   return (
     <AppSidebar user={user}>
       <MessageBox
         channelName="Alice"
-        messages={[]}
-        userList={[]}
-        setUserList={() => {}}
-        sendMessage={() => {}}
+        userList={userList}
+        setUserList={setUserList}
+        messages={messages.filter((m) => m.channel_id === "alice").toReversed()}
+        sendMessage={(message) => {
+          wsRef.current?.send(
+            JSON.stringify({
+              type: "send_message",
+              params: {
+                channel_id: "alice",
+                contents: message,
+              },
+            })
+          );
+        }}
       />
     </AppSidebar>
   );

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

@@ -6,10 +6,9 @@ import MessageBox from "@/components/MessageBox";
 import AppSidebar from "@/components/Sidebar";
 import Message from "@/types/message";
 import useUser, { User } from "@/hooks/get-user";
-import Cookies from "js-cookie";
-import axios from "axios";
-import { NumberMap, StringMap } from "@/types/typeUtils";
+import { NumberMap } from "@/types/typeUtils";
 import ServerType from "@/types/server";
+import auth from "@/lib/auth";
 
 export default function Server() {
   const { id: ip } = useParams<{ id: string }>();
@@ -21,61 +20,7 @@ export default function Server() {
 
   useEffect(() => {
     if (!ip || !user || loading) return;
-
-    async function auth() {
-      const server_auth = (
-        (await axios.post("/api/auth", { server_ip: ip })).data as any
-      ).token;
-
-      // Open the WebSocket connection
-      const ws = new WebSocket(`ws://${ip}:7080`);
-      wsRef.current = ws;
-
-      ws.onopen = () => {
-        console.log("Connected to WebSocket:", ip);
-        ws.send(
-          JSON.stringify({
-            version: "0.0.1",
-            auth_token: server_auth,
-            last_message: 0,
-          })
-        );
-      };
-
-      ws.onmessage = (m) => {
-        const data = JSON.parse(m.data);
-        console.log("Message received:", data);
-
-        if (data.version) {
-          setServer(data);
-          return;
-        }
-
-        switch (data.type) {
-          case "authenticated":
-            setMessages(data.params.messages);
-
-          case "message_create":
-            // setMessages([...messages, data.params]);
-            setMessages((prev) => [...prev, data.params]);
-        }
-      };
-
-      ws.onerror = (err) => {
-        console.error("WebSocket error:", err);
-      };
-
-      ws.onclose = () => {
-        console.log("WebSocket closed:", ip);
-      };
-
-      // Cleanup on unmount or id change
-      return () => {
-        ws.close();
-      };
-    }
-
-    auth();
+    auth(ip, wsRef, setServer, setMessages);
     setUserList((prev) => {
       prev[user.id] = user;
       return prev;

src/lib/auth.ts

@@ -0,0 +1,62 @@
+import Message from "@/types/message";
+import Server from "@/types/server";
+import axios from "axios";
+import { Dispatch, RefObject, SetStateAction } from "react";
+
+export default async function auth(
+  ip: string,
+  wsRef: RefObject<WebSocket | null>,
+  setServer: Dispatch<SetStateAction<Server | undefined>>,
+  setMessages: Dispatch<SetStateAction<Message[]>>
+) {
+  const server_auth = (
+    (await axios.post("/api/auth", { server_ip: ip })).data as any
+  ).token;
+
+  // Open the WebSocket connection
+  const ws = new WebSocket(`ws://${ip}:7080`);
+  wsRef.current = ws;
+
+  ws.onopen = () => {
+    console.log("Connected to WebSocket:", ip);
+    ws.send(
+      JSON.stringify({
+        version: "0.0.1",
+        auth_token: server_auth,
+        last_message: 0,
+      })
+    );
+  };
+
+  ws.onmessage = (m) => {
+    const data = JSON.parse(m.data);
+    console.log("Message received:", data);
+
+    if (data.version) {
+      setServer(data);
+      return;
+    }
+
+    switch (data.type) {
+      case "authenticated":
+        setMessages(data.params.messages);
+
+      case "message_create":
+        // setMessages([...messages, data.params]);
+        setMessages((prev) => [...prev, data.params]);
+    }
+  };
+
+  ws.onerror = (err) => {
+    console.error("WebSocket error:", err);
+  };
+
+  ws.onclose = () => {
+    console.log("WebSocket closed:", ip);
+  };
+
+  // Cleanup on unmount or id change
+  return () => {
+    ws.close();
+  };
+}