Fixes here and there

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

@@ -16,25 +16,18 @@ export default function DMs() {
   const { id } = useParams<{ id: string }>();
   const wsRef = useRef<WebSocket | null>(null);
   const [messages, setMessages] = useState<Message[]>([]);
-  const { user, loading } = useUser();
   const [userList, setUserList] = useState<StringMap<User>>({});
 
-  useEffect(() => {
-    async function fetchInitialData() {
-      if (!user || loading) return;
-      await auth(makeAddress("localhost", 7090), wsRef, () => {}, setMessages);
-      setUserList((prev) => {
-        prev[user.id] = user;
-        return prev;
-      });
-    }
-    fetchInitialData();
-  }, [id, user, loading]);
-
   return (
-    <AppSidebar user={user}>
+    <AppSidebar
+      setMessages={setMessages}
+      wsRef={wsRef}
+      userList={userList}
+      setUserList={setUserList}
+      chatWith={id}
+    >
       <MessageBox
-        channelName="Alice"
+        channelName={userList[id]?.display_name || id}
         userList={userList}
         setUserList={setUserList}
         messages={messages

src/app/chat/page.tsx

@@ -1,41 +1,23 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import AppSidebar from "@/components/Sidebar";
-import useUser, { User } from "@/hooks/get-user";
+import { User } from "@/hooks/get-user";
 import { StringMap } from "@/types/typeUtils";
-import auth, { makeAddress } from "@/lib/auth";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { toast } from "sonner";
 import ProfilePicture from "@/components/ProfilePicture";
 
 export default function Chat() {
-  const ip = "localhost";
   const wsRef = useRef<WebSocket | null>(null);
-  const { user, loading } = useUser();
   const [userList, setUserList] = useState<StringMap<User>>({});
 
-  useEffect(() => {
-    if (!ip || !user || loading) return;
-    auth(
-      makeAddress(ip, 7090),
-      wsRef,
-      () => {},
-      () => {},
-      (m) => {
-        toast(`New message from ${m.from}`, {
-          description: m.contents.slice(0, 80),
-        });
-      }
-    );
-    setUserList((prev) => {
-      prev[user.id] = user;
-      return prev;
-    });
-  }, [ip, user, loading]);
-
   return (
-    <AppSidebar user={user}>
+    <AppSidebar
+      wsRef={wsRef}
+      userList={userList}
+      setUserList={setUserList}
+      setMessages={() => {}}
+    >
       <Card className="bg-background w-full">
         <CardHeader>
           <CardTitle>Direct Messages</CardTitle>