Message chunk loading test

src/app/auth/Login.tsx

@@ -33,8 +33,7 @@ export default function Login() {
         message: "Login successful! Redirecting...",
       });
 
-      // small delay to show feedback before redirect
+      router.push("/chat");
-      setTimeout(() => router.push("/chat"), 800);
     } catch (err: any) {
       setFeedback({
         kind: "error",

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

@@ -37,7 +37,7 @@ export default function DMs() {
         app={app}
         channelName={target?.display_name || id}
         channelIcon={target?.avatar_url || "_"}
-        messages={app.messages.filter(
+        messages={app.privateMessages.filter(
           (m) =>
             (m.channel_id === id && m.from === app.profile?.id) ||
             (m.from === id && m.channel_id === app.profile?.id)

src/app/chat/page.tsx

@@ -52,7 +52,7 @@ export default function ChatHub() {
       channels: [],
     },
   ];
-  const recentActivity = app.messages.slice(0, 3);
+  const recentActivity = app.privateMessages.slice(0, 3);
 
   return (
     <AppLayout app={app}>

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

@@ -6,7 +6,7 @@ import MessageBox from "@/components/channel/MessageBox";
 import AppLayout from "@/components/app/AppLayout";
 import { Server as ServerType } from "@/types/types";
 import auth from "@/lib/auth";
-import { useServerMessages } from "@/hooks/use-messages";
+import useMessages from "@/hooks/use-messages";
 import useApp from "@/hooks/use-app";
 import { useEffectOnceWhenReady } from "@/hooks/use-once";
 import ChannelView from "@/components/channel/ChannelView";
@@ -16,25 +16,19 @@ export default function Server() {
   const searchParams = useSearchParams();
   const serverRef = useRef<WebSocket | null>(null);
   const app = useApp();
-  const { messages, addMessage, editMessage, deleteMessage } =
+  const messageStore = useMessages();
-    useServerMessages();
 
   useEffectOnceWhenReady(
     () => {
       if (!ip) return;
-      const msgs = messages[ip];
       auth({
         id: ip,
         wsRef: serverRef,
         setServer: app.setServer,
-        lastMessage: msgs ? msgs[msgs.length - 1]?.id : undefined,
+        messageStore: messageStore,
-
-        addMessage: (m) => addMessage(ip, m),
-        editMessage: (msg_id, contents) => editMessage(ip, msg_id, contents),
-        deleteMessage: (msg_id) => deleteMessage(ip, msg_id),
       });
     },
-    [ip, messages],
+    [ip, messageStore.messages],
     [undefined, (v) => v]
   );
 
@@ -55,7 +49,9 @@ export default function Server() {
     <AppLayout app={app}>
       <ChannelView
         app={app}
-        messages={messages}
+        messages={messageStore.messages.filter(
+          (m) => m.channel_id === app.currentChannel?.id
+        )}
         ip={ip}
         serverRef={serverRef}
       />

src/components/app/AppLayout.tsx

@@ -50,7 +50,7 @@ export default function AppLayout({
 
         if (onNewMessage) onNewMessage(m);
       },
-      lastMessage: app.messages?.[app.messages.length - 1]?.id,
+      lastMessage: app.privateMessages?.[app.privateMessages.length - 1]?.id,
 
       addMessage: app.addMessage,
       deleteMessage: app.deleteMessage,

src/components/app/SidebarDMs.tsx

@@ -24,7 +24,7 @@ export default function SidebarDMs({ app }: { app: App }) {
         await Promise.all(
           [
             ...new Set(
-              app.messages
+              app.privateMessages.messages
                 .sort((a, b) => a.timestamp - b.timestamp)
                 .flatMap((m) => [m.from, m.channel_id])
                 .filter((id) => id !== app.profile?.id)
@@ -44,7 +44,7 @@ export default function SidebarDMs({ app }: { app: App }) {
       );
     };
     load();
-  }, [query, app.messages, app.profile]);
+  }, [query, app.privateMessages, app.profile]);
 
   return (
     <div className="w-full flex flex-col bg-sidebar">

src/components/channel/ChannelView.tsx

@@ -11,7 +11,7 @@ export default function ChannelView({
   serverRef,
 }: {
   app: App;
-  messages: Record<string, Message[]>;
+  messages: Message[];
   ip: string;
   serverRef: React.RefObject<WebSocket | null>;
 }) {
@@ -25,11 +25,7 @@ export default function ChannelView({
         <MessageBox
           app={app}
           channelName={app.currentChannel.name}
-          messages={
+          messages={messages}
-            messages[ip]?.filter(
-              (m) => m.channel_id === app.currentChannel?.id
-            ) || []
-          }
           sendRequest={(req) => serverRef.current?.send(JSON.stringify(req))}
         />
       );

src/components/channel/PluginChannel.tsx

@@ -10,7 +10,7 @@ export default function PluginChannel({
   serverRef,
 }: {
   app: App;
-  messages: Record<string, Message[]>;
+  messages: Message[];
   ip: string;
   serverRef: React.RefObject<WebSocket | null>;
 }) {

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,
+    privateMessages,
-    deleteMessage,
     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 { useState } from "react";
-import { persist } from "zustand/middleware";
 
-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 = {
+  return {
-  messages: Record<string, Message[]>; // server_id → messages
+    messages: messages,
-  setMessages: (serverId: string, msgs: Message[]) => void;
+    setMessages: (msgs) => setMessages(msgs),
-  addMessage: (serverId: string, msg: Message) => void;
+    addMessage: (msg) =>
-  deleteMessage: (serverId: string, id: number) => void;
+      setMessages((messages) =>
-  editMessage: (serverId: string, id: number, contents: string) => void;
+        messages.some((m) => m.id === msg.id) ? messages : [...messages, msg]
-  clearMessages: (serverId?: string) => void;
+      ),
-};
+    deleteMessage: (id: number) =>
-
+      setMessages((messages) => messages.filter((m) => m.id !== id)),
-export const useMessages = create<MessageStore>()(
+    editMessage: (id: number, contents) =>
-  persist(
+      setMessages((messages) =>
-    (set) => ({
+        messages.map((m) => (m.id === id ? { ...m, contents } : m))
-      messages: [],
+      ),
-      setMessages: (msgs) => set({ messages: msgs }),
+    clearMessages: () => setMessages([]),
-      addMessage: (msg) =>
+    insertMessages: (msgs) => setMessages((m) => [...msgs, ...m]),
-        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" }
-  )
-);

src/lib/auth.ts

@@ -3,28 +3,22 @@ import axios from "axios";
 import { Dispatch, RefObject, SetStateAction } from "react";
 import { get } from "./request";
 import { toast } from "sonner";
+import { MessageStore } from "@/hooks/use-messages";
 
 type AuthParams = {
   id: string;
   wsRef: RefObject<WebSocket | null>;
   setServer?: Dispatch<SetStateAction<Server | undefined>>;
   onNewMessage?: (m: Message) => void;
-  lastMessage?: number;
+  messageStore: MessageStore;
-
-  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,
+  messageStore,
-  deleteMessage,
-  editMessage,
 }: AuthParams) {
   console.log("Authenticating with server id:", id);
 
@@ -64,7 +58,6 @@ export default async function auth({
         JSON.stringify({
           version: "0.0.1",
           auth_token: server_auth,
-          last_message: lastMessage || 0,
         })
       );
       name = data.name;
@@ -73,20 +66,31 @@ export default async function auth({
 
     switch (data.type) {
       case "authenticated":
-        data.params.messages.forEach(addMessage);
+        ws.send(
+          JSON.stringify({
+            type: "load_chunk",
+            params: {
+              channel_id: "general",
+              chunk_id: 0,
+            },
+          })
+        );
         break;
 
       case "message_create":
         if (onNewMessage) onNewMessage(data.params as Message);
-        addMessage(data.params as Message);
+        messageStore.addMessage(data.params as Message);
         break;
 
       case "message_delete":
-        deleteMessage(data.params.message_id);
+        messageStore.deleteMessage(data.params.message_id);
         break;
 
       case "message_update":
-        editMessage(data.params.message_id, data.params.contents);
+        messageStore.editMessage(data.params.message_id, data.params.contents);
+        break;
+      case "chunk":
+        messageStore.insertMessages(data.params);
         break;
     }
   };

src/types/app.ts

@@ -3,6 +3,7 @@ import { StringMap } from "./typeUtils";
 import { UserProfile } from "@/hooks/get-user";
 import { Channel, Message, Server } from "./types";
 import { ClientSettings } from "./settings";
+import { MessageStore } from "@/hooks/use-messages";
 
 export type SetState<T> = Dispatch<SetStateAction<T>>;
 
@@ -22,10 +23,7 @@ export default interface App {
   profiles: StringMap<UserProfile | null>;
   setProfiles: SetState<StringMap<UserProfile | null>>;
 
-  messages: Message[];
+  privateMessages: MessageStore;
-  addMessage: (v: Message) => void;
-  deleteMessage: (id: number) => void;
-  editMessage: (id: number, v: string) => void;
 
   sidebarOpen: boolean;
   setSidebarOpen: SetState<boolean>;