commit 0432cb7dec16ac315acc29efa882a852ca7aaffc
author Issam E. Maghni <issam.e.maghni@mailbox.org> Sat Nov 12 06:09:26 2022 +0000
committer Issam E. Maghni <issam.e.maghni@mailbox.org> Tue Nov 15 21:18:09 2022 +0000
tree d15aa2ef5d794c9c098fe7c06d317b875cce7cf4
parent cb11bba466df2d2e214b89f4709ee4d20139cbed

Send received message through WebSocket

- send received message from through WebSocket
- remove SocketIO from client

GitLab: #96
Change-Id: I7a8eec04010f0773428f914792c13decef393ebf

client/src/pages/ChatInterface.tsx

diff --git a/client/src/pages/ChatInterface.tsx b/client/src/pages/ChatInterface.tsx
index b09f2fd..12659e9 100644
--- a/client/src/pages/ChatInterface.tsx
+++ b/client/src/pages/ChatInterface.tsx
@@ -16,7 +16,7 @@
  * <https://www.gnu.org/licenses/>.
  */
 import { Box, Divider, Stack } from '@mui/material';
-import { ConversationMember, Message } from 'jami-web-common';
+import { ConversationMember, Message, WebSocketMessageType } from 'jami-web-common';
 import { useCallback, useContext, useEffect, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
 
@@ -24,7 +24,7 @@
 import LoadingPage from '../components/Loading';
 import MessageList from '../components/MessageList';
 import SendMessageForm from '../components/SendMessageForm';
-import { SocketContext } from '../contexts/Socket';
+import { WebSocketContext } from '../contexts/WebSocketProvider';
 import { useMessagesQuery, useSendMessageMutation } from '../services/Conversation';
 import { FileHandler } from '../utils/files';
 
@@ -33,7 +33,7 @@
   members: ConversationMember[];
 };
 const ChatInterface = ({ conversationId, members }: ChatInterfaceProps) => {
-  const socket = useContext(SocketContext);
+  const webSocket = useContext(WebSocketContext);
   const [messages, setMessages] = useState<Message[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(false);
@@ -87,14 +87,13 @@
   const sendMessage = useCallback((message: string) => sendMessageMutation.mutate(message), [sendMessageMutation]);
 
   useEffect(() => {
-    if (socket) {
-      socket.off('newMessage');
-      socket.on('newMessage', (data) => {
+    if (webSocket) {
+      webSocket.bind(WebSocketMessageType.ConversationMessage, ({ message }) => {
         console.log('newMessage');
-        setMessages((messages) => addMessage(messages, data));
+        setMessages((messages) => addMessage(messages, message));
       });
     }
-  }, [conversationId, socket]);
+  }, [conversationId, webSocket]);
 
   if (isLoading) {
     return <LoadingPage />;