diff --git a/src/App.tsx b/src/App.tsx index 29fa918..edfff79 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -15,7 +15,8 @@ import PrivateRoute from '@educt/components/PrivateRoute'; import PublicRoute from '@educt/components/PublicRoute'; import { useSocketEvent } from './hooks/useSocketEvent'; import { SocketContext } from './contexts'; -import { UserOnlineListType, UserSeesionType } from './types'; +import { HistoryMessageType, UserOnlineListType, UserSeesionType } from './types'; +import { useToast } from '@chakra-ui/react'; const App = () => { const { @@ -23,6 +24,7 @@ const App = () => { onlineStore, } = useRootStore(); const { socket } = useContext(SocketContext); + const toast = useToast(); useSocketEvent('connect', () => console.info('[WebSocket]: Connected.')); useSocketEvent('disconnect', () => console.info('[WebSocket]: Disconnected.')); @@ -36,6 +38,26 @@ const App = () => { } } }); + useSocketEvent('chat:message', data => { + const chatId = new URLSearchParams(location.search).get('chat_id'); + const user = onlineStore.getUser(data.from); + + if (user && data.from !== chatId) { + if (data.to === data.from) return; + + /** + * Notify user about new message + */ + toast({ + title: `${user.userName}`, + description: data.content, + variant: 'left-accent', + position: 'bottom-right', + status: 'info', + duration: 5000, + }); + } + }); useSocketEvent('user:online', online => onlineStore.loadOnline(online)); return ( diff --git a/src/components/Chat/Window/Window.tsx b/src/components/Chat/Window/Window.tsx index 319041d..254d465 100644 --- a/src/components/Chat/Window/Window.tsx +++ b/src/components/Chat/Window/Window.tsx @@ -98,7 +98,7 @@ const Window: React.FC = props => { isMyMessage: message.from === me?.id, content: message.content, time: new Date(message.time).toLocaleTimeString(), - userName: message.from === me?.id ? me.fullname : user.fullname, + userName: message.from === me?.id ? me?.fullname : user.fullname, }; }); @@ -121,7 +121,7 @@ const Window: React.FC = props => { }, [chatId]); /** - * Event on accept new messages + * Event on accept new messages (set new message to state) */ useSocketEvent('chat:message', data => { const user = onlineStore.getUser(data.from); @@ -133,18 +133,6 @@ const Window: React.FC = props => { */ if (data.to === data.from) return; - /** - * Notify user about new message - */ - // toast({ - // title: `${user.userName}`, - // description: data.content, - // variant: 'left-accent', - // position: 'bottom-right', - // status: 'info', - // duration: 5000, - // }); - const message: MessageType = { content: data.content, userName: user.userName, @@ -168,7 +156,7 @@ const Window: React.FC = props => { /** * Unselected user */ - if (!chatId || selectedUser === null) { + if (!chatId || !selectedUser) { return ( diff --git a/src/pages/messages/messages.tsx b/src/pages/messages/messages.tsx index b2ca915..e4e8050 100644 --- a/src/pages/messages/messages.tsx +++ b/src/pages/messages/messages.tsx @@ -3,11 +3,19 @@ import { Page } from '@educt/components/PageElements'; import { IPageProps } from '@educt/interfaces'; import { Chat } from '@educt/components/Chat'; import { observer } from 'mobx-react'; +import { useRootStore } from '@educt/hooks/useRootStore'; +import LoadingPage from '@educt/components/LoadingPage'; /** * Messages page */ const MessagesPage: React.FC = () => { + const { + userStore: { me }, + } = useRootStore(); + + if (me === null) return ; + return (