commit a4b96ab3fef8830db46702896d1396d4c5df2aa9
author idillon <io.daza-dillon@savoirfairelinux.com> Wed Feb 01 15:30:12 2023 -0500
committer idillon <io.daza-dillon@savoirfairelinux.com> Fri Feb 17 02:47:57 2023 -0500
tree aef961190163daa574c5418bd8efc06c7a7a8c6f
parent cf42c6539572be8e58fde7339dc3c09ae18ee833

Ensure WebSocket client is never undefined

Change-Id: I5f5c34112fa989d6c06697b8a6d46acfbd01008a

client/src/pages/ChatInterface.tsx

diff --git a/client/src/pages/ChatInterface.tsx b/client/src/pages/ChatInterface.tsx
index fa428ac..4ac8037 100644
--- a/client/src/pages/ChatInterface.tsx
+++ b/client/src/pages/ChatInterface.tsx
@@ -18,7 +18,7 @@
 import { Box, Divider, Fade, Stack, Typography } from '@mui/material';
 import { motion } from 'framer-motion';
 import { ConversationMessage, Message, WebSocketMessageType } from 'jami-web-common';
-import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { useTranslation } from 'react-i18next';
 
@@ -28,14 +28,14 @@
 import { FileDragOverlay } from '../components/Overlay';
 import SendMessageForm from '../components/SendMessageForm';
 import { useConversationContext } from '../contexts/ConversationProvider';
-import { WebSocketContext } from '../contexts/WebSocketProvider';
+import { useWebSocketContext } from '../contexts/WebSocketProvider';
 import { ConversationMember } from '../models/conversation-member';
 import { useMessagesQuery, useSendMessageMutation } from '../services/conversationQueries';
 import { FileHandler } from '../utils/files';
 import { translateEnumeration, TranslateEnumerationOptions } from '../utils/translations';
 
 const ChatInterface = () => {
-  const webSocket = useContext(WebSocketContext);
+  const webSocket = useWebSocketContext();
   const { conversationId } = useConversationContext();
   const [messages, setMessages] = useState<Message[]>([]);
   const [isLoading, setIsLoading] = useState(true);
@@ -90,18 +90,16 @@
   const sendMessage = useCallback((message: string) => sendMessageMutation.mutate(message), [sendMessageMutation]);
 
   useEffect(() => {
-    if (webSocket) {
-      const conversationMessageListener = (data: ConversationMessage) => {
-        console.log('newMessage');
-        setMessages((messages) => addMessage(messages, data.message));
-      };
+    const conversationMessageListener = (data: ConversationMessage) => {
+      console.log('newMessage');
+      setMessages((messages) => addMessage(messages, data.message));
+    };
 
-      webSocket.bind(WebSocketMessageType.ConversationMessage, conversationMessageListener);
+    webSocket.bind(WebSocketMessageType.ConversationMessage, conversationMessageListener);
 
-      return () => {
-        webSocket.unbind(WebSocketMessageType.ConversationMessage, conversationMessageListener);
-      };
-    }
+    return () => {
+      webSocket.unbind(WebSocketMessageType.ConversationMessage, conversationMessageListener);
+    };
   }, [webSocket]);
 
   if (isLoading) {