diff --git a/src/App.tsx b/src/App.tsx index 4a49dae..ca529cf 100644 --- a/src/App.tsx +++ b/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 ( diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx index 691d871..355dcad 100644 --- a/src/components/Layout/Layout.tsx +++ b/src/components/Layout/Layout.tsx @@ -50,7 +50,13 @@ const Layout: React.FC = ({ children, roles }) => { */ useEffect(() => { if (!socket?.connected) { - socket?.connect(); + if (socket) { + const sessionId = window.localStorage.getItem('sessionId'); + if (sessionId) { + socket.auth = { sessionId }; + } + socket.connect(); + } } }, [socket]); diff --git a/src/hooks/queries/auth/useLogout.ts b/src/hooks/queries/auth/useLogout.ts index ff122fa..1d8f93f 100644 --- a/src/hooks/queries/auth/useLogout.ts +++ b/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) { diff --git a/src/pages/main/main.tsx b/src/pages/main/main.tsx index 75bd3c2..7dd5df8 100644 --- a/src/pages/main/main.tsx +++ b/src/pages/main/main.tsx @@ -41,9 +41,7 @@ const MainPage: React.FC = () => { */ useSocketEvent('user:online', online => setOnline(online)); - useSocketEvent('user:connected', user => { - console.table(user); - }); + useSocketEvent('user:connected', user => console.table(user)); useEffect(() => { if (stat) {