diff --git a/src/app/chat/[id]/page.tsx b/src/app/chat/[id]/page.tsx index c682a3b..84d1259 100644 --- a/src/app/chat/[id]/page.tsx +++ b/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(); diff --git a/src/app/server/[ip]/page.tsx b/src/app/server/[ip]/page.tsx index 901e145..e10152d 100644 --- a/src/app/server/[ip]/page.tsx +++ b/src/app/server/[ip]/page.tsx @@ -16,20 +16,23 @@ export default function Server() { const searchParams = useSearchParams(); const serverRef = useRef(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] diff --git a/src/components/app/AppLayout.tsx b/src/components/app/AppLayout.tsx index cac3790..4a2d628 100644 --- a/src/components/app/AppLayout.tsx +++ b/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; diff --git a/src/hooks/use-app.ts b/src/hooks/use-app.ts index 5180466..840cafd 100644 --- a/src/hooks/use-app.ts +++ b/src/hooks/use-app.ts @@ -12,7 +12,7 @@ import { toast } from "sonner"; export default function useApp(): App { const node = useRef(null); const [profiles, setProfiles] = useState>({}); - 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) => { setProfiles((prev) => { - console.log('test') + console.log("test"); prev[id] = res.data as UserProfile; return prev; }); diff --git a/src/hooks/use-messages.ts b/src/hooks/use-messages.ts index 77b7756..7cf0712 100644 --- a/src/hooks/use-messages.ts +++ b/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; // 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()( ? 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()( 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()( }; }), + 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 diff --git a/src/lib/auth.ts b/src/lib/auth.ts index 18ca6f5..1dd0bc8 100644 --- a/src/lib/auth.ts +++ b/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, - setServer: Dispatch>, - addMessage: (m: Message) => void, - onNewMessage?: (m: Message) => void, - lastMessage?: number -) { +type AuthParams = { + id: string; + wsRef: RefObject; + setServer?: Dispatch>; + 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; } }; diff --git a/src/types/app.ts b/src/types/app.ts index f103e4c..87784da 100644 --- a/src/types/app.ts +++ b/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;