Working frontend

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

@@ -1,10 +1,65 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { useParams } from "next/navigation";
 import MessageBox from "@/components/MessageBox";
 import AppSidebar from "@/components/Sidebar";
+import { getUser } from '@/test/user';
+import { auth } from '@/test/auth';
+import Message from "@/types/message";
 
-export default async function Server(params: {
-  params: Promise<{ id: string }>;
-}) {
-  const { id } = await params.params;
+export default function Server() {
+  const { id } = useParams<{ id: string }>();
+  const wsRef = useRef<WebSocket | null>(null);
+  const [messages, setMessages] = useState<Message[]>([]);
+
+  useEffect(() => {
+    if (!id) return;
+
+    getUser().then(session_token => {
+      auth(session_token, id === 'localhost' ? '127.0.0.1' : id).then(server_auth => {
+        // Open the WebSocket connection
+        const ws = new WebSocket(`ws://${id}:7080`);
+        wsRef.current = ws;
+    
+        ws.onopen = () => {
+          console.log("Connected to WebSocket:", id);
+          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);
+
+          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:", id);
+        };
+    
+        // Cleanup on unmount or id change
+        return () => {
+          ws.close();
+        };
+      });
+    })
+  }, [id]);
 
   return (
     <AppSidebar
@@ -20,16 +75,18 @@ export default async function Server(params: {
       }}
     >
       <MessageBox
-        messages={[
+        messages={messages.filter(m => m.channel_id === 'general').toReversed()}
+        sendMessage={(message) => {
+          wsRef.current?.send(JSON.stringify(
             {
-            id: "1",
-            authorId: "user1",
-            content:
-              "# Test\n### Hello World\n\nThis is a **markdown** message with _various_ elements:\n\n- Item 1\n- Item 2\n- Item 3\n\n[Click here](https://example.com) for more info.\n\n1. First\n2. Second\n3. Third",
-            channelId: "1",
-            timestamp: new Date(),
-          },
-        ]}
+              type: 'send_message',
+              params: {
+                channel_id: 'general',
+                contents: message
+              }
+          }
+          ));
+        }}
       />
     </AppSidebar>
   );

src/components/MessageBox.tsx

@@ -23,19 +23,19 @@ function MessageContainer({ message }: { message: Message }) {
         <div className="w-8 h-8 rounded-full bg-gray-400" />
         <div className="flex flex-col flex-1">
           <span className="font-bold flex gap-1 items-center">
-            {message.authorId}
+            {message.from}
 
             <p className="text-neutral-500 text-xs">
-              {isToday(message.timestamp)
-                ? format(message.timestamp, "p")
-                : isYesterday(message.timestamp)
-                ? "Yesterday, " + format(message.timestamp, "p")
-                : format(message.timestamp, "PP, p")}
+              {isToday(message.timestamp * 1000)
+                ? format(message.timestamp * 1000, "p")
+                : isYesterday(message.timestamp * 1000)
+                ? "Yesterday, " + format(message.timestamp * 1000, "p")
+                : format(message.timestamp * 1000, "PP, p")}
             </p>
           </span>
 
           <span className="text-foreground/85 flex flex-col">
-            {message.content.split("\n\n").map((line, index) => (
+            {message.contents.split("\n\n").map((line, index) => (
               <div key={index} className="h-max">
                 {index > 0 && <br />}
                 <ReactMarkdown
@@ -86,7 +86,7 @@ function MessageContainer({ message }: { message: Message }) {
   );
 }
 
-export default function MessageBox({ messages }: { messages: Message[] }) {
+export default function MessageBox({ messages, sendMessage }: { messages: Message[], sendMessage: (m: string) => void }) {
   const [text, setText] = useState("");
 
   return (
@@ -102,6 +102,12 @@ export default function MessageBox({ messages }: { messages: Message[] }) {
           placeholder="Type a message..."
           value={text}
           onChange={(e) => setText(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              sendMessage(text);
+              setText('');
+            }
+          }}
         />
         <DropdownMenu>
           <DropdownMenuTrigger asChild>

src/test/auth.js

@@ -1,16 +1,19 @@
 import axios from "axios";
 import { getUser } from "./user.js";
 
-const session_token = await getUser();
-
-const res = (await axios.post('http://localhost:3000/api/auth', {
-    intents: 'server',
-    server_ip: '127.0.0.1',
+export async function auth(session_token, server_ip) {
+    const res = (await axios.post('http://localhost:3000/api/auth', {
+        server_ip,
         session_token,
-})).data;
+    })).data;
 
-const token = res.token;
+    return res.token;
+}
 
-const output = (await axios.get('http://localhost:3000/api/auth?intents=server&token='+token)).data;
+// const session_token = await getUser();
 
-console.log(output);
+// const token = await auth(session_token);
+
+// const output = (await axios.get('http://localhost:3000/api/auth?intents=server&token='+token)).data;
+
+// console.log(output);

src/types/message.ts

@@ -1,7 +1,7 @@
 export default interface Message {
-  id: string;
-  content: string;
-  authorId: string;
-  channelId: string;
-  timestamp: Date;
+  id: number;
+  channel_id: string;
+  from: number;
+  contents: string;
+  timestamp: number;
 }