Working DM list

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

@@ -26,6 +26,7 @@ export default function DMs() {
       setUserList={setUserList}
       chatWith={id}
       setUser={setUser}
+      messages={messages}
     >
       <MessageBox
         channelName={userList[id]?.display_name || id}

src/app/chat/page.tsx

@@ -6,24 +6,27 @@ import { UserProfile } from "@/hooks/get-user";
 import { StringMap } from "@/types/typeUtils";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import ProfilePicture from "@/components/ProfilePicture";
+import { Message } from "@/types/types";
 
 export default function Chat() {
   const wsRef = useRef<WebSocket | null>(null);
   const [userList, setUserList] = useState<StringMap<UserProfile>>({});
+  const [messages, setMessages] = useState<Message[]>([]);
 
   return (
     <AppSidebar
       wsRef={wsRef}
       userList={userList}
       setUserList={setUserList}
-      setMessages={() => {}}
+      setMessages={setMessages}
+      messages={messages}
     >
       <Card className="bg-background w-full">
         <CardHeader>
           <CardTitle>Direct Messages</CardTitle>
         </CardHeader>
         <CardContent>
-          <DMItem name="Alice" status="online" avatar="" />
+          {/* <DMItem name="Alice" status="online" avatar="" /> */}
         </CardContent>
       </Card>
     </AppSidebar>

src/components/Sidebar.tsx

@@ -32,6 +32,8 @@ import auth from "@/lib/auth";
 import { toast } from "sonner";
 import { StringMap } from "@/types/typeUtils";
 import SettingsDialog from "./settings/SettingsDialog";
+import Link from "next/link";
+import axios from "axios";
 
 export default function AppSidebar({
   children,
@@ -41,8 +43,10 @@ export default function AppSidebar({
   onNewMessage,
   setUser,
   server,
+  messages,
 }: Readonly<{
   wsRef: React.RefObject<WebSocket | null>;
+  messages?: Message[];
   setMessages: React.Dispatch<React.SetStateAction<Message[]>>;
   onNewMessage?: (msg: Message) => void;
   userList: StringMap<UserProfile>;
@@ -58,6 +62,10 @@ export default function AppSidebar({
   const user = useUser();
   const [userList, setUserList] = useState<StringMap<UserProfile>>({});
 
+  const dms = Array.from(
+    new Set(messages?.flatMap((item) => [item.from, item.channel_id]) || [])
+  );
+
   useEffect(() => {
     const s = Cookies.get("servers")?.split(",");
     if (s) setServers(s.map((x) => x.trim().split("@") as [string, string]));
@@ -222,9 +230,19 @@ export default function AppSidebar({
                 </>
               ) : (
                 <>
-                  <DMItem name="Alice" status="online" avatar="" />
-                  <DMItem name="Bob" status="offline" avatar="" />
-                  <DMItem name="Charlie" status="away" avatar="" />
+                  {dms.map((id) => (
+                    <DMItem
+                      name={
+                        getUser(id, userList, setUserList)?.display_name || id
+                      }
+                      id={id}
+                      status="online"
+                      avatar={
+                        getUser(id, userList, setUserList)?.avatar_url || ""
+                      }
+                      key={id}
+                    />
+                  ))}
                 </>
               )}
             </div>
@@ -233,6 +251,7 @@ export default function AppSidebar({
           <footer className="mt-auto pb-3 pl-3 pr-3">
             <DMItem
               name={user?.display_name || "Loading.."}
+              id={user?.id || "me"}
               avatar={user?.avatar_url || ""}
               status="online"
               settings
@@ -248,11 +267,13 @@ export default function AppSidebar({
 
 function DMItem({
   name,
+  id,
   avatar,
   status,
   settings,
 }: {
   name: string;
+  id: string;
   avatar: string;
   status: string;
   settings?: boolean;
@@ -260,7 +281,10 @@ function DMItem({
   const router = useRouter();
 
   return (
-    <Card className="p-2 flex flex-row items-center gap-2 cursor-pointer hover:bg-accent">
+    <Link
+      href={`/chat/${id}`}
+      className="p-2 flex flex-row items-center gap-2 cursor-pointer hover:bg-accent"
+    >
       <ProfilePicture name={name} url={avatar} />
       <div className="flex flex-col">
         <span className="text-sm font-medium">{name}</span>
@@ -272,7 +296,7 @@ function DMItem({
           tab="profile"
         />
       )}
-    </Card>
+    </Link>
   );
 }
 
@@ -295,3 +319,24 @@ function ChannelIcon({ kind }: { kind: "text" | "voice" }) {
       return null;
   }
 }
+
+function getUser(
+  id: string,
+  userList: StringMap<UserProfile>,
+  setUserList: React.Dispatch<React.SetStateAction<StringMap<UserProfile>>>
+) {
+  if (userList[id]) return userList[id];
+
+  axios
+    .get(`/api/profile/?id=${id}`)
+    ?.then((res) => {
+      console.log("Fetched user", res.data);
+      setUserList((prev) => {
+        prev[id] = res.data as UserProfile;
+        return prev;
+      });
+    })
+    .catch((e) => {
+      console.error(e);
+    });
+}

src/lib/auth.ts

@@ -15,8 +15,9 @@ export default async function auth(
     .address as string;
 
   console.log("Authenticating with server at:", ip);
-  const server_auth = ((await axios.post("/api/auth", { server_id: id })).data as any)
-    .token;
+  const server_auth = (
+    (await axios.post("/api/auth", { server_id: id })).data as any
+  ).token;
 
   // Open the WebSocket connection
   const ws = new WebSocket(`wss://${ip}`);