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) => {
+    auth(
-      setMessages((prev) => [...prev, m]);
+      ip,
-    });
+      wsServerRef,
+      setServer,
+      (ms) => ms.forEach(addMessage),
+      addMessage
+    );
   }, [ip]);
 
   return (
     <AppSidebar
       wsRef={wsNodeRef}
-      setMessages={setMessages}
+      addMessage={() => {}}
       userList={userList}
       setUserList={setUserList}
       server={server}

src/components/Sidebar.tsx

@@ -40,15 +40,15 @@ export default function AppSidebar({
   children,
   chatWith,
   wsRef,
-  setMessages,
   onNewMessage,
   setUser,
   server,
   messages,
+  addMessage,
 }: Readonly<{
   wsRef: React.RefObject<WebSocket | null>;
+  addMessage: (msg: Message) => void;
   messages?: Message[];
-  setMessages: (m: Message[]) => void;
   onNewMessage?: (msg: Message) => void;
   userList: StringMap<UserProfile>;
   setUserList: React.Dispatch<React.SetStateAction<StringMap<UserProfile>>>;
@@ -79,7 +79,7 @@ export default function AppSidebar({
       user?.node_address,
       wsRef,
       () => {},
-      setMessages,
+      (ms) => ms.forEach(addMessage),
       (m) => {
         if (m.from !== chatWith && m.from !== user.id)
           toast(