feat: saving session id of socket in localstorage

src/App.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { Router, Switch } from 'react-router-dom';
 import { routes } from './routes.config';
 
@@ -13,15 +13,26 @@ import { useRootStore } from '@educt/hooks/useRootStore';
 import PrivateRoute from '@educt/components/PrivateRoute';
 import PublicRoute from '@educt/components/PublicRoute';
 import { useSocketEvent } from './hooks/useSocketEvent';
+import { SocketContext } from './contexts';
 
 const App = () => {
   const {
     uiStore: { history },
   } = useRootStore();
+  const { socket } = useContext(SocketContext);
 
   useSocketEvent('connect', () => console.info('[WebSocket]: Connected.'));
   useSocketEvent('disconnect', () => console.info('[WebSocket]: Disconnected.'));
   useSocketEvent('connect_error', err => console.error(err));
+  useSocketEvent('user:session', data => {
+    console.log(data);
+    if (socket) {
+      const { sessionId, userId } = data;
+      socket.auth = { sessionId };
+      window.localStorage.setItem('sessionId', sessionId);
+      socket.userId = userId;
+    }
+  });
 
   return (
     <Router history={history}>

src/components/Layout/Layout.tsx

@@ -50,7 +50,13 @@ const Layout: React.FC<LayoutPropsType> = ({ children, roles }) => {
    */
   useEffect(() => {
     if (!socket?.connected) {
-      socket?.connect();
+      if (socket) {
+        const sessionId = window.localStorage.getItem('sessionId');
+        if (sessionId) {
+          socket.auth = { sessionId };
+        }
+        socket.connect();
+      }
     }
   }, [socket]);
 

src/hooks/queries/auth/useLogout.ts

@@ -24,6 +24,7 @@ const useLogout = () => {
       const result = await authStore.logout();
       history.push('/auth');
       toast({ title: 'You are logged out.', isClosable: true, status: 'info' });
+      // window.localStorage.removeItem('sessionId');
       socket?.disconnect();
       return result.data;
     } catch (error) {

src/pages/main/main.tsx

@@ -41,9 +41,7 @@ const MainPage: React.FC<IPageProps> = () => {
    */
   useSocketEvent('user:online', online => setOnline(online));
 
-  useSocketEvent('user:connected', user => {
+  useSocketEvent('user:connected', user => console.table(user));
-    console.table(user);
-  });
 
   useEffect(() => {
     if (stat) {