Message delete

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

@@ -19,13 +19,13 @@ export default function DMs() {
   useEffect(() => {
     async function connectTargetNode() {
       if (!target) return;
-      auth(
-        target.node_address,
-        targetNode,
-        () => {},
-        app.addMessage,
-        () => {}
-      );
+      auth({
+        id: target.node_address,
+        wsRef: targetNode,
+        addMessage: app.addMessage,
+        deleteMessage: app.deleteMessage,
+        editMessage: app.editMessage,
+      });
     }
 
     connectTargetNode();

src/app/server/[ip]/page.tsx

@@ -16,20 +16,23 @@ export default function Server() {
   const searchParams = useSearchParams();
   const serverRef = useRef<WebSocket | null>(null);
   const app = useApp();
-  const { messages, addMessage } = useServerMessages();
+  const { messages, addMessage, editMessage, deleteMessage } =
+    useServerMessages();
 
   useEffectOnceWhenReady(
     () => {
       if (!ip) return;
       const msgs = messages[ip];
-      auth(
-        ip,
-        serverRef,
-        app.setServer,
-        (m) => addMessage(ip, m),
-        () => {},
-        msgs ? msgs[msgs.length - 1]?.id : undefined
-      );
+      auth({
+        id: ip,
+        wsRef: serverRef,
+        setServer: app.setServer,
+        lastMessage: msgs ? msgs[msgs.length - 1]?.id : undefined,
+
+        addMessage: (m) => addMessage(ip, m),
+        editMessage: (msg_id, contents) => editMessage(ip, msg_id, contents),
+        deleteMessage: (msg_id) => deleteMessage(ip, msg_id),
+      });
     },
     [ip, messages],
     [undefined, (v) => v]

src/components/app/AppLayout.tsx

@@ -7,7 +7,7 @@ import { toast } from "sonner";
 import auth from "@/lib/auth";
 import { useIsMobile } from "@/hooks/is-mobile";
 import App from "@/types/app";
-import { Server, Message } from "@/types/types";
+import { Message } from "@/types/types";
 
 import SidebarServers from "./SidebarServers";
 import SidebarDMs from "./SidebarDMs";
@@ -31,12 +31,10 @@ export default function AppLayout({
   useEffect(() => {
     if (!app.profile?.node_address) return;
 
-    auth(
-      app.profile.node_address,
-      app.node,
-      () => {},
-      app.addMessage,
-      (m) => {
+    auth({
+      id: app.profile.node_address,
+      wsRef: app.node,
+      onNewMessage: (m) => {
         if (m.from !== chatWith && m.from !== app.profile?.id)
           toast(
             `New message from ${app.profiles[m.from]?.display_name || m.from}`,
@@ -52,8 +50,12 @@ export default function AppLayout({
 
         if (onNewMessage) onNewMessage(m);
       },
-      app.messages?.[app.messages.length - 1]?.id
-    );
+      lastMessage: app.messages?.[app.messages.length - 1]?.id,
+
+      addMessage: app.addMessage,
+      deleteMessage: app.deleteMessage,
+      editMessage: app.editMessage,
+    });
 
     app.setProfiles((prev) => {
       if (app.profile) prev[app.profile.id] = app.profile;

src/hooks/use-app.ts

@@ -12,7 +12,7 @@ import { toast } from "sonner";
 export default function useApp(): App {
   const node = useRef<WebSocket | null>(null);
   const [profiles, setProfiles] = useState<StringMap<UserProfile | null>>({});
-  const { messages, addMessage } = useMessages();
+  const { messages, addMessage, deleteMessage, editMessage } = useMessages();
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const profile = useUser();
   const [clientSettings, setClientSettings] = useClientSettings();
@@ -38,6 +38,8 @@ export default function useApp(): App {
   }, []);
 
   return {
+    editMessage,
+    deleteMessage,
     currentChannel,
     setCurrentChannel,
     server,
@@ -61,7 +63,7 @@ export default function useApp(): App {
 
       const onResponse = (res: Response<UserProfile>) => {
         setProfiles((prev) => {
-          console.log('test')
+          console.log("test");
           prev[id] = res.data as UserProfile;
           return prev;
         });

src/hooks/use-messages.ts

@@ -6,6 +6,8 @@ interface MessageStore {
   messages: Message[];
   setMessages: (msgs: Message[]) => void;
   addMessage: (msg: Message) => void;
+  deleteMessage: (id: number) => void;
+  editMessage: (id: number, contents: string) => void;
   clearMessages: () => void;
 }
 
@@ -13,6 +15,8 @@ type ServerMessageStore = {
   messages: Record<string, Message[]>; // server_id → messages
   setMessages: (serverId: string, msgs: Message[]) => void;
   addMessage: (serverId: string, msg: Message) => void;
+  deleteMessage: (serverId: string, id: number) => void;
+  editMessage: (serverId: string, id: number, contents: string) => void;
   clearMessages: (serverId?: string) => void;
 };
 
@@ -27,6 +31,16 @@ export const useMessages = create<MessageStore>()(
             ? state
             : { messages: [...state.messages, msg] }
         ),
+      deleteMessage: (id: number) =>
+        set((state) => ({
+          messages: state.messages.filter((m) => m.id !== id),
+        })),
+      editMessage: (id: number, contents) =>
+        set((state) => ({
+          messages: state.messages.map((m) =>
+            m.id === id ? { ...m, contents } : m
+          ),
+        })),
       clearMessages: () => set({ messages: [] }),
     }),
     { name: "chat-messages" }
@@ -47,7 +61,6 @@ export const useServerMessages = create<ServerMessageStore>()(
         set((state) => {
           const serverMsgs = state.messages[serverId] || [];
 
-          // avoid duplicates
           if (serverMsgs.some((m) => m.id === msg.id)) return state;
 
           return {
@@ -58,6 +71,26 @@ export const useServerMessages = create<ServerMessageStore>()(
           };
         }),
 
+      deleteMessage: (serverId, id) =>
+        set((state) => ({
+          messages: {
+            ...state.messages,
+            [serverId]: (state.messages[serverId] || []).filter(
+              (m) => m.id !== id
+            ),
+          },
+        })),
+
+      editMessage: (serverId, id, contents) =>
+        set((state) => ({
+          messages: {
+            ...state.messages,
+            [serverId]: (state.messages[serverId] || []).map((m) =>
+              m.id === id ? { ...m, contents } : m
+            ),
+          },
+        })),
+
       clearMessages: (serverId) =>
         set((state) =>
           serverId

src/lib/auth.ts

@@ -4,14 +4,28 @@ import { Dispatch, RefObject, SetStateAction } from "react";
 import { get } from "./request";
 import { toast } from "sonner";
 
-export default async function auth(
-  id: string,
-  wsRef: RefObject<WebSocket | null>,
-  setServer: Dispatch<SetStateAction<Server | undefined>>,
-  addMessage: (m: Message) => void,
-  onNewMessage?: (m: Message) => void,
-  lastMessage?: number
-) {
+type AuthParams = {
+  id: string;
+  wsRef: RefObject<WebSocket | null>;
+  setServer?: Dispatch<SetStateAction<Server | undefined>>;
+  onNewMessage?: (m: Message) => void;
+  lastMessage?: number;
+
+  addMessage: (m: Message) => void;
+  deleteMessage: (id: number) => void;
+  editMessage: (id: number, contents: string) => void;
+};
+
+export default async function auth({
+  id,
+  wsRef,
+  setServer,
+  addMessage,
+  onNewMessage,
+  lastMessage,
+  deleteMessage,
+  editMessage,
+}: AuthParams) {
   console.log("Authenticating with server id:", id);
 
   if (!id) return;
@@ -45,7 +59,7 @@ export default async function auth(
     }
 
     if (data.version) {
-      setServer({ channels: [], ...data });
+      if (setServer) setServer({ channels: [], ...data });
       ws.send(
         JSON.stringify({
           version: "0.0.1",
@@ -66,7 +80,13 @@ export default async function auth(
         if (onNewMessage) onNewMessage(data.params as Message);
         addMessage(data.params as Message);
         break;
+
       case "message_delete":
+        deleteMessage(data.params.message_id);
+        break;
+
+      case "message_update":
+        editMessage(data.params.message_id, data.params.contents);
         break;
     }
   };

src/types/app.ts

@@ -24,6 +24,8 @@ export default interface App {
 
   messages: Message[];
   addMessage: (v: Message) => void;
+  deleteMessage: (id: number) => void;
+  editMessage: (id: number, v: string) => void;
 
   sidebarOpen: boolean;
   setSidebarOpen: SetState<boolean>;