Sign up and Working username display

src/app/api/user/route.ts

@@ -84,7 +84,7 @@ export async function GET(req: NextRequest) {
       { status: StatusCodes.BAD_REQUEST }
     );
   else {
-    const id = query_id ? query_id : token ? CLIENT_AUTH_TOKENS[token] : null;
+    const id = query_id ? parseInt(query_id) : token ? CLIENT_AUTH_TOKENS[token] : null;
 
     if (!id)
       return NextResponse.json(

src/app/login/page.tsx

@@ -6,6 +6,8 @@ import axios from "axios";
 import { useState } from "react";
 import Cookies from "js-cookie";
 import { redirect } from "next/navigation";
+import { Label } from "@/components/ui/label";
+import Link from "next/link";
 
 export default function Login() {
   const [username, setUsername] = useState("");
@@ -35,7 +37,11 @@ export default function Login() {
           />
         </span>
 
-        <Button className="mt-4" onClick={login}>
+        <Label>
+          Don't have an account? <Link href={"/signup"}>Sign Up</Link>
+        </Label>
+
+        <Button className="mt-2" onClick={login}>
           Login
         </Button>
       </div>

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

@@ -8,7 +8,7 @@ import Message from "@/types/message";
 import useUser, { User } from "@/hooks/get-user";
 import Cookies from "js-cookie";
 import axios from "axios";
-import { StringMap } from "@/types/typeUtils";
+import { NumberMap, StringMap } from "@/types/typeUtils";
 import ServerType from "@/types/server";
 
 export default function Server() {
@@ -17,7 +17,7 @@ export default function Server() {
   const wsRef = useRef<WebSocket | null>(null);
   const [messages, setMessages] = useState<Message[]>([]);
   const { user, loading } = useUser();
-  const [userList, setUserList] = useState<StringMap<User>>({});
+  const [userList, setUserList] = useState<NumberMap<User>>({});
 
   useEffect(() => {
     if (!ip || !user || loading) return;
@@ -86,6 +86,7 @@ export default function Server() {
     <AppSidebar server={{ channels: [], ...server } as ServerType}>
       <MessageBox
         userList={userList}
+        setUserList={setUserList}
         messages={messages
           .filter((m) => m.channel_id === "general")
           .toReversed()}

src/components/MessageBox.tsx

@@ -11,20 +11,32 @@ import {
   DropdownMenuTrigger,
 } from "./ui/dropdown-menu";
 import { SmilePlusIcon } from "lucide-react";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { format, isToday, isYesterday } from "date-fns";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
-import { StringMap } from "@/types/typeUtils";
+import { NumberMap, StringMap } from "@/types/typeUtils";
 import { User } from "@/hooks/get-user";
+import axios from "axios";
 
 function MessageContainer({
   message,
   userList,
+  setUserList,
 }: {
   message: Message;
-  userList: StringMap<User>;
+  userList: NumberMap<User>;
+  setUserList: React.Dispatch<React.SetStateAction<NumberMap<User>>>;
 }) {
+  useEffect(() => {
+    axios
+      .get("/api/user/", { params: { id: message.from } })
+      .then((res) =>
+        setUserList((prev) => ({ ...prev, [message.from]: res.data as User }))
+      )
+      .catch(console.error);
+  }, [message.from, setUserList]);
+
   return (
     <div className="flex flex-col gap-3 rounded-lg p-4 hover:bg-accent">
       <div className="flex gap-2">
@@ -117,10 +129,12 @@ function MessageContainer({
 export default function MessageBox({
   messages,
   userList,
+  setUserList,
   sendMessage,
 }: {
   messages: Message[];
-  userList: StringMap<User>;
+  userList: NumberMap<User>;
+  setUserList: React.Dispatch<React.SetStateAction<NumberMap<User>>>;
   sendMessage: (m: string) => void;
 }) {
   const [text, setText] = useState("");
@@ -129,7 +143,12 @@ export default function MessageBox({
     <div className="h-screen w-full flex flex-col py-5 pl-5 gap-5">
       <div className="w-full flex-1 overflow-y-scroll flex gap-2 flex-col-reverse pr-5">
         {messages.map((msg) => (
-          <MessageContainer key={msg.id} message={msg} userList={userList} />
+          <MessageContainer
+            key={msg.id}
+            message={msg}
+            userList={userList}
+            setUserList={setUserList}
+          />
         ))}
       </div>
       <div className="w-full flex gap-3 pr-5">

src/types/typeUtils.ts

@@ -2,6 +2,10 @@ export type StringMap<T> = {
   [key: string]: T;
 };
 
+export type NumberMap<T> = {
+  [key: number]: T;
+};
+
 export function narrow<T>(s: T, defd: T, ...allowed: T[]): T {
   if (allowed.includes(s) || s == defd) {
     return s;