Chat bug fix and top name implementation

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

@@ -6,16 +6,17 @@ import { useParams } from "next/navigation";
 import useApp from "@/hooks/use-app";
 import { useEffect, useRef } from "react";
 import auth from "@/lib/auth";
+import useAsync from "@/hooks/use-async";
 
 export default function DMs() {
   const { id } = useParams<{ id: string }>();
   const app = useApp();
   const targetNode = useRef<WebSocket | null>(null);
+  const { value: target } = useAsync(() => app.getUserById(id));
 
   useEffect(() => {
     async function connectTargetNode() {
-      const target = await app.getUserById(id);
+      if (!target) return;
-      if (target) {
       auth(
         target.node_address,
         targetNode,
@@ -24,16 +25,16 @@ export default function DMs() {
         () => {}
       );
     }
-    }
 
-    connectTargetNode().then(() => {});
+    connectTargetNode();
-  }, [id]);
+  }, [target]);
 
   return (
     <AppSidebar app={app}>
       <MessageBox
         app={app}
-        channelName={app.profiles[id]?.display_name || id}
+        channelName={target?.display_name || id}
+        channelIcon={target?.avatar_url || "_"}
         messages={app.messages.filter(
           (m) =>
             (m.channel_id === id && m.from === app.profile?.id) ||

src/components/MessageBox.tsx

@@ -120,11 +120,13 @@ export default function MessageBox({
   app,
   sendMessage,
   channelName,
+  channelIcon,
   messages,
 }: {
   app: App;
   sendMessage: (m: string) => void;
   channelName?: string;
+  channelIcon?: string;
   messages: Message[];
 }) {
   const [text, setText] = useState("");
@@ -136,11 +138,16 @@ export default function MessageBox({
         <header className="h-12 py-4 flex items-center border-b text-sm font-semibold">
           <span
             onClick={() => app.setSidebarOpen(true)}
-            className="cursor-pointer flex"
+            className="cursor-pointer flex gap-2"
           >
-            <ChevronLeftIcon className="w-5 h-5" />
+            <ChevronLeftIcon className="w-5 h-5 my-auto" />
+            <span className="flex items-center gap-1.5">
+              {channelIcon && (
+                <ProfilePicture name={channelName} url={channelIcon} className="size-7" />
+              )}
               {channelName}
             </span>
+          </span>
         </header>
       )}
       <div className="mt-auto flex flex-col-reverse overflow-y-scroll">

src/components/ProfilePicture.tsx

@@ -1,14 +1,17 @@
+import { cn } from "@/lib/utils";
 import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
 
 export default function ProfilePicture({
   name,
   url,
+  className,
 }: {
   name: string;
   url: string | undefined;
+  className?: string;
 }) {
   return (
-    <Avatar className="h-8 w-8">
+    <Avatar className={cn("h-8 w-8", className)}>
       <AvatarImage src={url} alt={name} />
       <AvatarFallback>{name[0]}</AvatarFallback>
     </Avatar>

src/hooks/use-async.ts

@@ -0,0 +1,16 @@
+import { useEffect, useState } from "react";
+
+export default function useAsync<T, E = any>(func: () => Promise<T>) {
+  const [loading, setLoading] = useState(true);
+  const [value, setValue] = useState<T>();
+  const [error, setError] = useState<E>();
+
+  useEffect(() => {
+    func()
+      .then(setValue)
+      .catch(setError)
+      .finally(() => setLoading(false));
+  }, []);
+
+  return { value, loading, error };
+}

src/lib/auth.ts

@@ -13,6 +13,8 @@ export default async function auth(
 ) {
   console.log("Authenticating with server id:", id);
 
+  if (!id) return;
+
   const ip = ((await get(`/api/server/${id}`)).data as any).address as string;
 
   console.log("Authenticating with server at:", ip);