Message caching with last message

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

@@ -16,13 +16,13 @@ export default function DMs() {
   const { id } = useParams<{ id: string }>();
   const wsRef = useRef<WebSocket | null>(null);
   const messages = useMessages((s) => s.messages);
-  const setMessages = useMessages((s) => s.setMessages);
+  const addMessage = useMessages((s) => s.addMessage);
   const [userList, setUserList] = useState<StringMap<UserProfile>>({});
   const [user, setUser] = useState<UserProfile | undefined>();
 
   return (
     <AppSidebar
-      setMessages={setMessages}
+      addMessage={addMessage}
       wsRef={wsRef}
       userList={userList}
       setUserList={setUserList}

src/app/chat/page.tsx

@@ -13,14 +13,14 @@ export default function Chat() {
   const wsRef = useRef<WebSocket | null>(null);
   const [userList, setUserList] = useState<StringMap<UserProfile>>({});
   const messages = useMessages((s) => s.messages);
-  const setMessages = useMessages((s) => s.setMessages);
+  const addMessage = useMessages((s) => s.addMessage);
 
   return (
     <AppSidebar
       wsRef={wsRef}
       userList={userList}
       setUserList={setUserList}
-      setMessages={setMessages}
+      addMessage={addMessage}
       messages={messages}
     >
       <Card className="bg-background w-full">

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

@@ -8,26 +8,32 @@ import { Message, Server as ServerType } from "@/types/types";
 import { UserProfile } from "@/hooks/get-user";
 import { StringMap } from "@/types/typeUtils";
 import auth from "@/lib/auth";
+import { useMessages } from "@/hooks/use-messages";
 
 export default function Server() {
   const { ip } = useParams<{ ip: string }>();
   const wsServerRef = useRef<WebSocket | null>(null);
   const wsNodeRef = useRef<WebSocket | null>(null);
   const [server, setServer] = useState<undefined | ServerType>();
-  const [messages, setMessages] = useState<Message[]>([]);
   const [userList, setUserList] = useState<StringMap<UserProfile>>({});
+  const messages = useMessages((s) => s.messages);
+  const addMessage = useMessages((s) => s.addMessage);
 
   useEffect(() => {
     if (!ip) return;
-    auth(ip, wsServerRef, setServer, setMessages, (m) => {
-      setMessages((prev) => [...prev, m]);
-    });
+    auth(
+      ip,
+      wsServerRef,
+      setServer,
+      (ms) => ms.forEach(addMessage),
+      addMessage
+    );
   }, [ip]);
 
   return (
     <AppSidebar
       wsRef={wsNodeRef}
-      setMessages={setMessages}
+      addMessage={() => {}}
       userList={userList}
       setUserList={setUserList}
       server={server}