Improved structure and added caching for server messages

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

@@ -1,34 +1,45 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import { useParams } from "next/navigation";
 import MessageBox from "@/components/MessageBox";
 import AppSidebar from "@/components/Sidebar";
-import { Message, Server as ServerType } from "@/types/types";
-import { UserProfile } from "@/hooks/get-user";
-import { StringMap } from "@/types/typeUtils";
+import { Server as ServerType } from "@/types/types";
 import auth from "@/lib/auth";
-import { useMessages } from "@/hooks/use-messages";
+import { useServerMessages } from "@/hooks/use-messages";
 import useApp from "@/hooks/use-app";
+import { useEffectOnceWhenReady } from "@/hooks/use-once";
 
 export default function Server() {
   const { ip } = useParams<{ ip: string }>();
   const serverRef = useRef<WebSocket | null>(null);
   const [server, setServer] = useState<undefined | ServerType>();
   const app = useApp();
+  const { messages, addMessage } = useServerMessages();
 
-  useEffect(() => {
-    if (!ip) return;
-    auth(ip, serverRef, setServer, app.addMessage);
-  }, [ip]);
+  useEffectOnceWhenReady(
+    () => {
+      if (!ip) return;
+      const msgs = messages[ip];
+      auth(
+        ip,
+        serverRef,
+        setServer,
+        (m) => addMessage(ip, m),
+        () => {},
+        msgs ? msgs[msgs.length - 1]?.id : undefined
+      );
+    },
+    [ip, messages],
+    [undefined, (v) => v[ip]]
+  );
 
   return (
     <AppSidebar app={app} server={server}>
       <MessageBox
         app={app}
         channelName="General"
-        messages={app.messages
-          .filter((m) => m.channel_id === "general")}
+        messages={messages[ip]?.filter((m) => m.channel_id === "general") || []}
         sendMessage={(message) => {
           serverRef.current?.send(
             JSON.stringify({