From b6a69f82f42aaf5bb6880457b1c3da0b84891a8a Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Mon, 13 Oct 2025 10:47:16 +0200
Subject: [PATCH] Working DMs with supabase

---
 src/app/chat/[id]/page.tsx    | 24 +++++++++++++-----------
 src/app/chat/page.tsx         | 23 ++++++++++++++---------
 src/app/settings/settings.tsx |  8 ++++----
 src/lib/auth.ts               |  1 +
 src/types/types.ts            |  4 ++--
 5 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/src/app/chat/[id]/page.tsx b/src/app/chat/[id]/page.tsx
index 344334e..7edaab8 100644
--- a/src/app/chat/[id]/page.tsx
+++ b/src/app/chat/[id]/page.tsx
@@ -5,7 +5,7 @@ import MessageBox from "@/components/MessageBox";
 import AppSidebar from "@/components/Sidebar";
 import { Message } from "@/types/types";
 import useUser, { User } from "@/hooks/get-user";
-import { NumberMap } from "@/types/typeUtils";
+import { NumberMap, StringMap } from "@/types/typeUtils";
 import auth, { makeAddress } from "@/lib/auth";
 import { useParams } from "next/navigation";
 
@@ -14,19 +14,21 @@ import { useParams } from "next/navigation";
 
 export default function DMs() {
   const { id } = useParams<{ id: string }>();
-  const numericId = id ? Number(id) : undefined;
   const wsRef = useRef<WebSocket | null>(null);
   const [messages, setMessages] = useState<Message[]>([]);
   const { user, loading } = useUser();
-  const [userList, setUserList] = useState<NumberMap<User>>({});
+  const [userList, setUserList] = useState<StringMap<User>>({});
 
   useEffect(() => {
-    if (!numericId || !user || loading) return;
-    auth(makeAddress("localhost", 7090), wsRef, () => {}, setMessages);
-    setUserList((prev) => {
-      prev[user.id] = user;
-      return prev;
-    });
+    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 (
@@ -36,14 +38,14 @@ export default function DMs() {
         userList={userList}
         setUserList={setUserList}
         messages={messages
-          .filter((m) => m.channel_id === numericId || m.from === numericId)
+          .filter((m) => m.channel_id === id || m.from === id)
           .toReversed()}
         sendMessage={(message) => {
           wsRef.current?.send(
             JSON.stringify({
               type: "send_message",
               params: {
-                channel_id: numericId,
+                channel_id: id,
                 contents: message,
               },
             })
diff --git a/src/app/chat/page.tsx b/src/app/chat/page.tsx
index 7704c0b..0e17ba5 100644
--- a/src/app/chat/page.tsx
+++ b/src/app/chat/page.tsx
@@ -1,14 +1,11 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
-import MessageBox from "@/components/MessageBox";
 import AppSidebar from "@/components/Sidebar";
-import { Message } from "@/types/types";
 import useUser, { User } from "@/hooks/get-user";
-import { NumberMap } from "@/types/typeUtils";
+import { StringMap } from "@/types/typeUtils";
 import auth, { makeAddress } from "@/lib/auth";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { toast } from "sonner";
 import ProfilePicture from "@/components/ProfilePicture";
 
@@ -16,7 +13,7 @@ export default function Chat() {
   const ip = "localhost";
   const wsRef = useRef<WebSocket | null>(null);
   const { user, loading } = useUser();
-  const [userList, setUserList] = useState<NumberMap<User>>({});
+  const [userList, setUserList] = useState<StringMap<User>>({});
 
   useEffect(() => {
     if (!ip || !user || loading) return;
@@ -38,23 +35,31 @@ export default function Chat() {
   }, [ip, user, loading]);
 
   return (
-    <AppSidebar user={{ id: 173, username: "leo", email: "" }}>
+    <AppSidebar user={user}>
       <Card className="bg-background w-full">
         <CardHeader>
           <CardTitle>Direct Messages</CardTitle>
         </CardHeader>
         <CardContent>
-          <DMItem name="Alice" status="online" />
+          <DMItem name="Alice" status="online" avatar="" />
         </CardContent>
       </Card>
     </AppSidebar>
   );
 }
 
-function DMItem({ name, status }: { name: string; status: string }) {
+function DMItem({
+  name,
+  avatar,
+  status,
+}: {
+  name: string;
+  avatar: 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={avatar} />
       <div className="flex flex-col">
         <span className="text-sm font-medium">{name}</span>
         <span className="text-xs text-muted-foreground">{status}</span>
diff --git a/src/app/settings/settings.tsx b/src/app/settings/settings.tsx
index 01f2c59..ddbde59 100644
--- a/src/app/settings/settings.tsx
+++ b/src/app/settings/settings.tsx
@@ -70,7 +70,7 @@ export default function Settings<T>({
     if (Array.isArray(type)) {
       return (
         <Select
-          value={(settings as any)[key]}
+          value={(settings as any)[key] || []}
           onValueChange={(val) => handleChange(key, val)}
         >
           <SelectTrigger className="w-[200px]">
@@ -88,7 +88,7 @@ export default function Settings<T>({
     } else if (type === "boolean") {
       return (
         <Checkbox
-          checked={(settings as any)[key]}
+          checked={(settings as any)[key] || false}
           onCheckedChange={(val) => handleChange(key, val)}
         />
       );
@@ -96,7 +96,7 @@ export default function Settings<T>({
       return (
         <Input
           type="text"
-          value={(settings as any)[key]}
+          value={(settings as any)[key] || ""}
           onChange={(e) => handleChange(key, e.target.value)}
         />
       );
@@ -104,7 +104,7 @@ export default function Settings<T>({
       return (
         <Input
           type="number"
-          value={(settings as any)[key]}
+          value={(settings as any)[key] || 0}
           onChange={(e) => handleChange(key, Number(e.target.value))}
         />
       );
diff --git a/src/lib/auth.ts b/src/lib/auth.ts
index f964cd3..36410c5 100644
--- a/src/lib/auth.ts
+++ b/src/lib/auth.ts
@@ -13,6 +13,7 @@ export default async function auth(
   setMessages: Dispatch<SetStateAction<Message[]>>,
   onNewMessage?: (m: Message) => void
 ) {
+  console.log("Authenticating with server at:", ip);
   const server_auth = (
     (await axios.post("/api/auth", { server_ip: ip })).data as any
   ).token;
diff --git a/src/types/types.ts b/src/types/types.ts
index a3ed9b0..9bb3c32 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -6,8 +6,8 @@ export interface Channel {
 
 export interface Message {
   id: number;
-  channel_id: string | number;
-  from: number;
+  channel_id: string;
+  from: string;
   contents: string;
   timestamp: number;
 }