put socket.io into a React Context. Make instant messaging work
Change-Id: I8576dbf8bf5e8d749a0453fc49a7d6c8a26e3915
diff --git a/client/src/components/ConversationView.js b/client/src/components/ConversationView.js
index bf459ea..ba9b932 100644
--- a/client/src/components/ConversationView.js
+++ b/client/src/components/ConversationView.js
@@ -1,15 +1,15 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
import MessageList from './MessageList';
import SendMessageForm from './SendMessageForm';
import Conversation from '../../../model/Conversation';
import LoadingPage from './loading';
-import io from "socket.io-client";
import { Box, Stack, Typography } from '@mui/material';
import ConversationAvatar from './ConversationAvatar';
import { useConversationQuery, useMessagesQuery, useSendMessageMutation } from '../services/conversation';
+import { SocketContext } from '../contexts/socket';
const ConversationView = props => {
- const [socket, setSocket] = useState()
+ const socket = useContext(SocketContext)
const [conversation, setConversation] = useState()
const [messages, setMessages] = useState([])
const [isLoading, setIsLoading] = useState(true)
@@ -47,17 +47,6 @@
)
useEffect(() => {
- console.log("io.connect")
- const socket = io()
- setSocket(socket)
- return () => {
- console.log("io.disconnect")
- socket.disconnect()
- setSocket(undefined)
- }
- }, [])
-
- useEffect(() => {
if (!conversation)
return
console.log(`io set conversation ${props.conversationId} `+ socket)
@@ -66,10 +55,11 @@
socket.off('newMessage')
socket.on('newMessage', (data) => {
console.log("newMessage")
- console.log(data)
- setMessages(addMessage(messages, data))
+ setMessages(
+ (messages) => addMessage(messages, data)
+ )
})
- }, [conversation ? props.conversationId : "", socket])
+ }, [socket, setMessages])
if (isLoading) {
return <LoadingPage />