Close text-editor when one does it

Author: apsinghdev

api/index.js

@@ -39,6 +39,10 @@ io.on('connection', (socket) => {
     socket.on('open-text-editor', data => {
         socket.broadcast.emit("open-text-editor", data);
     })
+
+    socket.on('close-text-editor', data => {
+        socket.broadcast.emit("close-text-editor", data);
+    })
 })
 
 server.listen(PORT, ()=>{

client/src/components/Menu.jsx

@@ -69,9 +69,8 @@ function Menu(){
   }, [])
 
   useEffect(() => {
-    // PRB: socket is listening but the function is not getting executed
     socket.on("open-text-editor", (data) => {
-      handleOpenTextEditor(true); // PRB: infinite loop taking place
+      handleOpenTextEditor(true);
     });
 
     return () => {

client/src/components/TextEditor.jsx

@@ -1,16 +1,37 @@
 import { useSetRecoilState, useRecoilValue, useRecoilState } from "recoil";
 import { showTextEditor, docState, textEditorInput } from "../atoms";
+import socket from "../socket";
+import { useCallback, useEffect, useRef } from "react";
 
 function TextEditor() {
   const setTextEditorFalse = useSetRecoilState(showTextEditor);
   const doc = useRecoilValue(docState);
   const text = useRecoilValue(textEditorInput);
   const [input, setInput] =  useRecoilState(textEditorInput)
+  const isRendering = useRef(false);
 
   function removeTextEditor() {
+    if (!isRendering.current) {
+      socket.emit("close-text-editor");
+    }
     setTextEditorFalse(false);
   }
 
+  const handleRemoveTextEditor = useCallback((rendering) => {
+    isRendering.current = rendering;
+    removeTextEditor();
+  }, []);
+
+  useEffect(() => {
+    socket.on("close-text-editor", () => {
+      handleRemoveTextEditor(true);
+    });
+
+    return () => {
+      socket.off("close-text-editor", handleRemoveTextEditor);
+    };
+  }, []);
+
   function handleChange(event) {
     setInput(event.target.value);
     if(!doc) return;