From 93d42633b8e2db2d81f5a01699c964169c602d9a Mon Sep 17 00:00:00 2001 From: Leo dev Date: Sat, 4 Oct 2025 12:06:01 +0200 Subject: [PATCH 1/5] Added simple DMs with node --- src/app/home/page.tsx | 46 ++++++++++++++++++++++---- src/app/server/[id]/page.tsx | 61 ++--------------------------------- src/lib/auth.ts | 62 ++++++++++++++++++++++++++++++++++++ 3 files changed, 104 insertions(+), 65 deletions(-) create mode 100644 src/lib/auth.ts diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx index 3554c13..9568bcf 100644 --- a/src/app/home/page.tsx +++ b/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(null); + const [messages, setMessages] = useState([]); const { user, loading } = useUser(); + const [userList, setUserList] = useState>({}); + + useEffect(() => { + if (!ip || !user || loading) return; + auth(ip, wsRef, () => {}, setMessages); + setUserList((prev) => { + prev[user.id] = user; + return prev; + }); + }, [ip, user, loading]); return ( {}} - 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, + }, + }) + ); + }} /> ); diff --git a/src/app/server/[id]/page.tsx b/src/app/server/[id]/page.tsx index 0b7a978..84c22b5 100644 --- a/src/app/server/[id]/page.tsx +++ b/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; diff --git a/src/lib/auth.ts b/src/lib/auth.ts new file mode 100644 index 0000000..99da046 --- /dev/null +++ b/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, + setServer: Dispatch>, + setMessages: Dispatch> +) { + 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(); + }; +} From 2ed915a08266f0f4472b13279a3957c32a75667c Mon Sep 17 00:00:00 2001 From: Leo dev Date: Sat, 4 Oct 2025 13:58:46 +0200 Subject: [PATCH 2/5] Better addresses --- src/app/home/page.tsx | 4 ++-- src/app/server/[id]/page.tsx | 4 ++-- src/lib/auth.ts | 6 +++++- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx index 9568bcf..9f4e133 100644 --- a/src/app/home/page.tsx +++ b/src/app/home/page.tsx @@ -6,7 +6,7 @@ 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"; +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 @@ -22,7 +22,7 @@ export default function AppHome() { useEffect(() => { if (!ip || !user || loading) return; - auth(ip, wsRef, () => {}, setMessages); + auth(makeAddress(ip, 7090), wsRef, () => {}, setMessages); setUserList((prev) => { prev[user.id] = user; return prev; diff --git a/src/app/server/[id]/page.tsx b/src/app/server/[id]/page.tsx index 84c22b5..6cc5bb0 100644 --- a/src/app/server/[id]/page.tsx +++ b/src/app/server/[id]/page.tsx @@ -8,7 +8,7 @@ import Message from "@/types/message"; import useUser, { User } from "@/hooks/get-user"; import { NumberMap } from "@/types/typeUtils"; import ServerType from "@/types/server"; -import auth from "@/lib/auth"; +import auth, { makeAddress } from "@/lib/auth"; export default function Server() { const { id: ip } = useParams<{ id: string }>(); @@ -20,7 +20,7 @@ export default function Server() { useEffect(() => { if (!ip || !user || loading) return; - auth(ip, wsRef, setServer, setMessages); + auth(makeAddress(ip), wsRef, setServer, setMessages); setUserList((prev) => { prev[user.id] = user; return prev; diff --git a/src/lib/auth.ts b/src/lib/auth.ts index 99da046..f044f97 100644 --- a/src/lib/auth.ts +++ b/src/lib/auth.ts @@ -3,6 +3,10 @@ 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, @@ -14,7 +18,7 @@ export default async function auth( ).token; // Open the WebSocket connection - const ws = new WebSocket(`ws://${ip}:7080`); + const ws = new WebSocket(`ws://${ip}`); wsRef.current = ws; ws.onopen = () => { From 340df8380b834e34efa628834eb3961574735b08 Mon Sep 17 00:00:00 2001 From: Leo dev Date: Sat, 4 Oct 2025 16:45:42 +0200 Subject: [PATCH 3/5] Small stuff --- src/app/home/page.tsx | 7 +++++-- src/types/message.ts | 2 +- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx index 9f4e133..24882c3 100644 --- a/src/app/home/page.tsx +++ b/src/app/home/page.tsx @@ -14,6 +14,7 @@ import auth, { makeAddress } from "@/lib/auth"; 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(null); const [messages, setMessages] = useState([]); @@ -35,13 +36,15 @@ export default function AppHome() { channelName="Alice" userList={userList} setUserList={setUserList} - messages={messages.filter((m) => m.channel_id === "alice").toReversed()} + 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: "alice", + channel_id: id, contents: message, }, }) diff --git a/src/types/message.ts b/src/types/message.ts index 101e388..68074f3 100644 --- a/src/types/message.ts +++ b/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; From 9aa795ae4946fb42f7ca2acbd3cf65866821c13f Mon Sep 17 00:00:00 2001 From: Leo dev Date: Sat, 4 Oct 2025 22:07:05 +0200 Subject: [PATCH 4/5] Direct messages with /id --- src/app/home/[id]/page.tsx | 55 ++++++++++++++++++++++++++++++++++++++ src/components/Sidebar.tsx | 2 +- 2 files changed, 56 insertions(+), 1 deletion(-) create mode 100644 src/app/home/[id]/page.tsx diff --git a/src/app/home/[id]/page.tsx b/src/app/home/[id]/page.tsx new file mode 100644 index 0000000..ecdc88c --- /dev/null +++ b/src/app/home/[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(null); + const [messages, setMessages] = useState([]); + const { user, loading } = useUser(); + const [userList, setUserList] = useState>({}); + + useEffect(() => { + if (!numericId || !user || loading) return; + auth(makeAddress("localhost", 7090), wsRef, () => {}, setMessages); + setUserList((prev) => { + prev[user.id] = user; + return prev; + }); + }, [id, user, loading]); + + return ( + + m.channel_id === numericId || m.from === numericId) + .toReversed()} + sendMessage={(message) => { + wsRef.current?.send( + JSON.stringify({ + type: "send_message", + params: { + channel_id: numericId, + contents: message, + }, + }) + ); + }} + /> + + ); +} diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index 86e5a29..1a21f36 100644 --- a/src/components/Sidebar.tsx +++ b/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: "" }); From 0655b78150e9321db7d325d08ba2b4724afdcd7f Mon Sep 17 00:00:00 2001 From: Leo dev Date: Sat, 4 Oct 2025 22:16:32 +0200 Subject: [PATCH 5/5] Changed /home to /chat --- src/app/{home => chat}/[id]/page.tsx | 0 src/app/{home => chat}/page.tsx | 0 src/components/Sidebar.tsx | 2 +- src/components/auth/CreateAccount.tsx | 2 +- src/components/auth/Login.tsx | 2 +- 5 files changed, 3 insertions(+), 3 deletions(-) rename src/app/{home => chat}/[id]/page.tsx (100%) rename src/app/{home => chat}/page.tsx (100%) diff --git a/src/app/home/[id]/page.tsx b/src/app/chat/[id]/page.tsx similarity index 100% rename from src/app/home/[id]/page.tsx rename to src/app/chat/[id]/page.tsx diff --git a/src/app/home/page.tsx b/src/app/chat/page.tsx similarity index 100% rename from src/app/home/page.tsx rename to src/app/chat/page.tsx diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index 1a21f36..1a78e2b 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -70,7 +70,7 @@ export default function AppSidebar({