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>

src/components/Sidebar.tsx

@@ -8,8 +8,8 @@ import {
   SettingsIcon,
   Volume2Icon,
 } from "lucide-react";
-import { Server, Channel } from "@/types/types";
+import { Server, Channel, Message } from "@/types/types";
-import { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import Cookies from "js-cookie";
 import {
   Dialog,
@@ -25,32 +25,69 @@ import { Input } from "./ui/input";
 import { Label } from "./ui/label";
 import { Button } from "./ui/button";
 import { Card } from "./ui/card";
-import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
 import { ScrollArea } from "./ui/scroll-area";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
-import { NumberMap } from "@/types/typeUtils";
+import useUser, { User } from "@/hooks/get-user";
-import { User } from "@/hooks/get-user";
 import ProfilePicture from "./ProfilePicture";
+import auth, { makeAddress } from "@/lib/auth";
+import { toast } from "sonner";
+import { StringMap } from "@/types/typeUtils";
 
 export default function AppSidebar({
-  user,
-  server,
   children,
+  chatWith,
+  wsRef,
+  setMessages,
+  onNewMessage,
 }: Readonly<{
-  server?: Server;
+  wsRef: React.RefObject<WebSocket | null>;
-  user: User | null;
+  setMessages: React.Dispatch<React.SetStateAction<Message[]>>;
+  onNewMessage?: (msg: Message) => void;
+  userList: StringMap<User>;
+  setUserList: React.Dispatch<React.SetStateAction<StringMap<User>>>;
+  chatWith?: string;
   children?: React.ReactNode;
 }>) {
   const [servers, setServers] = useState<[string, string][]>([]);
   const [newServer, setNewServer] = useState({ name: "", ip: "" });
+  const [server, setServer] = useState<Server | undefined>();
   const router = useRouter();
+  const user = useUser();
+  const [userList, setUserList] = useState<StringMap<User>>({});
+  const ip = "192.168.100.3";
 
   useEffect(() => {
     const s = Cookies.get("servers")?.split(",");
     if (s) setServers(s.map((x) => x.trim().split("@") as [string, string]));
   }, []);
 
+  useEffect(() => {
+    if (!ip || !user) return;
+    auth(
+      makeAddress(ip, 7090),
+      wsRef,
+      () => {},
+      setMessages,
+      (m) => {
+        if (m.from !== chatWith)
+          toast(`New message from ${m.from}`, {
+            description: m.contents.slice(0, 80),
+            action: {
+              label: "View",
+              onClick: () => router.push(`/chat/${m.from}`),
+            },
+          });
+
+        if (onNewMessage) onNewMessage(m);
+      }
+    );
+    setUserList((prev) => {
+      prev[user.id] = user;
+      return prev;
+    });
+  }, [chatWith, user]);
+
   const handleAddServer = () => {
     if (!newServer.ip) return;
     const updatedServers = [
@@ -204,7 +241,7 @@ export default function AppSidebar({
 function DMItem({ name, status }: { name: string; status: string }) {
   return (
     <Card className="p-2 flex flex-row items-center gap-2 cursor-pointer hover:bg-accent">
-      <ProfilePicture name={name} />
+      <ProfilePicture name={name} url="" />
       <div className="flex flex-col">
         <span className="text-sm font-medium">{name}</span>
         <span className="text-xs text-muted-foreground">{status}</span>

src/hooks/get-user.ts

@@ -14,7 +14,6 @@ export interface User {
 
 export default function useUser() {
   const [user, setUser] = useState<User | null>(null);
-  const [loading, setLoading] = useState(true);
   const router = useRouter();
 
   useEffect(() => {
@@ -31,13 +30,11 @@ export default function useUser() {
         setUser(res);
       } catch {
         router.push("/login");
-      } finally {
-        setLoading(false);
       }
     }
 
     fetchUser();
   }, [router]);
 
-  return { user, loading };
+  return user;
 }

src/lib/auth.ts

@@ -38,7 +38,7 @@ export default async function auth(
     console.log("Message received:", data);
 
     if (data.version) {
-      setServer(data);
+      setServer({ channels: [], ...data });
       return;
     }