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 />
diff --git a/client/src/contexts/socket.js b/client/src/contexts/socket.js
new file mode 100644
index 0000000..bb59030
--- /dev/null
+++ b/client/src/contexts/socket.js
@@ -0,0 +1,9 @@
+
+import React from "react";
+
+export const SocketContext = React.createContext();
+export const SocketProvider = ({socket, children}) => (
+ <SocketContext.Provider value={socket}>
+ {children}
+ </SocketContext.Provider>
+)
\ No newline at end of file
diff --git a/client/src/index.js b/client/src/index.js
index cdd90a4..a8a1407 100644
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -12,6 +12,8 @@
import * as Sentry from "@sentry/react";
import { BrowserTracing } from "@sentry/tracing";
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import socketio from 'socket.io-client';
+import { SocketProvider } from './contexts/socket.js';
const queryClient = new QueryClient({
defaultOptions: {
@@ -21,15 +23,19 @@
},
})
+const socket = socketio()
+
const container = document.getElementById("root");
const root = createRoot(container);
root.render(
<Provider store={store}>
<React.StrictMode>
<QueryClientProvider client={queryClient}>
- <Router>
- <App/>
- </Router>
+ <SocketProvider socket={socket}>
+ <Router>
+ <App/>
+ </Router>
+ </SocketProvider>
</QueryClientProvider>
</React.StrictMode>
</Provider>