Merge pull request #6 from kleo-dev/simple-dms-node

Simple dms with node structure

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

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

src/app/chat/page.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import MessageBox from "@/components/MessageBox";
+import AppSidebar from "@/components/Sidebar";
+import Message from "@/types/message";
+import useUser, { User } from "@/hooks/get-user";
+import { NumberMap } from "@/types/typeUtils";
+import auth, { makeAddress } from "@/lib/auth";
+
+// 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 id = 667;
+  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(makeAddress(ip, 7090), wsRef, () => {}, setMessages);
+    setUserList((prev) => {
+      prev[user.id] = user;
+      return prev;
+    });
+  }, [ip, user, loading]);
+
+  return (
+    <AppSidebar user={user}>
+      <MessageBox
+        channelName="Alice"
+        userList={userList}
+        setUserList={setUserList}
+        messages={messages
+          .filter((m) => m.channel_id === id || m.from === id)
+          .toReversed()}
+        sendMessage={(message) => {
+          wsRef.current?.send(
+            JSON.stringify({
+              type: "send_message",
+              params: {
+                channel_id: id,
+                contents: message,
+              },
+            })
+          );
+        }}
+      />
+    </AppSidebar>
+  );
+}

src/app/home/page.tsx

@@ -1,21 +0,0 @@
-"use client";
-
-import AppSidebar from "@/components/Sidebar";
-import MessageBox from "@/components/MessageBox";
-import useUser from "@/hooks/get-user";
-
-export default function HomePage() {
-  const { user, loading } = useUser();
-
-  return (
-    <AppSidebar user={user}>
-      <MessageBox
-        channelName="Alice"
-        messages={[]}
-        userList={[]}
-        setUserList={() => {}}
-        sendMessage={() => {}}
-      />
-    </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, { makeAddress } 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(makeAddress(ip), wsRef, setServer, setMessages);
     setUserList((prev) => {
       prev[user.id] = user;
       return prev;

src/components/Sidebar.tsx

@@ -40,7 +40,7 @@ export default function AppSidebar({
 }: Readonly<{
   server?: Server;
   user: User | null;
-  children: React.ReactNode;
+  children?: React.ReactNode;
 }>) {
   const [servers, setServers] = useState<[string, string][]>([]);
   const [newServer, setNewServer] = useState({ name: "", ip: "" });
@@ -70,7 +70,7 @@ export default function AppSidebar({
       <div className="h-screen flex border-r">
         <div className="w-16 flex flex-col items-center gap-4 py-4 bg-muted border-r">
           <Button
-            onClick={() => router.push(`/home`)}
+            onClick={() => router.push(`/chat`)}
             className="bg-transparent text-accent-foreground hover:text-accent"
           >
             <MessageCircle className="h-6 w-6" />

src/components/auth/CreateAccount.tsx

@@ -71,7 +71,7 @@ export default function CreateAccount() {
       Cookies.set("token", (res.data as any).token);
 
       setFeedback({ kind: "info", message: "Account created! Redirecting..." });
-      setTimeout(() => router.push("/home"), 1000);
+      setTimeout(() => router.push("/chat"), 1000);
     } catch (err: any) {
       setFeedback({
         kind: "error",

src/components/auth/Login.tsx

@@ -37,7 +37,7 @@ export default function Login() {
       });
 
       // small delay to show feedback before redirect
-      setTimeout(() => router.push("/home"), 800);
+      setTimeout(() => router.push("/chat"), 800);
     } catch (err: any) {
       setFeedback({
         kind: "error",

src/lib/auth.ts

@@ -0,0 +1,66 @@
+import Message from "@/types/message";
+import Server from "@/types/server";
+import axios from "axios";
+import { Dispatch, RefObject, SetStateAction } from "react";
+
+export function makeAddress(ip: string, defaultPort = 7080) {
+  return ip.includes(":") ? `${ip}` : `${ip}:${defaultPort}`;
+}
+
+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}`);
+  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();
+  };
+}

src/types/message.ts

@@ -1,6 +1,6 @@
 export default interface Message {
   id: number;
-  channel_id: string;
+  channel_id: string | number;
   from: number;
   contents: string;
   timestamp: number;