live sync working

apps/admin/src/app/chat/page.tsx

@@ -57,6 +57,11 @@ export default function AdminChatPage() {
 
   const typingTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const socketRef = useRef<Socket | null>(null);
+  const getTokenRef = useRef(getToken);
+  const activeThreadIdRef = useRef<string | null>(null);
+  const subscribedThreadIdsRef = useRef<Set<string>>(new Set());
+  const loadingThreadsRef = useRef(false);
+  const loadingMessagesRef = useRef<Record<string, boolean>>({});
 
   const activeMessages = useMemo(
     () => (activeThreadId ? (messagesByThreadId[activeThreadId] ?? []) : []),
@@ -69,71 +74,97 @@ export default function AdminChatPage() {
   );
 
   useEffect(() => {
-    const loadThreads = async () => {
-      const token = await getToken();
-      if (!token) {
-        return;
-      }
+    getTokenRef.current = getToken;
+  }, [getToken]);
 
-      try {
+  useEffect(() => {
+    activeThreadIdRef.current = activeThreadId;
+  }, [activeThreadId]);
+
+  const loadThreads = async (showLoader = true) => {
+    if (loadingThreadsRef.current) {
+      return;
+    }
+
+    const token = await getTokenRef.current();
+    if (!token) {
+      return;
+    }
+
+    loadingThreadsRef.current = true;
+    try {
+      if (showLoader) {
         setLoadingThreads(true);
-        const response = await axios.get<{ threads: ChatThread[] }>(
-          "/api/chat/threads",
-          {
-            headers: { Authorization: `Bearer ${token}` },
-          },
-        );
+      }
+      const response = await axios.get<{ threads: ChatThread[] }>(
+        "/api/chat/threads",
+        {
+          headers: { Authorization: `Bearer ${token}` },
+        },
+      );
 
-        setThreads(response.data.threads);
-        setActiveThreadId(
-          (prev) => prev ?? response.data.threads[0]?.id ?? null,
-        );
-        setReadByThreadId({});
-      } finally {
+      setThreads(response.data.threads);
+      setActiveThreadId((prev) => prev ?? response.data.threads[0]?.id ?? null);
+      setReadByThreadId({});
+    } finally {
+      if (showLoader) {
         setLoadingThreads(false);
       }
-    };
+      loadingThreadsRef.current = false;
+    }
+  };
 
-    void loadThreads();
-  }, [getToken]);
+  const loadMessages = async (threadId: string, showLoader = true) => {
+    if (loadingMessagesRef.current[threadId]) {
+      return;
+    }
+
+    const token = await getTokenRef.current();
+    if (!token) {
+      return;
+    }
+
+    loadingMessagesRef.current[threadId] = true;
+    try {
+      if (showLoader) {
+        setLoadingMessages(true);
+      }
+      const response = await axios.get<{ messages: ChatMessage[] }>(
+        `/api/chat/threads/${threadId}/messages`,
+        {
+          headers: { Authorization: `Bearer ${token}` },
+        },
+      );
+
+      setMessagesByThreadId((prev) => ({
+        ...prev,
+        [threadId]: response.data.messages,
+      }));
+    } finally {
+      if (showLoader) {
+        setLoadingMessages(false);
+      }
+      loadingMessagesRef.current[threadId] = false;
+    }
+  };
+
+  useEffect(() => {
+    void loadThreads(true);
+  }, []);
 
   useEffect(() => {
     if (!activeThreadId) {
       return;
     }
 
-    const loadMessages = async () => {
-      const token = await getToken();
-      if (!token) {
-        return;
-      }
-
-      try {
-        setLoadingMessages(true);
-        const response = await axios.get<{ messages: ChatMessage[] }>(
-          `/api/chat/threads/${activeThreadId}/messages`,
-          {
-            headers: { Authorization: `Bearer ${token}` },
-          },
-        );
-
-        setMessagesByThreadId((prev) => ({
-          ...prev,
-          [activeThreadId]: response.data.messages,
-        }));
-      } finally {
-        setLoadingMessages(false);
-      }
-    };
-
-    void loadMessages();
-  }, [activeThreadId, getToken]);
+    void loadMessages(activeThreadId, true);
+  }, [activeThreadId]);
 
   useEffect(() => {
     let mounted = true;
 
     const setupSocket = async () => {
-      const token = await getToken();
+      const token = await getTokenRef.current();
       if (!token || !mounted) {
         return;
       }
@@ -151,14 +182,14 @@ export default function AdminChatPage() {
 
       socket.on("connect", () => {
         setSocketConnected(true);
-        if (activeThreadId) {
-          socket.emit("chat:subscribe", { threadId: activeThreadId });
-        }
+        subscribedThreadIdsRef.current.clear();
+        void loadThreads(false);
       });
 
       socket.on("disconnect", () => {
         setSocketConnected(false);
         setTypingByThreadId({});
+        subscribedThreadIdsRef.current.clear();
       });
 
       socket.on(
@@ -185,7 +216,7 @@ export default function AdminChatPage() {
                       lastMessageAt: event.message.createdAt,
                       lastMessageBody: event.message.body,
                       unreadCount:
-                        event.threadId === activeThreadId ||
+                        event.threadId === activeThreadIdRef.current ||
                         event.message.senderUserId === userId
                           ? thread.unreadCount
                           : thread.unreadCount + 1,
@@ -263,6 +294,8 @@ export default function AdminChatPage() {
             [event.userId!]: event.lastReadMessageId!,
           },
         }));
+
+        void loadThreads(false);
       });
 
       socket.on("chat:error", (event: { code?: string; message?: string }) => {
@@ -284,28 +317,57 @@ export default function AdminChatPage() {
         socketRef.current = null;
       }
     };
-  }, [activeThreadId, getToken, userId]);
+  }, [userId]);
 
   useEffect(() => {
-    if (!activeThreadId || !socketRef.current || !socketConnected) {
+    if (!socketRef.current || !socketConnected) {
+      return;
+    }
+
+    const socket = socketRef.current;
+    const nextIds = new Set(threads.map((thread) => thread.id));
+
+    threads.forEach((thread) => {
+      if (!subscribedThreadIdsRef.current.has(thread.id)) {
+        socket.emit("chat:subscribe", { threadId: thread.id });
+        subscribedThreadIdsRef.current.add(thread.id);
+      }
+    });
+
+    Array.from(subscribedThreadIdsRef.current).forEach((threadId) => {
+      if (!nextIds.has(threadId)) {
+        socket.emit("chat:unsubscribe", { threadId });
+        subscribedThreadIdsRef.current.delete(threadId);
+      }
+    });
+  }, [socketConnected, threads]);
+
+  useEffect(() => {
+    if (!activeThreadId) {
       return;
     }
 
-    socketRef.current.emit("chat:subscribe", { threadId: activeThreadId });
     setThreads((prev) =>
       prev.map((thread) =>
         thread.id === activeThreadId ? { ...thread, unreadCount: 0 } : thread,
       ),
     );
+  }, [activeThreadId]);
 
-    return () => {
-      if (socketRef.current) {
-        socketRef.current.emit("chat:unsubscribe", {
-          threadId: activeThreadId,
-        });
-      }
-    };
-  }, [activeThreadId, socketConnected]);
+  useEffect(() => {
+    if (!socketConnected) {
+      const interval = setInterval(() => {
+        void loadThreads(false);
+        if (activeThreadIdRef.current) {
+          void loadMessages(activeThreadIdRef.current, false);
+        }
+      }, 5000);
+
+      return () => {
+        clearInterval(interval);
+      };
+    }
+  }, [socketConnected]);
 
   useEffect(() => {
     if (!activeThreadId) {
@@ -319,7 +381,7 @@ export default function AdminChatPage() {
     }
 
     const markRead = async () => {
-      const token = await getToken();
+      const token = await getTokenRef.current();
       if (!token) {
         return;
       }
@@ -351,7 +413,7 @@ export default function AdminChatPage() {
     };
 
     void markRead();
-  }, [activeThreadId, getToken, messagesByThreadId, socketConnected, userId]);
+  }, [activeThreadId, messagesByThreadId, socketConnected, userId]);
 
   const onChangeDraft = (value: string) => {
     setDraft(value);
@@ -419,7 +481,7 @@ export default function AdminChatPage() {
       return;
     }
 
-    const token = await getToken();
+    const token = await getTokenRef.current();
     if (!token) {
       return;
     }