Message chunk loading test

src/hooks/use-app.ts

@@ -1,6 +1,6 @@
 import App from "@/types/app";
 import { useEffect, useRef, useState } from "react";
-import { useMessages } from "./use-messages";
+import useMessages from "./use-messages";
 import { StringMap } from "@/types/typeUtils";
 import useUser, { UserProfile } from "./get-user";
 import { useClientSettings } from "./use-settings";
@@ -12,7 +12,6 @@ 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, deleteMessage, editMessage } = useMessages();
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const profile = useUser();
   const [clientSettings, setClientSettings] = useClientSettings();
@@ -20,6 +19,7 @@ export default function useApp(): App {
   const [servers, setServers] = useState<StringMap<Server>>({});
   const [currentChannel, setCurrentChannel] = useState<Channel | null>(null);
   const [server, setServer] = useState<Server>();
+  const privateMessages = useMessages();
 
   useEffect(() => {
     const stored = Cookies.get("servers");
@@ -38,8 +38,7 @@ export default function useApp(): App {
   }, []);
 
   return {
-    editMessage,
-    deleteMessage,
+    privateMessages,
     currentChannel,
     setCurrentChannel,
     server,
@@ -54,8 +53,6 @@ export default function useApp(): App {
     profile,
     profiles,
     setProfiles,
-    messages,
-    addMessage,
     sidebarOpen,
     setSidebarOpen,
     getUserById: async (id: string) => {

src/hooks/use-messages.ts

@@ -1,108 +1,32 @@
 import { Message } from "@/types/types";
-import { create } from "zustand";
-import { persist } from "zustand/middleware";
+import { useState } from "react";
 
-interface MessageStore {
+export interface MessageStore {
   messages: Message[];
   setMessages: (msgs: Message[]) => void;
   addMessage: (msg: Message) => void;
   deleteMessage: (id: number) => void;
   editMessage: (id: number, contents: string) => void;
   clearMessages: () => void;
+  insertMessages: (msgs: Message[]) => void;
 }
+export default function useMessages(): MessageStore {
+  const [messages, setMessages] = useState<Message[]>([]);
 
-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;
-};
-
-export const useMessages = create<MessageStore>()(
-  persist(
-    (set) => ({
-      messages: [],
-      setMessages: (msgs) => set({ messages: msgs }),
-      addMessage: (msg) =>
-        set((state) =>
-          state.messages.some((m) => m.id === msg.id)
-            ? 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" }
-  )
-);
-
-export const useServerMessages = create<ServerMessageStore>()(
-  persist(
-    (set) => ({
-      messages: {},
-
-      setMessages: (serverId, msgs) =>
-        set((state) => ({
-          messages: { ...state.messages, [serverId]: msgs },
-        })),
-
-      addMessage: (serverId, msg) =>
-        set((state) => {
-          const serverMsgs = state.messages[serverId] || [];
-
-          if (serverMsgs.some((m) => m.id === msg.id)) return state;
-
-          return {
-            messages: {
-              ...state.messages,
-              [serverId]: [...serverMsgs, msg],
-            },
-          };
-        }),
-
-      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
-            ? {
-                messages: {
-                  ...state.messages,
-                  [serverId]: [],
-                },
-              }
-            : { messages: {} }
-        ),
-    }),
-    { name: "server-messages" }
-  )
-);
+  return {
+    messages: messages,
+    setMessages: (msgs) => setMessages(msgs),
+    addMessage: (msg) =>
+      setMessages((messages) =>
+        messages.some((m) => m.id === msg.id) ? messages : [...messages, msg]
+      ),
+    deleteMessage: (id: number) =>
+      setMessages((messages) => messages.filter((m) => m.id !== id)),
+    editMessage: (id: number, contents) =>
+      setMessages((messages) =>
+        messages.map((m) => (m.id === id ? { ...m, contents } : m))
+      ),
+    clearMessages: () => setMessages([]),
+    insertMessages: (msgs) => setMessages((m) => [...msgs, ...m]),
+  };
+}