feat: notify user about new message

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<HistoryMessageType>('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<UserOnlineListType>('user:online', online => onlineStore.loadOnline(online));
 
   return (

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<HistoryMessageType>('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 (
       <Wrapper>
         <Box textAlign={'center'} mt={{ base: '0', lg: '15rem' }}>

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<IPageProps> = () => {
+  const {
+    userStore: { me },
+  } = useRootStore();
+
+  if (me === null) return <LoadingPage />;
+
   return (
     <Page maxW='100%' mt='0' mb='0'>
       <Page.Content>