DM message caching

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;
     }
   };