fix: properly restore chats (#596)

src/components/PageWrapper.tsx

@@ -4,24 +4,29 @@ import { useRouter } from 'next/navigation';
 // Store
 import { useAuth } from '@/context/AuthContext';
 import { useApp } from '@/context/AppContext';
-import { ChatProvider } from '@/context/ChatContext';
+import { ChatProvider, useChat } from '@/context/ChatContext';
+import events from '@/shared/constants/constants';
 
 // Components
 import NavBar from './NavBar';
 
 import useIsTabActive from '@/hooks/useIsTabActive';
 import { ProviderType } from '@/types/propstypes';
+import { useSocket } from '@/context/SocketContext';
 
 const PageWrapper = ({ children }: ProviderType) => {
   const { isLoggedIn } = useAuth();
-  const { updateOnlineStatus, app } = useApp();
+  const { updateOnlineStatus, endSearch, app } = useApp();
+  const { createChat } = useChat()
   const router = useRouter();
   const { settings } = app;
 
   const [onlineStatus, setOnlineStatus] = useState<Date | string | null>(null);
 
   const isTabActive = useIsTabActive();
 
+  const { socket } = useSocket();
+
   useEffect(() => {
     if (!isLoggedIn) {
       return;
@@ -42,6 +47,20 @@ const PageWrapper = ({ children }: ProviderType) => {
     !isLoggedIn && router.push('/login');
   }, [isLoggedIn, router]);
 
+  useEffect(() => {
+    const onRestoreChat = ({ chats, currentChatId }: any) => {
+      Object.values(chats).forEach((chat: any) => {
+        createChat(chat.id, chat.userIds, chat.messages, chat.createdAt);
+      });
+      endSearch(currentChatId);
+    };
+
+    socket?.on(events.NEW_EVENT_CHAT_RESTORE, onRestoreChat);
+    return () => {
+      socket?.off(events.NEW_EVENT_CHAT_RESTORE, onRestoreChat);
+    };
+  }, [socket]);
+
   return (
     <section
       className={`flex flex-col-reverse md:flex-row h-screen ${

src/pages/anonymous.tsx

@@ -179,14 +179,6 @@ const Anonymous = () => {
       navigate.push('/searching');
     });
 
-    socket?.on(events.NEW_EVENT_CHAT_RESTORE, ({ chats, currentChatId }) => {
-      Object.values(chats).forEach((chat: any) => {
-        chat = chat as ChatIdType;
-        createChat(chat.id, chat.userIds, chat.messages, chat.createdAt);
-      });
-      endSearch(currentChatId);
-    });
-
     const connectionEvents = {
       connect: () => {
         updateConnection(false);
@@ -297,14 +289,14 @@ const Anonymous = () => {
     return () => {
       socket?.off(events.NEW_EVENT_ONLINE_STATUS, onlineStatushandler);
       socket?.off('connect');
-      socket?.off(events.NEW_EVENT_CHAT_RESTORE);
       socket?.off(events.NEW_EVENT_CLOSE);
       socket?.off(events.NEW_EVENT_INACTIVE);
       socket?.off('disconnect', onDisconnect);
 
       socket?.io.off('reconnect_attempt', onReconnectAttempt);
       socket?.io.off('reconnect_error', onReconnectError);
 
+      socket?.disconnect();
 
       newMessageEvents.forEach(event => {
         socket?.off(event, onNewMessage);

src/pages/searching.tsx

@@ -98,6 +98,14 @@ const Searching = () => {
     };
   }, [app.currentChatId, authState.email, authState.loginId, router, socket]);
 
+  useEffect(() => {
+    if (!app.currentChatId) {
+      return;
+    }
+
+    router.push('/anonymous')
+  }, [app.currentChatId])
+
   useEffect(() => {
     if (loadingText === defaultLoadingText) {
       timeout = setTimeout(() => {