Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 52294fc

Browse files
apsinghdevapsinghdev
committedSep 4, 2024
fix: fixed state management of socket using context API
1 parent f6291eb commit 52294fc

File tree

7 files changed

+35
-17
lines changed

7 files changed

+35
-17
lines changed
 

‎client/index.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88
</head>
99
<body>
1010
<div id="root"></div>
11-
<script src="/src/collaboration.js"></script>
1211
<script type="module" src="/src/main.jsx"></script>
1312
</body>
1413
</html>

‎client/src/App.jsx

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { useEffect, useRef, useState } from "react";
33
import { io } from "socket.io-client";
44
import "./App.css";
55
import InfoMsg from "./components/InfoMsg";
6-
76
import Sidebar from "./components/Sidebar";
87
import Canvas from "./components/Canvas";
98
import Menu from "./components/Menu";
@@ -21,10 +20,9 @@ import {
2120
showMsg,
2221
roomIdAtom
2322
} from "./atoms";
23+
import { useSocket } from "./Context";
2424

25-
const PORT = "http://localhost:8000";
26-
const collaboration = new Collaboration();
27-
let socket = collaboration.socket;
25+
const PORT = "http://localhost:8000";
2826

2927
function App() {
3028
const [showMenu, setShowMenu] = useRecoilState(showMenuState);
@@ -42,6 +40,7 @@ function App() {
4240
const setCollaborationFlag = useSetRecoilState(collaborationStarted);
4341
const [showMessage, setShowMsg] = useRecoilState(showMsg);
4442
const [roomId, setRoomId] = useRecoilState(roomIdAtom);
43+
const { socket, setSocket } = useSocket();
4544

4645
function toggleMenu() {
4746
setShowMenu(!showMenu);
@@ -198,8 +197,7 @@ function App() {
198197
console.log("Can't join the room", error);
199198
}
200199
})
201-
socket = newSocket;
202-
collaboration.socket = newSocket;
200+
setSocket(newSocket);
203201
} catch (error) {
204202
console.log("Can't connect", error);
205203
}

‎client/src/Context.jsx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React, { createContext, useContext, useState } from 'react';
2+
3+
// Create a Context for the socket
4+
const SocketContext = createContext(null);
5+
6+
// Create a custom hook to use the SocketContext
7+
export const useSocket = () => {
8+
return useContext(SocketContext);
9+
};
10+
11+
// Create a provider component
12+
export const SocketProvider = ({ children }) => {
13+
const [socket, setSocket] = useState(null);
14+
15+
return (
16+
<SocketContext.Provider value={{ socket, setSocket }}>
17+
{children}
18+
</SocketContext.Provider>
19+
);
20+
};

‎client/src/collaboration.js

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎client/src/components/Menu.jsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,7 @@ import { canvasState, canvasColors, showTextEditor, showMenuState, collaboration
77
import { jsPDF } from "jspdf";
88
import { useCallback, useEffect, useRef } from "react";
99
import InfoMsg from "./InfoMsg";
10-
const collaboration = new Collaboration();
11-
const socket = collaboration.socket;
10+
import { useSocket } from "../Context";
1211

1312
function Menu(){
1413
const canvas = useRecoilValue(canvasState);
@@ -20,6 +19,8 @@ function Menu(){
2019
const showMessage = useRecoilValue(showMsg);
2120
const changeShowMsg = useSetRecoilState(showMsg);
2221
const roomId = useRecoilValue(roomIdAtom);
22+
const { socket } = useSocket();
23+
2324
// function to save canvas as pdf
2425
function saveAsPdf() {
2526
const canvasDataURL = canvas.toDataURL("image/png");
@@ -59,9 +60,11 @@ function Menu(){
5960
}
6061

6162
const openTextEditor = useCallback(() => {
63+
console.log("socket", socket);
6264
if(!isRendering.current && hasCollaboraionStarted && socket){
6365
const data = {room_id: roomId};
6466
socket.emit("open-text-editor", data);
67+
console.log("emit te");
6568
}
6669
setTextEditor(true);
6770
setMenuStateFalse(false);
@@ -71,7 +74,7 @@ function Menu(){
7174
const handleOpenTextEditor = useCallback((rendering) => {
7275
isRendering.current = rendering;
7376
openTextEditor();
74-
}, [openTextEditor])
77+
}, [openTextEditor, isRendering]);
7578

7679
useEffect(() => {
7780
if (hasCollaboraionStarted && socket) {

‎client/src/components/TextEditor.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import { useSetRecoilState, useRecoilState, useRecoilValue } from "recoil";
22
import { showTextEditor, textEditorInput, collaborationStarted, roomIdAtom } from "../atoms";
33
import { useCallback, useEffect, useRef } from "react";
4-
const collaboration = new Collaboration();
5-
const socket = collaboration.socket;
4+
import { useSocket } from "../Context";
65

76
function TextEditor() {
87
const setTextEditorFalse = useSetRecoilState(showTextEditor);
98
const [input, setInput] = useRecoilState(textEditorInput)
109
const hasCollaborationStarted = useRecoilValue(collaborationStarted);
1110
const isRendering = useRef(false);
1211
const roomId = useRecoilValue(roomIdAtom);
12+
const { socket } = useSocket();
1313

1414
const removeTextEditor = useCallback(() => {
1515
setTextEditorFalse(false);

‎client/src/main.jsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,14 @@ import ReactDOM from 'react-dom/client'
33
import App from './App.jsx'
44
import './index.css'
55
import { RecoilRoot } from "recoil"
6+
import { SocketProvider } from './Context.jsx'
67

78
ReactDOM.createRoot(document.getElementById("root")).render(
89
<React.StrictMode>
910
<RecoilRoot>
11+
<SocketProvider>
1012
<App />
13+
</SocketProvider>
1114
</RecoilRoot>
1215
</React.StrictMode>
1316
);

0 commit comments

Comments
 (0)
Please sign in to comment.