Merge pull request #25 from kleo-dev/auth-dm-patches

Auth dm patches

src/app/chat/page.tsx

@@ -39,8 +39,8 @@ export default function ChatHub() {
           {/* Greeting */}
           <div onClick={() => app.setSidebarOpen(true)}>
             <h1 className="text-3xl font-bold flex cursor-pointer gap-2">
-              <ChevronLeft className="my-auto w-5" />
-              Hey {app.profile?.display_name || "there"}
+              <ChevronLeft className="my-auto w-5 md:hidden" />
+              Hey {app.profile?.display_name || "there"}!
             </h1>
             <p className="text-muted-foreground">
               Here's what's happening in your network today.

src/components/MessageBox.tsx

@@ -140,10 +140,14 @@ export default function MessageBox({
             onClick={() => app.setSidebarOpen(true)}
             className="cursor-pointer flex gap-2"
           >
-            <ChevronLeftIcon className="w-5 h-5 my-auto" />
+            <ChevronLeftIcon className="w-5 h-5 my-auto md:hidden" />
             <span className="flex items-center gap-1.5">
               {channelIcon && (
-                <ProfilePicture name={channelName} url={channelIcon} className="size-7" />
+                <ProfilePicture
+                  name={channelName}
+                  url={channelIcon}
+                  className="size-7"
+                />
               )}
               {channelName}
             </span>

src/components/app/AppLayout.tsx

@@ -1,10 +1,8 @@
 "use client";
 
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect } from "react";
 import { cn } from "@/lib/utils";
 import { useRouter } from "next/navigation";
-import { get } from "@/lib/request";
-import Cookies from "js-cookie";
 import { toast } from "sonner";
 import auth from "@/lib/auth";
 import { useIsMobile } from "@/hooks/is-mobile";
@@ -28,7 +26,6 @@ export default function AppLayout({
   server?: Server;
   app: App;
 }) {
-  const [query, setQuery] = useState("");
   const router = useRouter();
   const isMobile = useIsMobile();
 
@@ -80,7 +77,7 @@ export default function AppLayout({
         {server ? (
           <SidebarChannels server={server} />
         ) : (
-          <SidebarDMs app={app} query={query} setQuery={setQuery} />
+          <SidebarDMs app={app} />
         )}
       </div>
 

src/components/app/SidebarDMs.tsx

@@ -9,38 +9,41 @@ import axios from "axios";
 import DMItem from "./DMItem";
 import App from "@/types/app";
 import { UserProfile } from "@/hooks/get-user";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 
-export default function SidebarDMs({
-  app,
-  query,
-  setQuery,
-}: {
-  app: App;
-  query: string;
-  setQuery: (v: string) => void;
-}) {
+export default function SidebarDMs({ app }: { app: App }) {
   const router = useRouter();
+  const [query, setQuery] = useState("");
+  const [dms, setDms] = useState<UserProfile[]>([]);
 
   useEffect(() => {
+    if (!app.profile) return;
+
     const load = async () => {
-      const users = await Promise.all(
+      const users = [
+        ...new Set(
+          await Promise.all(
             app.messages
+              .sort((a, b) => a.timestamp - b.timestamp)
               .flatMap((m) => [m.from, m.channel_id])
               .filter((id) => id !== app.profile?.id)
               .map((id) => app.getUserById(id))
-      );
-      app.setDms(
+          )
+        ),
+      ].filter((v) => !!v);
+
+      app.setDms(users);
+
+      setDms(
         users.filter(
           (user) =>
-            user &&
-            (user.username.toLowerCase().includes(query.toLowerCase()) ||
-              user.id.toLowerCase().includes(query.toLowerCase()))
-        ) as UserProfile[]
+            user?.username.toLowerCase().includes(query.toLowerCase()) ||
+            user?.display_name.toLowerCase().includes(query.toLowerCase())
+        )
       );
     };
     load();
-  }, [query]);
+  }, [query, app.messages, app.profile]);
 
   return (
     <div className="w-full flex flex-col bg-card/50">
@@ -58,7 +61,7 @@ export default function SidebarDMs({
 
       <ScrollArea className="flex-1">
         <div className="p-2 flex flex-col gap-2">
-          {app.dms.map((user) => (
+          {dms.map((user) => (
             <DMItem
               key={user.id}
               name={user.display_name}
@@ -69,7 +72,7 @@ export default function SidebarDMs({
             />
           ))}
 
-          {app.dms.length === 0 && query.trim() !== "" && (
+          {dms.length === 0 && query.trim() !== "" && (
             <div className="px-3 py-2">
               <Button
                 variant="ghost"

src/hooks/get-user.ts

@@ -18,7 +18,7 @@ export default function useUser() {
   useEffect(() => {
     async function fetchUser() {
       try {
-        setUser((await get("/api/profile")).data);
+        setUser((await get("/api/profile", (r) => setUser(r.data))).data);
       } catch (e: any) {  
         router.push("/login");
         toast.error(`Error: ${e}`);
@@ -26,7 +26,7 @@ export default function useUser() {
     }
 
     fetchUser();
-  }, [router]);
+  }, []);
 
   return user;
 }

src/lib/auth.ts

@@ -2,6 +2,7 @@ import { Message, Server } from "@/types/types";
 import axios from "axios";
 import { Dispatch, RefObject, SetStateAction } from "react";
 import { get } from "./request";
+import { toast } from "sonner";
 
 export default async function auth(
   id: string,
@@ -22,6 +23,8 @@ export default async function auth(
     (await axios.post("/api/auth", { server_id: id })).data as any
   ).token;
 
+  var name = id;
+
   // Open the WebSocket connection
   const ws = new WebSocket(`wss://${ip}`);
   wsRef.current = ws;
@@ -34,6 +37,13 @@ export default async function auth(
     const data = JSON.parse(m.data);
     console.log("Message received:", data);
 
+    if (data.error) {
+      toast.error(`Error from ${name} (${data.error})`, {
+        description: data.message,
+      });
+      return;
+    }
+
     if (data.version) {
       setServer({ channels: [], ...data });
       ws.send(
@@ -43,6 +53,7 @@ export default async function auth(
           last_message: lastMessage || 0,
         })
       );
+      name = data.name;
       return;
     }
 
@@ -60,10 +71,28 @@ export default async function auth(
 
   ws.onerror = (err) => {
     console.error("WebSocket error:", err);
+
+    let description = "An unknown WebSocket error occurred.";
+
+    if (err instanceof ErrorEvent) {
+      // Browser WebSocket errors show up here
+      description =
+        err.message || err.error?.message || "WebSocket connection failed.";
+    } else if (err instanceof Event) {
+      // Generic Event (no info)
+      description = "WebSocket encountered a network issue.";
+    } else if (err && typeof err === "object") {
+      // Custom data if something special got passed
+      description = JSON.stringify(err, null, 2);
+    } else {
+      description = String(err);
+    }
+
+    toast.error(`WebSocket error (${name})`, { description });
   };
 
   ws.onclose = () => {
-    console.log("WebSocket closed:", ip);
+    console.log("WebSocket closed: ", ip);
   };
 
   // Cleanup on unmount or id change