From bc35420dcd97a973396ae42369ec9325c2b76ff4 Mon Sep 17 00:00:00 2001 From: apsinghdev Date: Tue, 20 Aug 2024 19:40:12 +0530 Subject: [PATCH 01/19] remove chat button for now --- client/src/components/Menu.jsx | 1 - client/src/components/Socials.jsx | 4 ++-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/client/src/components/Menu.jsx b/client/src/components/Menu.jsx index 016357a..a0377fd 100644 --- a/client/src/components/Menu.jsx +++ b/client/src/components/Menu.jsx @@ -81,7 +81,6 @@ function Menu(){ return (
- diff --git a/client/src/components/Socials.jsx b/client/src/components/Socials.jsx index f249415..392ed57 100644 --- a/client/src/components/Socials.jsx +++ b/client/src/components/Socials.jsx @@ -9,8 +9,8 @@ function Socials(){

Built By{" "} - - AJEET + + Ajeet

Date: Thu, 22 Aug 2024 18:55:25 +0530 Subject: [PATCH 02/19] remove unnecessary code --- client/index.html | 1 - client/src/App.jsx | 1 - 2 files changed, 2 deletions(-) diff --git a/client/index.html b/client/index.html index 81684c8..c6dc82f 100644 --- a/client/index.html +++ b/client/index.html @@ -9,6 +9,5 @@
- diff --git a/client/src/App.jsx b/client/src/App.jsx index 1ff1723..1053a1c 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -18,7 +18,6 @@ import { showTextEditor, } from "./atoms"; -socket.connect(); function App() { const [showMenu, setShowMenu] = useRecoilState(showMenuState); From adf14ddaecff443b865d8e23eff4afdf5d160ca0 Mon Sep 17 00:00:00 2001 From: apsinghdev Date: Mon, 2 Sep 2024 17:27:27 +0530 Subject: [PATCH 03/19] install uuid --- client/package-lock.json | 14 ++++++++++++++ client/package.json | 1 + client/src/generateLink.js | 0 3 files changed, 15 insertions(+) create mode 100644 client/src/generateLink.js diff --git a/client/package-lock.json b/client/package-lock.json index 345663b..555bdb0 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -14,6 +14,7 @@ "react-icons": "^5.2.0", "recoil": "^0.7.7", "socket.io-client": "^4.7.4", + "uuid": "^10.0.0", "y-socket.io": "^1.1.3", "yjs": "^13.6.15" }, @@ -5658,6 +5659,19 @@ "base64-arraybuffer": "^1.0.2" } }, + "node_modules/uuid": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz", + "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==", + "funding": [ + "https://github.com/sponsors/broofa", + "https://github.com/sponsors/ctavan" + ], + "license": "MIT", + "bin": { + "uuid": "dist/bin/uuid" + } + }, "node_modules/vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", diff --git a/client/package.json b/client/package.json index 7d308df..65c573d 100644 --- a/client/package.json +++ b/client/package.json @@ -16,6 +16,7 @@ "react-icons": "^5.2.0", "recoil": "^0.7.7", "socket.io-client": "^4.7.4", + "uuid": "^10.0.0", "y-socket.io": "^1.1.3", "yjs": "^13.6.15" }, diff --git a/client/src/generateLink.js b/client/src/generateLink.js new file mode 100644 index 0000000..e69de29 From 4fe444d5c430b4c3f26cc8b1abadda39a01650e8 Mon Sep 17 00:00:00 2001 From: apsinghdev Date: Mon, 2 Sep 2024 17:48:04 +0530 Subject: [PATCH 04/19] feat: generate the collaboraion link --- client/src/generateLink.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/client/src/generateLink.js b/client/src/generateLink.js index e69de29..4b76bc1 100644 --- a/client/src/generateLink.js +++ b/client/src/generateLink.js @@ -0,0 +1,14 @@ +import {v4 as uuidv4} from "uuid"; + +const generateCollabLink = () => { + const uniqueId = uuidv4(); + const link = `http://localhost:5173/?roomID=${uniqueId}`; + return link; +} + +const redirectToCollabLink = () => { + const link = generateCollabLink(); + window.location.replace(link); +}; + +export default redirectToCollabLink; \ No newline at end of file From 2648d9fc41b93b9f7caf98aa647f768728f6be9e Mon Sep 17 00:00:00 2001 From: apsinghdev Date: Tue, 3 Sep 2024 07:10:12 +0530 Subject: [PATCH 05/19] feat: add message feature and collaboration flag --- client/src/App.jsx | 11 ++++++++++- client/src/atoms.js | 10 ++++++++++ client/src/components/InfoMsg.jsx | 10 ++++++++++ client/src/components/Menu.jsx | 16 ++++++++++++---- 4 files changed, 42 insertions(+), 5 deletions(-) create mode 100644 client/src/components/InfoMsg.jsx diff --git a/client/src/App.jsx b/client/src/App.jsx index 1053a1c..60875ec 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from "react"; import "./App.css"; import socket from "./socket"; +import InfoMsg from "./components/InfoMsg"; import Sidebar from "./components/Sidebar"; import Canvas from "./components/Canvas"; @@ -16,6 +17,8 @@ import { canvasState, showMenuState, showTextEditor, + collaborationStarted, + showMsg } from "./atoms"; @@ -31,7 +34,8 @@ function App() { const canvasColor = useRecoilValue(canvasColors); const [currentCanvas, setCanvas] = useRecoilState(canvasState); const textEditor = useRecoilValue(showTextEditor); - + const hasCollaborationStarted = useRecoilValue(collaborationStarted); + const [showMessage, setShowMsg] = useRecoilState(showMsg); function toggleMenu() { setShowMenu(!showMenu); @@ -157,6 +161,10 @@ function App() { } } + const closeMsg = () => { + setShowMsg(false); + } + return (
} {showMenu && } {textEditor && } + {showMessage && }
); } diff --git a/client/src/atoms.js b/client/src/atoms.js index b7e9705..3802c25 100644 --- a/client/src/atoms.js +++ b/client/src/atoms.js @@ -34,4 +34,14 @@ export const showTextEditor = atom({ export const textEditorInput = atom({ key: "textEditorInput", default: '' +}) + +export const collaborationStarted = atom({ + key: "collaboraionstarted", + default: false +}) + +export const showMsg = atom({ + key: "showMsg", + default: false }) \ No newline at end of file diff --git a/client/src/components/InfoMsg.jsx b/client/src/components/InfoMsg.jsx new file mode 100644 index 0000000..7f1cbc4 --- /dev/null +++ b/client/src/components/InfoMsg.jsx @@ -0,0 +1,10 @@ +const InfoMsg = (props) => { + return ( +
+
×
+
{props.message}
+
+ ) +} + +export default InfoMsg; \ No newline at end of file diff --git a/client/src/components/Menu.jsx b/client/src/components/Menu.jsx index a0377fd..a4ae6b5 100644 --- a/client/src/components/Menu.jsx +++ b/client/src/components/Menu.jsx @@ -3,18 +3,21 @@ import MenuItem from "./MenuItem"; import Socials from "./Socials"; import SponsorBtn from "./SponsorBtn"; import { useRecoilValue, useRecoilState, useSetRecoilState} from "recoil"; -import { canvasState, canvasColors, showTextEditor, showMenuState } from "../atoms"; +import { canvasState, canvasColors, showTextEditor, showMenuState, collaborationStarted, showMsg } from "../atoms"; import { jsPDF } from "jspdf"; import socket from "../socket"; import { useCallback, useEffect, useRef } from "react"; +import InfoMsg from "./InfoMsg"; function Menu(){ const canvas = useRecoilValue(canvasState); const canvasColor = useRecoilValue(canvasColors); const [textEditor, setTextEditor] = useRecoilState(showTextEditor) const setMenuStateFalse = useSetRecoilState(showMenuState); + const [hasCollaboraionStarted, setCollaborationFlag] = useRecoilState(collaborationStarted); let isRendering = useRef(false); - + const showMessage = useRecoilValue(showMsg); + const changeShowMsg = useSetRecoilState(showMsg); // function to save canvas as pdf function saveAsPdf() { const canvasDataURL = canvas.toDataURL("image/png"); @@ -54,7 +57,6 @@ function Menu(){ } const openTextEditor = useCallback(() => { - const data = "ajeet"; if(!isRendering.current){ socket.emit("open-text-editor", data); } @@ -78,9 +80,15 @@ function Menu(){ }; }, [handleOpenTextEditor]); + const startCollab = () => { + setCollaborationFlag(true); + setMenuStateFalse(false); + changeShowMsg(true); + } + return (
- + From 36c8a446ccc6846a1ca6daf59058b6e23b31bcbf Mon Sep 17 00:00:00 2001 From: apsinghdev Date: Tue, 3 Sep 2024 09:19:12 +0530 Subject: [PATCH 06/19] feat: add collaboration flag to initiate collaboraion specific functions --- api/index.js | 2 +- client/src/App.jsx | 51 ++++++++++++++++------------ client/src/components/Menu.jsx | 24 +++++++------ client/src/components/TextEditor.jsx | 41 ++++++++++++---------- 4 files changed, 66 insertions(+), 52 deletions(-) diff --git a/api/index.js b/api/index.js index 6588832..b9485ff 100644 --- a/api/index.js +++ b/api/index.js @@ -27,7 +27,7 @@ app.get('/test', (res) => { }) io.on('connection', (socket) => { - console.log('user connected socket') + console.log(`user ${socket.id} connected`); socket.on('draw', (data)=>{ socket.broadcast.emit('draw', data); }) diff --git a/client/src/App.jsx b/client/src/App.jsx index 60875ec..c8b98d4 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -79,7 +79,9 @@ function App() { const endX = e.clientX - canvas.getBoundingClientRect().left; const endY = e.clientY - canvas.getBoundingClientRect().top; drawLine(startX, startY, endX, endY, penColor); - socket.emit("draw", { startX, startY, endX, endY, penColor, lineWidth }); + if (hasCollaborationStarted) { + socket.emit("draw", { startX, startY, endX, endY, penColor, lineWidth }); + } setStartX(endX); setStartY(endY); } @@ -110,26 +112,29 @@ function App() { }, [penColor, eraserMode, position, ctx, isDrawing, startX, startY]); useEffect(() => { - socket.on("draw", (data) => { - drawLine( - data.startX, - data.startY, - data.endX, - data.endY, - data.penColor, - data.lineWidth - ); - }); - - socket.on("clear", () => { - clearRect(); - }); - - return () => { - socket.off("draw"); - socket.off("clear"); - }; - }, [socket, ctx]); + if (hasCollaborationStarted) { + socket.on("draw", (data) => { + console.log("on draw"); + drawLine( + data.startX, + data.startY, + data.endX, + data.endY, + data.penColor, + data.lineWidth + ); + }); + + socket.on("clear", () => { + clearRect(); + }); + + return () => { + socket.off("draw"); + socket.off("clear"); + }; + } + }, [socket, ctx, hasCollaborationStarted]); function clearRect() { if (ctx) { @@ -139,7 +144,9 @@ function App() { function clearOnClick() { clearRect(); - socket.emit("clear"); + if (hasCollaborationStarted) { + socket.emit("clear"); + } } function addStroke(e) { diff --git a/client/src/components/Menu.jsx b/client/src/components/Menu.jsx index a4ae6b5..eba500c 100644 --- a/client/src/components/Menu.jsx +++ b/client/src/components/Menu.jsx @@ -57,12 +57,12 @@ function Menu(){ } const openTextEditor = useCallback(() => { - if(!isRendering.current){ - socket.emit("open-text-editor", data); + if(!isRendering.current && hasCollaboraionStarted){ + socket.emit("open-text-editor"); } setTextEditor(true); setMenuStateFalse(false); - }, [setMenuStateFalse, setTextEditor]) + }, [setMenuStateFalse, setTextEditor, hasCollaboraionStarted]) // Memoize the handler function to keep it stable and pass the ref const handleOpenTextEditor = useCallback((rendering) => { @@ -71,14 +71,16 @@ function Menu(){ }, [openTextEditor]) useEffect(() => { - socket.on("open-text-editor", (data) => { - handleOpenTextEditor(true); - }); - - return () => { - socket.off("open-text-editor", handleOpenTextEditor); - }; - }, [handleOpenTextEditor]); + if (hasCollaboraionStarted) { + socket.on("open-text-editor", (data) => { + handleOpenTextEditor(true); + }); + + return () => { + socket.off("open-text-editor", handleOpenTextEditor); + }; + } + }, [handleOpenTextEditor, hasCollaboraionStarted]); const startCollab = () => { setCollaborationFlag(true); diff --git a/client/src/components/TextEditor.jsx b/client/src/components/TextEditor.jsx index dc3db57..bb64c03 100644 --- a/client/src/components/TextEditor.jsx +++ b/client/src/components/TextEditor.jsx @@ -1,5 +1,5 @@ -import { useSetRecoilState, useRecoilState } from "recoil"; -import { showTextEditor, textEditorInput } from "../atoms"; +import { useSetRecoilState, useRecoilState, useRecoilValue } from "recoil"; +import { showTextEditor, textEditorInput, collaborationStarted } from "../atoms"; import socket from "../socket"; import { useCallback, useEffect, useRef } from "react"; @@ -7,14 +7,15 @@ function TextEditor() { const setTextEditorFalse = useSetRecoilState(showTextEditor); // const text = useRecoilValue(textEditorInput); const [input, setInput] = useRecoilState(textEditorInput) + const hasCollaborationStarted = useRecoilValue(collaborationStarted); const isRendering = useRef(false); const removeTextEditor = useCallback(() => { setTextEditorFalse(false); - if (!isRendering.current) { + if (!isRendering.current && hasCollaborationStarted) { socket.emit("close-text-editor"); } - }, [setTextEditorFalse]) + }, [setTextEditorFalse, hasCollaborationStarted]) const handleRemoveTextEditor = useCallback((rendering) => { isRendering.current = rendering; @@ -26,23 +27,27 @@ function TextEditor() { }, [setInput]); useEffect(() => { - socket.on("close-text-editor", () => { - handleRemoveTextEditor(true); - }); - - socket.on("text-updated", data => { - handleTextEditorUpdate(data); - }); - - return () => { - socket.off("close-text-editor", handleRemoveTextEditor); - }; - }, [handleRemoveTextEditor, handleTextEditorUpdate]); + if (hasCollaborationStarted) { + socket.on("close-text-editor", () => { + handleRemoveTextEditor(true); + }); + + socket.on("text-updated", data => { + handleTextEditorUpdate(data); + }); + + return () => { + socket.off("close-text-editor", handleRemoveTextEditor); + }; + } + }, [handleRemoveTextEditor, handleTextEditorUpdate, hasCollaborationStarted]); function handleChange(event) { const value = event.target.value; - setInput(value); // this is asynchronous - socket.emit("text-updated", value); + setInput(value); + if (hasCollaborationStarted) { + socket.emit("text-updated", value); + } } return ( From 66759c98776c8d652fa7e0a494174386ff656bff Mon Sep 17 00:00:00 2001 From: apsinghdev Date: Tue, 3 Sep 2024 09:39:09 +0530 Subject: [PATCH 07/19] feat: add logic to stop the collaboration and disconnect the socket --- api/index.js | 4 ++++ client/src/App.jsx | 1 - client/src/components/Menu.jsx | 13 +++++++++++-- 3 files changed, 15 insertions(+), 3 deletions(-) diff --git a/api/index.js b/api/index.js index b9485ff..bcc75a2 100644 --- a/api/index.js +++ b/api/index.js @@ -47,6 +47,10 @@ io.on('connection', (socket) => { socket.on("text-updated", (data) => { socket.broadcast.emit("text-updated", data); }); + + socket.on("disconnect", () => { + console.log(`${socket.id} disconnected`); + }) }) server.listen(PORT, ()=>{ diff --git a/client/src/App.jsx b/client/src/App.jsx index c8b98d4..79f5a4f 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -114,7 +114,6 @@ function App() { useEffect(() => { if (hasCollaborationStarted) { socket.on("draw", (data) => { - console.log("on draw"); drawLine( data.startX, data.startY, diff --git a/client/src/components/Menu.jsx b/client/src/components/Menu.jsx index eba500c..180ea51 100644 --- a/client/src/components/Menu.jsx +++ b/client/src/components/Menu.jsx @@ -85,12 +85,21 @@ function Menu(){ const startCollab = () => { setCollaborationFlag(true); setMenuStateFalse(false); - changeShowMsg(true); + }; + + const stopCollab = () => { + setCollaborationFlag(false); + setMenuStateFalse(false); + socket.disconnect(); // temporary solution } return (
- + {hasCollaboraionStarted ? ( + + ) : ( + + )} From f411c1d86b9018e473198dba068232f2d2120184 Mon Sep 17 00:00:00 2001 From: apsinghdev Date: Tue, 3 Sep 2024 14:03:53 +0530 Subject: [PATCH 08/19] feat: add rooms feature --- api/index.js | 18 ++++++++++++------ client/src/App.jsx | 9 ++++++--- client/src/atoms.js | 6 ++++++ client/src/components/Menu.jsx | 6 ++++-- client/src/components/TextEditor.jsx | 12 +++++++----- 5 files changed, 35 insertions(+), 16 deletions(-) diff --git a/api/index.js b/api/index.js index bcc75a2..7c11904 100644 --- a/api/index.js +++ b/api/index.js @@ -28,24 +28,30 @@ app.get('/test', (res) => { io.on('connection', (socket) => { console.log(`user ${socket.id} connected`); + + socket.on('joinRoom', ({room_id}) => { + socket.join(room_id); + console.log(`User ${socket.id} joined room ${room_id}`); + }) + socket.on('draw', (data)=>{ - socket.broadcast.emit('draw', data); + socket.to(data.room_id).emit('draw', data); }) - socket.on('clear', () => { - io.emit('clear'); + socket.on('clear', (data) => { + socket.to(data.room_id).emit('clear'); }) socket.on('open-text-editor', data => { - socket.broadcast.emit("open-text-editor", data); + socket.to(data.room_id).emit("open-text-editor", data); }) socket.on('close-text-editor', data => { - socket.broadcast.emit("close-text-editor", data); + socket.to(data.room_id).emit("close-text-editor", data); }) socket.on("text-updated", (data) => { - socket.broadcast.emit("text-updated", data); + socket.to(data.room_id).emit("text-updated", data); }); socket.on("disconnect", () => { diff --git a/client/src/App.jsx b/client/src/App.jsx index 79f5a4f..b65e57d 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -18,7 +18,8 @@ import { showMenuState, showTextEditor, collaborationStarted, - showMsg + showMsg, + roomIdAtom } from "./atoms"; @@ -36,6 +37,7 @@ function App() { const textEditor = useRecoilValue(showTextEditor); const hasCollaborationStarted = useRecoilValue(collaborationStarted); const [showMessage, setShowMsg] = useRecoilState(showMsg); + const [roomId, setRoomId] = useRecoilState(roomIdAtom); function toggleMenu() { setShowMenu(!showMenu); @@ -80,7 +82,7 @@ function App() { const endY = e.clientY - canvas.getBoundingClientRect().top; drawLine(startX, startY, endX, endY, penColor); if (hasCollaborationStarted) { - socket.emit("draw", { startX, startY, endX, endY, penColor, lineWidth }); + socket.emit("draw", { startX, startY, endX, endY, penColor, lineWidth, room_id: roomId }); } setStartX(endX); setStartY(endY); @@ -144,7 +146,8 @@ function App() { function clearOnClick() { clearRect(); if (hasCollaborationStarted) { - socket.emit("clear"); + const data = {room_id: roomId}; + socket.emit("clear", data); } } diff --git a/client/src/atoms.js b/client/src/atoms.js index 3802c25..7a1f01c 100644 --- a/client/src/atoms.js +++ b/client/src/atoms.js @@ -44,4 +44,10 @@ export const collaborationStarted = atom({ export const showMsg = atom({ key: "showMsg", default: false +}) + + +export const roomIdAtom = atom({ + key: "roomIdAtom", + default: null }) \ No newline at end of file diff --git a/client/src/components/Menu.jsx b/client/src/components/Menu.jsx index 180ea51..2366fee 100644 --- a/client/src/components/Menu.jsx +++ b/client/src/components/Menu.jsx @@ -3,7 +3,7 @@ import MenuItem from "./MenuItem"; import Socials from "./Socials"; import SponsorBtn from "./SponsorBtn"; import { useRecoilValue, useRecoilState, useSetRecoilState} from "recoil"; -import { canvasState, canvasColors, showTextEditor, showMenuState, collaborationStarted, showMsg } from "../atoms"; +import { canvasState, canvasColors, showTextEditor, showMenuState, collaborationStarted, showMsg, roomIdAtom } from "../atoms"; import { jsPDF } from "jspdf"; import socket from "../socket"; import { useCallback, useEffect, useRef } from "react"; @@ -18,6 +18,7 @@ function Menu(){ let isRendering = useRef(false); const showMessage = useRecoilValue(showMsg); const changeShowMsg = useSetRecoilState(showMsg); + const roomId = useRecoilValue(roomIdAtom); // function to save canvas as pdf function saveAsPdf() { const canvasDataURL = canvas.toDataURL("image/png"); @@ -58,7 +59,8 @@ function Menu(){ const openTextEditor = useCallback(() => { if(!isRendering.current && hasCollaboraionStarted){ - socket.emit("open-text-editor"); + const data = {room_id: roomId}; + socket.emit("open-text-editor", data); } setTextEditor(true); setMenuStateFalse(false); diff --git a/client/src/components/TextEditor.jsx b/client/src/components/TextEditor.jsx index bb64c03..5a85b2d 100644 --- a/client/src/components/TextEditor.jsx +++ b/client/src/components/TextEditor.jsx @@ -1,19 +1,20 @@ import { useSetRecoilState, useRecoilState, useRecoilValue } from "recoil"; -import { showTextEditor, textEditorInput, collaborationStarted } from "../atoms"; +import { showTextEditor, textEditorInput, collaborationStarted, roomIdAtom } from "../atoms"; import socket from "../socket"; import { useCallback, useEffect, useRef } from "react"; function TextEditor() { const setTextEditorFalse = useSetRecoilState(showTextEditor); - // const text = useRecoilValue(textEditorInput); const [input, setInput] = useRecoilState(textEditorInput) const hasCollaborationStarted = useRecoilValue(collaborationStarted); const isRendering = useRef(false); + const roomId = useRecoilValue(roomIdAtom); const removeTextEditor = useCallback(() => { setTextEditorFalse(false); if (!isRendering.current && hasCollaborationStarted) { - socket.emit("close-text-editor"); + const data = {room_id: roomId}; + socket.emit("close-text-editor", data); } }, [setTextEditorFalse, hasCollaborationStarted]) @@ -33,7 +34,7 @@ function TextEditor() { }); socket.on("text-updated", data => { - handleTextEditorUpdate(data); + handleTextEditorUpdate(data.value); }); return () => { @@ -46,7 +47,8 @@ function TextEditor() { const value = event.target.value; setInput(value); if (hasCollaborationStarted) { - socket.emit("text-updated", value); + const data = {value, room_id: roomId} + socket.emit("text-updated", data); } } From b2c793dc2280aead2156cc9047cdb27728b34838 Mon Sep 17 00:00:00 2001 From: apsinghdev Date: Tue, 3 Sep 2024 14:38:26 +0530 Subject: [PATCH 09/19] feat: add custom state management mechanism using a class --- client/index.html | 1 + client/src/collaboration.js | 5 +++++ 2 files changed, 6 insertions(+) create mode 100644 client/src/collaboration.js diff --git a/client/index.html b/client/index.html index c6dc82f..adc3f8e 100644 --- a/client/index.html +++ b/client/index.html @@ -8,6 +8,7 @@
+ diff --git a/client/src/collaboration.js b/client/src/collaboration.js new file mode 100644 index 0000000..b86c310 --- /dev/null +++ b/client/src/collaboration.js @@ -0,0 +1,5 @@ +class Collaboration { + constructor() { + this.socket = null; + } +} \ No newline at end of file From b21192d8912b584e7b56778cce4bdd2e5dfc2c03 Mon Sep 17 00:00:00 2001 From: apsinghdev Date: Tue, 3 Sep 2024 14:48:42 +0530 Subject: [PATCH 10/19] feat: add logic to make socket connection only when there is a roomID in the URL --- client/src/App.jsx | 36 ++++++++++++++++++++++++---- client/src/components/Menu.jsx | 13 +++++----- client/src/components/TextEditor.jsx | 13 +++++----- client/src/socket.js | 11 --------- 4 files changed, 45 insertions(+), 28 deletions(-) delete mode 100644 client/src/socket.js diff --git a/client/src/App.jsx b/client/src/App.jsx index b65e57d..11acff8 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -1,7 +1,7 @@ /* eslint-disable react-hooks/exhaustive-deps */ import { useEffect, useRef, useState } from "react"; +import { io } from "socket.io-client"; import "./App.css"; -import socket from "./socket"; import InfoMsg from "./components/InfoMsg"; import Sidebar from "./components/Sidebar"; @@ -22,6 +22,9 @@ import { roomIdAtom } from "./atoms"; +const PORT = "http://localhost:8000"; +const collaboration = new Collaboration(); +const socket = collaboration.socket; function App() { const [showMenu, setShowMenu] = useRecoilState(showMenuState); @@ -81,7 +84,7 @@ function App() { const endX = e.clientX - canvas.getBoundingClientRect().left; const endY = e.clientY - canvas.getBoundingClientRect().top; drawLine(startX, startY, endX, endY, penColor); - if (hasCollaborationStarted) { + if (hasCollaborationStarted && socket) { socket.emit("draw", { startX, startY, endX, endY, penColor, lineWidth, room_id: roomId }); } setStartX(endX); @@ -111,10 +114,10 @@ function App() { canvas.removeEventListener("mousedown", handleMousedown); canvas.removeEventListener("mouseup", handleMouseup); }; - }, [penColor, eraserMode, position, ctx, isDrawing, startX, startY]); + }, [socket, penColor, eraserMode, position, ctx, isDrawing, startX, startY]); useEffect(() => { - if (hasCollaborationStarted) { + if (hasCollaborationStarted && socket) { socket.on("draw", (data) => { drawLine( data.startX, @@ -145,7 +148,7 @@ function App() { function clearOnClick() { clearRect(); - if (hasCollaborationStarted) { + if (hasCollaborationStarted && socket) { const data = {room_id: roomId}; socket.emit("clear", data); } @@ -174,6 +177,29 @@ function App() { setShowMsg(false); } + useEffect(() => { + const urlParams = new URLSearchParams(window.location.search); + const roomID = urlParams.get('roomID'); + if (roomID) { + setRoomId(roomID); + const newSocket = io(PORT); + try { + newSocket.on("connect", () => { + console.log("connected"); + try { + newSocket.emit("joinRoom", { room_id: roomID }); + console.log(`joined room ${roomID}`); + } catch (error) { + console.log("Can't join the room", error); + } + }) + collaboration.socket = newSocket; + } catch (error) { + console.log("Can't connect", error); + } + } + }, []); + return (
{ - if(!isRendering.current && hasCollaboraionStarted){ + if(!isRendering.current && hasCollaboraionStarted && socket){ const data = {room_id: roomId}; socket.emit("open-text-editor", data); } setTextEditor(true); setMenuStateFalse(false); - }, [setMenuStateFalse, setTextEditor, hasCollaboraionStarted]) + }, [setMenuStateFalse, setTextEditor, hasCollaboraionStarted, socket]) // Memoize the handler function to keep it stable and pass the ref const handleOpenTextEditor = useCallback((rendering) => { @@ -73,7 +74,7 @@ function Menu(){ }, [openTextEditor]) useEffect(() => { - if (hasCollaboraionStarted) { + if (hasCollaboraionStarted && socket) { socket.on("open-text-editor", (data) => { handleOpenTextEditor(true); }); @@ -82,7 +83,7 @@ function Menu(){ socket.off("open-text-editor", handleOpenTextEditor); }; } - }, [handleOpenTextEditor, hasCollaboraionStarted]); + }, [handleOpenTextEditor, hasCollaboraionStarted, socket]); const startCollab = () => { setCollaborationFlag(true); @@ -92,7 +93,7 @@ function Menu(){ const stopCollab = () => { setCollaborationFlag(false); setMenuStateFalse(false); - socket.disconnect(); // temporary solution + // socket.disconnect(); // temporary solution } return ( diff --git a/client/src/components/TextEditor.jsx b/client/src/components/TextEditor.jsx index 5a85b2d..a8c12eb 100644 --- a/client/src/components/TextEditor.jsx +++ b/client/src/components/TextEditor.jsx @@ -1,7 +1,8 @@ import { useSetRecoilState, useRecoilState, useRecoilValue } from "recoil"; import { showTextEditor, textEditorInput, collaborationStarted, roomIdAtom } from "../atoms"; -import socket from "../socket"; import { useCallback, useEffect, useRef } from "react"; +const collaboration = new Collaboration(); +const socket = collaboration.socket; function TextEditor() { const setTextEditorFalse = useSetRecoilState(showTextEditor); @@ -12,11 +13,11 @@ function TextEditor() { const removeTextEditor = useCallback(() => { setTextEditorFalse(false); - if (!isRendering.current && hasCollaborationStarted) { + if (!isRendering.current && hasCollaborationStarted && socket) { const data = {room_id: roomId}; socket.emit("close-text-editor", data); } - }, [setTextEditorFalse, hasCollaborationStarted]) + }, [setTextEditorFalse, hasCollaborationStarted, socket]) const handleRemoveTextEditor = useCallback((rendering) => { isRendering.current = rendering; @@ -28,7 +29,7 @@ function TextEditor() { }, [setInput]); useEffect(() => { - if (hasCollaborationStarted) { + if (hasCollaborationStarted && socket) { socket.on("close-text-editor", () => { handleRemoveTextEditor(true); }); @@ -41,12 +42,12 @@ function TextEditor() { socket.off("close-text-editor", handleRemoveTextEditor); }; } - }, [handleRemoveTextEditor, handleTextEditorUpdate, hasCollaborationStarted]); + }, [handleRemoveTextEditor, handleTextEditorUpdate, hasCollaborationStarted, socket]); function handleChange(event) { const value = event.target.value; setInput(value); - if (hasCollaborationStarted) { + if (hasCollaborationStarted && socket) { const data = {value, room_id: roomId} socket.emit("text-updated", data); } diff --git a/client/src/socket.js b/client/src/socket.js deleted file mode 100644 index f4b3145..0000000 --- a/client/src/socket.js +++ /dev/null @@ -1,11 +0,0 @@ -import { io } from "socket.io-client"; - -const PORT = "http://localhost:8000"; - -const socket = io(PORT); - -socket.on("connect", () => { - console.log("connected"); -}); - -export default socket; From 25954e4da68dce498fb424099941e2aaf6da746c Mon Sep 17 00:00:00 2001 From: apsinghdev Date: Tue, 3 Sep 2024 15:27:57 +0530 Subject: [PATCH 11/19] refactor: store roomID in a variable --- api/index.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/api/index.js b/api/index.js index 7c11904..4303364 100644 --- a/api/index.js +++ b/api/index.js @@ -27,7 +27,6 @@ app.get('/test', (res) => { }) io.on('connection', (socket) => { - console.log(`user ${socket.id} connected`); socket.on('joinRoom', ({room_id}) => { socket.join(room_id); @@ -35,23 +34,28 @@ io.on('connection', (socket) => { }) socket.on('draw', (data)=>{ - socket.to(data.room_id).emit('draw', data); + const room = data.room_id; + socket.to(room).emit('draw', data); }) socket.on('clear', (data) => { - socket.to(data.room_id).emit('clear'); + const room = data.room_id; + socket.to(room).emit('clear'); }) socket.on('open-text-editor', data => { - socket.to(data.room_id).emit("open-text-editor", data); + const room = data.room_id; + socket.to(room).emit("open-text-editor", data); }) socket.on('close-text-editor', data => { - socket.to(data.room_id).emit("close-text-editor", data); + const room = data.room_id; + socket.to(room).emit("close-text-editor", data); }) socket.on("text-updated", (data) => { - socket.to(data.room_id).emit("text-updated", data); + const room = data.room_id; + socket.to(room).emit("text-updated", data); }); socket.on("disconnect", () => { From f6291eb884cbeb63ac57a30ff106d8f7b8af3b14 Mon Sep 17 00:00:00 2001 From: apsinghdev Date: Tue, 3 Sep 2024 15:29:52 +0530 Subject: [PATCH 12/19] fix: store the socket in socket variable and change the collaboration flag when collaboration is on --- client/src/App.jsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/client/src/App.jsx b/client/src/App.jsx index 11acff8..06dec96 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -9,7 +9,7 @@ import Canvas from "./components/Canvas"; import Menu from "./components/Menu"; import EraserCursor from "./components/EraserCursor"; import TextEditor from "./components/TextEditor"; -import { useRecoilValue, useRecoilState } from "recoil"; +import { useRecoilValue, useRecoilState, useSetRecoilState } from "recoil"; import { eraserState, cursorPosition, @@ -24,7 +24,7 @@ import { const PORT = "http://localhost:8000"; const collaboration = new Collaboration(); -const socket = collaboration.socket; +let socket = collaboration.socket; function App() { const [showMenu, setShowMenu] = useRecoilState(showMenuState); @@ -39,6 +39,7 @@ function App() { const [currentCanvas, setCanvas] = useRecoilState(canvasState); const textEditor = useRecoilValue(showTextEditor); const hasCollaborationStarted = useRecoilValue(collaborationStarted); + const setCollaborationFlag = useSetRecoilState(collaborationStarted); const [showMessage, setShowMsg] = useRecoilState(showMsg); const [roomId, setRoomId] = useRecoilState(roomIdAtom); @@ -181,8 +182,12 @@ function App() { const urlParams = new URLSearchParams(window.location.search); const roomID = urlParams.get('roomID'); if (roomID) { + setRoomId(roomID); + setCollaborationFlag(true); + const newSocket = io(PORT); + try { newSocket.on("connect", () => { console.log("connected"); @@ -193,6 +198,7 @@ function App() { console.log("Can't join the room", error); } }) + socket = newSocket; collaboration.socket = newSocket; } catch (error) { console.log("Can't connect", error); From 52294fc901c7eefa0c6b77d17526477e36ee887c Mon Sep 17 00:00:00 2001 From: apsinghdev Date: Wed, 4 Sep 2024 07:23:30 +0530 Subject: [PATCH 13/19] fix: fixed state management of socket using context API --- client/index.html | 1 - client/src/App.jsx | 10 ++++------ client/src/Context.jsx | 20 ++++++++++++++++++++ client/src/collaboration.js | 5 ----- client/src/components/Menu.jsx | 9 ++++++--- client/src/components/TextEditor.jsx | 4 ++-- client/src/main.jsx | 3 +++ 7 files changed, 35 insertions(+), 17 deletions(-) create mode 100644 client/src/Context.jsx delete mode 100644 client/src/collaboration.js diff --git a/client/index.html b/client/index.html index adc3f8e..c6dc82f 100644 --- a/client/index.html +++ b/client/index.html @@ -8,7 +8,6 @@
- diff --git a/client/src/App.jsx b/client/src/App.jsx index 06dec96..1bfe890 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -3,7 +3,6 @@ import { useEffect, useRef, useState } from "react"; import { io } from "socket.io-client"; import "./App.css"; import InfoMsg from "./components/InfoMsg"; - import Sidebar from "./components/Sidebar"; import Canvas from "./components/Canvas"; import Menu from "./components/Menu"; @@ -21,10 +20,9 @@ import { showMsg, roomIdAtom } from "./atoms"; +import { useSocket } from "./Context"; -const PORT = "http://localhost:8000"; -const collaboration = new Collaboration(); -let socket = collaboration.socket; +const PORT = "http://localhost:8000"; function App() { const [showMenu, setShowMenu] = useRecoilState(showMenuState); @@ -42,6 +40,7 @@ function App() { const setCollaborationFlag = useSetRecoilState(collaborationStarted); const [showMessage, setShowMsg] = useRecoilState(showMsg); const [roomId, setRoomId] = useRecoilState(roomIdAtom); + const { socket, setSocket } = useSocket(); function toggleMenu() { setShowMenu(!showMenu); @@ -198,8 +197,7 @@ function App() { console.log("Can't join the room", error); } }) - socket = newSocket; - collaboration.socket = newSocket; + setSocket(newSocket); } catch (error) { console.log("Can't connect", error); } diff --git a/client/src/Context.jsx b/client/src/Context.jsx new file mode 100644 index 0000000..4e0b97f --- /dev/null +++ b/client/src/Context.jsx @@ -0,0 +1,20 @@ +import React, { createContext, useContext, useState } from 'react'; + +// Create a Context for the socket +const SocketContext = createContext(null); + +// Create a custom hook to use the SocketContext +export const useSocket = () => { + return useContext(SocketContext); +}; + +// Create a provider component +export const SocketProvider = ({ children }) => { + const [socket, setSocket] = useState(null); + + return ( + + {children} + + ); +}; \ No newline at end of file diff --git a/client/src/collaboration.js b/client/src/collaboration.js deleted file mode 100644 index b86c310..0000000 --- a/client/src/collaboration.js +++ /dev/null @@ -1,5 +0,0 @@ -class Collaboration { - constructor() { - this.socket = null; - } -} \ No newline at end of file diff --git a/client/src/components/Menu.jsx b/client/src/components/Menu.jsx index eb7a926..9e30887 100644 --- a/client/src/components/Menu.jsx +++ b/client/src/components/Menu.jsx @@ -7,8 +7,7 @@ import { canvasState, canvasColors, showTextEditor, showMenuState, collaboration import { jsPDF } from "jspdf"; import { useCallback, useEffect, useRef } from "react"; import InfoMsg from "./InfoMsg"; -const collaboration = new Collaboration(); -const socket = collaboration.socket; +import { useSocket } from "../Context"; function Menu(){ const canvas = useRecoilValue(canvasState); @@ -20,6 +19,8 @@ function Menu(){ const showMessage = useRecoilValue(showMsg); const changeShowMsg = useSetRecoilState(showMsg); const roomId = useRecoilValue(roomIdAtom); + const { socket } = useSocket(); + // function to save canvas as pdf function saveAsPdf() { const canvasDataURL = canvas.toDataURL("image/png"); @@ -59,9 +60,11 @@ function Menu(){ } const openTextEditor = useCallback(() => { + console.log("socket", socket); if(!isRendering.current && hasCollaboraionStarted && socket){ const data = {room_id: roomId}; socket.emit("open-text-editor", data); + console.log("emit te"); } setTextEditor(true); setMenuStateFalse(false); @@ -71,7 +74,7 @@ function Menu(){ const handleOpenTextEditor = useCallback((rendering) => { isRendering.current = rendering; openTextEditor(); - }, [openTextEditor]) + }, [openTextEditor, isRendering]); useEffect(() => { if (hasCollaboraionStarted && socket) { diff --git a/client/src/components/TextEditor.jsx b/client/src/components/TextEditor.jsx index a8c12eb..fdaac06 100644 --- a/client/src/components/TextEditor.jsx +++ b/client/src/components/TextEditor.jsx @@ -1,8 +1,7 @@ import { useSetRecoilState, useRecoilState, useRecoilValue } from "recoil"; import { showTextEditor, textEditorInput, collaborationStarted, roomIdAtom } from "../atoms"; import { useCallback, useEffect, useRef } from "react"; -const collaboration = new Collaboration(); -const socket = collaboration.socket; +import { useSocket } from "../Context"; function TextEditor() { const setTextEditorFalse = useSetRecoilState(showTextEditor); @@ -10,6 +9,7 @@ function TextEditor() { const hasCollaborationStarted = useRecoilValue(collaborationStarted); const isRendering = useRef(false); const roomId = useRecoilValue(roomIdAtom); + const { socket } = useSocket(); const removeTextEditor = useCallback(() => { setTextEditorFalse(false); diff --git a/client/src/main.jsx b/client/src/main.jsx index e46b492..656d286 100644 --- a/client/src/main.jsx +++ b/client/src/main.jsx @@ -3,11 +3,14 @@ import ReactDOM from 'react-dom/client' import App from './App.jsx' import './index.css' import { RecoilRoot } from "recoil" +import { SocketProvider } from './Context.jsx' ReactDOM.createRoot(document.getElementById("root")).render( + + ); From b8532a1d1906261c5640d8f16dc943ad488fe44a Mon Sep 17 00:00:00 2001 From: apsinghdev Date: Wed, 4 Sep 2024 09:25:49 +0530 Subject: [PATCH 14/19] refactor: correct the spelling of hasCollaborationStarted --- client/src/components/Menu.jsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/client/src/components/Menu.jsx b/client/src/components/Menu.jsx index 9e30887..e87fb61 100644 --- a/client/src/components/Menu.jsx +++ b/client/src/components/Menu.jsx @@ -14,7 +14,7 @@ function Menu(){ const canvasColor = useRecoilValue(canvasColors); const [textEditor, setTextEditor] = useRecoilState(showTextEditor) const setMenuStateFalse = useSetRecoilState(showMenuState); - const [hasCollaboraionStarted, setCollaborationFlag] = useRecoilState(collaborationStarted); + const [hasCollaborationStarted, setCollaborationFlag] = useRecoilState(collaborationStarted); let isRendering = useRef(false); const showMessage = useRecoilValue(showMsg); const changeShowMsg = useSetRecoilState(showMsg); @@ -61,14 +61,14 @@ function Menu(){ const openTextEditor = useCallback(() => { console.log("socket", socket); - if(!isRendering.current && hasCollaboraionStarted && socket){ + if(!isRendering.current && hasCollaborationStarted && socket){ const data = {room_id: roomId}; socket.emit("open-text-editor", data); console.log("emit te"); } setTextEditor(true); setMenuStateFalse(false); - }, [setMenuStateFalse, setTextEditor, hasCollaboraionStarted, socket]) + }, [setMenuStateFalse, setTextEditor, hasCollaborationStarted, socket]) // Memoize the handler function to keep it stable and pass the ref const handleOpenTextEditor = useCallback((rendering) => { @@ -77,7 +77,7 @@ function Menu(){ }, [openTextEditor, isRendering]); useEffect(() => { - if (hasCollaboraionStarted && socket) { + if (hasCollaborationStarted && socket) { socket.on("open-text-editor", (data) => { handleOpenTextEditor(true); }); @@ -86,7 +86,7 @@ function Menu(){ socket.off("open-text-editor", handleOpenTextEditor); }; } - }, [handleOpenTextEditor, hasCollaboraionStarted, socket]); + }, [handleOpenTextEditor, hasCollaborationStarted, socket]); const startCollab = () => { setCollaborationFlag(true); @@ -101,7 +101,7 @@ function Menu(){ return (
- {hasCollaboraionStarted ? ( + {hasCollaborationStarted ? ( ) : ( From 450d99ec5be82529bb6007fb7fcecb458f330f59 Mon Sep 17 00:00:00 2001 From: apsinghdev Date: Wed, 4 Sep 2024 09:29:08 +0530 Subject: [PATCH 15/19] fix: fix the non-consistent behaviour of the text editor --- client/src/App.jsx | 14 ++++++++++++++ client/src/components/Menu.jsx | 18 ------------------ 2 files changed, 14 insertions(+), 18 deletions(-) diff --git a/client/src/App.jsx b/client/src/App.jsx index 1bfe890..93d9302 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -36,6 +36,7 @@ function App() { const canvasColor = useRecoilValue(canvasColors); const [currentCanvas, setCanvas] = useRecoilState(canvasState); const textEditor = useRecoilValue(showTextEditor); + const setTextEditor = useSetRecoilState(showTextEditor); const hasCollaborationStarted = useRecoilValue(collaborationStarted); const setCollaborationFlag = useSetRecoilState(collaborationStarted); const [showMessage, setShowMsg] = useRecoilState(showMsg); @@ -204,6 +205,19 @@ function App() { } }, []); + // Hook to listen the events emitted by the server + useEffect(() => { + if (hasCollaborationStarted && socket) { + socket.on("open-text-editor", () => { + setTextEditor(true); + }); + + return () => { + socket.off("open-text-editor"); + }; + } + }, [showTextEditor, socket, hasCollaborationStarted]); + return (
{ - isRendering.current = rendering; - openTextEditor(); - }, [openTextEditor, isRendering]); - - useEffect(() => { - if (hasCollaborationStarted && socket) { - socket.on("open-text-editor", (data) => { - handleOpenTextEditor(true); - }); - - return () => { - socket.off("open-text-editor", handleOpenTextEditor); - }; - } - }, [handleOpenTextEditor, hasCollaborationStarted, socket]); const startCollab = () => { setCollaborationFlag(true); From 2f5eef76a74d2ebc23bb9c154c7e3448b09333a3 Mon Sep 17 00:00:00 2001 From: apsinghdev Date: Wed, 4 Sep 2024 09:31:18 +0530 Subject: [PATCH 16/19] chore: remove testing console log --- client/src/components/Menu.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/client/src/components/Menu.jsx b/client/src/components/Menu.jsx index fb9a6d6..d4ab07e 100644 --- a/client/src/components/Menu.jsx +++ b/client/src/components/Menu.jsx @@ -60,7 +60,6 @@ function Menu(){ } const openTextEditor = useCallback(() => { - console.log("socket", socket); if(!isRendering.current && hasCollaborationStarted && socket){ const data = {room_id: roomId}; socket.emit("open-text-editor", data); From 60e5d345ae7d4abfcbac8e7fed73a4894a0aa0a1 Mon Sep 17 00:00:00 2001 From: apsinghdev Date: Wed, 4 Sep 2024 12:40:01 +0530 Subject: [PATCH 17/19] feat: connect the collaboration logic with Start-collaboration button --- client/src/App.jsx | 16 ++++++++++------ client/src/atoms.js | 8 ++++++-- client/src/components/Menu.jsx | 5 ++++- 3 files changed, 20 insertions(+), 9 deletions(-) diff --git a/client/src/App.jsx b/client/src/App.jsx index 93d9302..036c3fc 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -18,7 +18,8 @@ import { showTextEditor, collaborationStarted, showMsg, - roomIdAtom + roomIdAtom, + messageTxtAtom } from "./atoms"; import { useSocket } from "./Context"; @@ -42,6 +43,7 @@ function App() { const [showMessage, setShowMsg] = useRecoilState(showMsg); const [roomId, setRoomId] = useRecoilState(roomIdAtom); const { socket, setSocket } = useSocket(); + const [ messageText, setMessageText ] = useRecoilState(messageTxtAtom); function toggleMenu() { setShowMenu(!showMenu); @@ -175,17 +177,17 @@ function App() { } const closeMsg = () => { + setMessageText(null); setShowMsg(false); } useEffect(() => { const urlParams = new URLSearchParams(window.location.search); - const roomID = urlParams.get('roomID'); + const roomID = urlParams.get("roomID"); if (roomID) { - + const collaborationLink = window.location.href; setRoomId(roomID); setCollaborationFlag(true); - const newSocket = io(PORT); try { @@ -197,8 +199,10 @@ function App() { } catch (error) { console.log("Can't join the room", error); } - }) + }); setSocket(newSocket); + setMessageText(`Collaboration Link : ${collaborationLink}`); + setShowMsg(true); } catch (error) { console.log("Can't connect", error); } @@ -232,7 +236,7 @@ function App() { {eraserMode && } {showMenu && } {textEditor && } - {showMessage && } + {showMessage && }
); } diff --git a/client/src/atoms.js b/client/src/atoms.js index 7a1f01c..5b03d67 100644 --- a/client/src/atoms.js +++ b/client/src/atoms.js @@ -46,8 +46,12 @@ export const showMsg = atom({ default: false }) - export const roomIdAtom = atom({ key: "roomIdAtom", default: null -}) \ No newline at end of file +}) + +export const messageTxtAtom = atom({ + key: "msgTxtAtom", + default: null +}); \ No newline at end of file diff --git a/client/src/components/Menu.jsx b/client/src/components/Menu.jsx index d4ab07e..b19b3be 100644 --- a/client/src/components/Menu.jsx +++ b/client/src/components/Menu.jsx @@ -8,6 +8,7 @@ import { jsPDF } from "jspdf"; import { useCallback, useEffect, useRef } from "react"; import InfoMsg from "./InfoMsg"; import { useSocket } from "../Context"; +import redirectToCollabLink from "../generateLink"; function Menu(){ const canvas = useRecoilValue(canvasState); @@ -72,12 +73,14 @@ function Menu(){ const startCollab = () => { setCollaborationFlag(true); setMenuStateFalse(false); + redirectToCollabLink(); }; const stopCollab = () => { setCollaborationFlag(false); setMenuStateFalse(false); - // socket.disconnect(); // temporary solution + socket.disconnect(); + console.log("Disconnected from the collaboration room"); } return ( From 97c2db0376c515247085560c505171a3ca789451 Mon Sep 17 00:00:00 2001 From: apsinghdev Date: Wed, 4 Sep 2024 12:51:59 +0530 Subject: [PATCH 18/19] chore: store the url in a variable --- client/src/generateLink.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/client/src/generateLink.js b/client/src/generateLink.js index 4b76bc1..5b8312d 100644 --- a/client/src/generateLink.js +++ b/client/src/generateLink.js @@ -1,8 +1,10 @@ import {v4 as uuidv4} from "uuid"; +const url = "http://localhost:5173/"; + const generateCollabLink = () => { const uniqueId = uuidv4(); - const link = `http://localhost:5173/?roomID=${uniqueId}`; + const link = `${url}?roomID=${uniqueId}`; return link; } From a6e582051fd642d3b9c13af1930b999578fba4c6 Mon Sep 17 00:00:00 2001 From: apsinghdev Date: Wed, 4 Sep 2024 13:21:06 +0530 Subject: [PATCH 19/19] feat: limit the socket calls in case ofserver-not-found --- client/src/App.jsx | 25 ++++++++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) diff --git a/client/src/App.jsx b/client/src/App.jsx index 036c3fc..0ef4090 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -184,6 +184,18 @@ function App() { useEffect(() => { const urlParams = new URLSearchParams(window.location.search); const roomID = urlParams.get("roomID"); + const RETRIES = 5; + const DELAY_DURATION = 2000; + let attempts = 0; + + const closeConnection = (socket) => { + if (attempts >= RETRIES) { + socket.disconnect(); + setCollaborationFlag(false); + console.log("Max socket calls exceeded. Please try connecting again.") + } + } + if (roomID) { const collaborationLink = window.location.href; setRoomId(roomID); @@ -196,13 +208,20 @@ function App() { try { newSocket.emit("joinRoom", { room_id: roomID }); console.log(`joined room ${roomID}`); + setSocket(newSocket); + setMessageText(`Collaboration Link : ${collaborationLink}`); + setShowMsg(true); } catch (error) { console.log("Can't join the room", error); } }); - setSocket(newSocket); - setMessageText(`Collaboration Link : ${collaborationLink}`); - setShowMsg(true); + + newSocket.on("connect_error", (error) => { + attempts++; + console.log("Failed to connect to the socket server. Retrying...") + setTimeout(() => closeConnection(newSocket), DELAY_DURATION); + }) + } catch (error) { console.log("Can't connect", error); }