DM message caching

package-lock.json

@@ -45,7 +45,8 @@
         "react-markdown": "^10.1.0",
         "remark-gfm": "^4.0.1",
         "sonner": "^2.0.7",
-        "tailwind-merge": "^3.3.1"
+        "tailwind-merge": "^3.3.1",
+        "zustand": "^5.0.8"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
@@ -5443,6 +5444,35 @@
         "url": "https://github.com/sponsors/dmonad"
       }
     },
+    "node_modules/zustand": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.8.tgz",
+      "integrity": "sha512-gyPKpIaxY9XcO2vSMrLbiER7QMAMGOQZVRdJ6Zi782jkbzZygq5GI9nG8g+sMgitRtndwaBSl7uiqC49o1SSiw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "immer": ">=9.0.6",
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/zwitch": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",

package.json

@@ -48,7 +48,8 @@
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
     "sonner": "^2.0.7",
-    "tailwind-merge": "^3.3.1"
+    "tailwind-merge": "^3.3.1",
+    "zustand": "^5.0.8"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",

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

@@ -7,6 +7,7 @@ import { Message } from "@/types/types";
 import { UserProfile } from "@/hooks/get-user";
 import { StringMap } from "@/types/typeUtils";
 import { useParams } from "next/navigation";
+import { useMessages } from "@/hooks/use-messages";
 
 // In this testing instance we are assuming that the target's node is localhost
 // To make this functional we need to add a settings feature to the api
@@ -14,7 +15,8 @@ import { useParams } from "next/navigation";
 export default function DMs() {
   const { id } = useParams<{ id: string }>();
   const wsRef = useRef<WebSocket | null>(null);
-  const [messages, setMessages] = useState<Message[]>([]);
+  const messages = useMessages((s) => s.messages);
+  const setMessages = useMessages((s) => s.setMessages);
   const [userList, setUserList] = useState<StringMap<UserProfile>>({});
   const [user, setUser] = useState<UserProfile | undefined>();
 

src/app/chat/page.tsx

@@ -7,11 +7,13 @@ import { StringMap } from "@/types/typeUtils";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import ProfilePicture from "@/components/ProfilePicture";
 import { Message } from "@/types/types";
+import { useMessages } from "@/hooks/use-messages";
 
 export default function Chat() {
   const wsRef = useRef<WebSocket | null>(null);
   const [userList, setUserList] = useState<StringMap<UserProfile>>({});
-  const [messages, setMessages] = useState<Message[]>([]);
+  const messages = useMessages((s) => s.messages);
+  const setMessages = useMessages((s) => s.setMessages);
 
   return (
     <AppSidebar

src/components/Sidebar.tsx

@@ -47,7 +47,7 @@ export default function AppSidebar({
 }: Readonly<{
   wsRef: React.RefObject<WebSocket | null>;
   messages?: Message[];
-  setMessages: React.Dispatch<React.SetStateAction<Message[]>>;
+  setMessages: (m: Message[]) => void;
   onNewMessage?: (msg: Message) => void;
   userList: StringMap<UserProfile>;
   setUserList: React.Dispatch<React.SetStateAction<StringMap<UserProfile>>>;

src/hooks/use-messages.ts

@@ -0,0 +1,27 @@
+import { Message } from "@/types/types";
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+interface MessageStore {
+  messages: Message[];
+  setMessages: (msgs: Message[]) => void;
+  addMessage: (msg: Message) => void;
+  clearMessages: () => 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] }
+        ),
+      clearMessages: () => set({ messages: [] }),
+    }),
+    { name: "chat-messages" }
+  )
+);

src/lib/auth.ts

@@ -6,7 +6,8 @@ export default async function auth(
   id: string,
   wsRef: RefObject<WebSocket | null>,
   setServer: Dispatch<SetStateAction<Server | undefined>>,
-  setMessages: Dispatch<SetStateAction<Message[]>>,
+  setMessages: (m: Message[]) => void,
+  addMessage: (m: Message) => void,
   onNewMessage?: (m: Message) => void
 ) {
   console.log("Authenticating with server id:", id);
@@ -50,7 +51,7 @@ export default async function auth(
 
       case "message_create":
         if (onNewMessage) onNewMessage(data.params as Message);
-        setMessages((prev) => [...prev, data.params]);
+        addMessage(data.params as Message);
         break;
     }
   };