Send text to all the clients

Author: apsinghdev

api/index.js

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

client/src/App.jsx

@@ -1,8 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { useEffect, useRef, useState } from "react";
 import "./App.css";
-import * as Y from "yjs";
-import { SocketIOProvider } from "y-socket.io";
 import socket from "./socket";
 
 import Sidebar from "./components/Sidebar";
@@ -18,7 +16,6 @@ import {
   canvasState,
   showMenuState,
   showTextEditor,
-  docState,
   textEditorInput
 } from "./atoms";
 
@@ -35,46 +32,9 @@ function App() {
   const [penColor, setPenColor] = useState("#000000");
   const canvasColor = useRecoilValue(canvasColors);
   const [currentCanvas, setCanvas] = useRecoilState(canvasState);
-  const [doc, setDoc] = useRecoilState(docState);
-  const [provider, setProvider] = useState(null);
   const setTextEditorInput = useSetRecoilState(textEditorInput);
   const textEditor = useRecoilValue(showTextEditor);
 
-  useEffect(() => {
-    if (!doc) {
-      console.log("setting doc");
-      const _doc = new Y.Doc();
-      setDoc(_doc);
-    }
-  }, [doc]);
-  
-  useEffect(() => {
-    if (provider) {
-      const yText = doc.getText("text");
-      const observer = () => {
-        setTextEditorInput(yText.toString());
-      };
-      yText.observe(observer);
-      return () => {
-        yText.unobserve(observer);
-      };
-    }
-  }, [provider, doc]);
-
-  useEffect(() => {
-    if (doc && !provider) {
-      console.log("setting provider");
-      const socketioprovider = new SocketIOProvider(
-        "ws://localhost:8000",
-        "text-editor",
-        doc,
-        { autoConnect: true }
-      );
-      setProvider(socketioprovider);
-      socketioprovider.connect();
-    }
-  }, [doc, provider]);
-
 
   function toggleMenu() {
     setShowMenu(!showMenu);

client/src/atoms.js

@@ -30,11 +30,6 @@ export const showTextEditor = atom({
   default: false
 })
 
-export const docState = atom({
-  key: "docState",
-  default: null
-})
-
 
 export const textEditorInput = atom({
   key: "textEditorInput",

client/src/components/TextEditor.jsx

@@ -1,44 +1,48 @@
 import { useSetRecoilState, useRecoilValue, useRecoilState } from "recoil";
-import { showTextEditor, docState, textEditorInput } from "../atoms";
+import { showTextEditor, 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 text = useRecoilValue(textEditorInput);
   const [input, setInput] =  useRecoilState(textEditorInput)
   const isRendering = useRef(false);
 
   function removeTextEditor() {
+    setTextEditorFalse(false);
     if (!isRendering.current) {
       socket.emit("close-text-editor");
     }
-    setTextEditorFalse(false);
   }
 
   const handleRemoveTextEditor = useCallback((rendering) => {
     isRendering.current = rendering;
     removeTextEditor();
   }, []);
 
+  const handleTextEditorUpdate = useCallback((data) => {
+    setInput(data);
+  }, []);
+
   useEffect(() => {
     socket.on("close-text-editor", () => {
       handleRemoveTextEditor(true);
     });
 
+    socket.on("text-updated", data => {
+      handleTextEditorUpdate(data);
+    });
+
     return () => {
       socket.off("close-text-editor", handleRemoveTextEditor);
     };
   }, []);
 
   function handleChange(event) {
-    setInput(event.target.value);
-    if(!doc) return;
-    const newText = input;
-    const yText = doc.getText("text");
-    yText.delete(0, yText.length);
-    yText.insert(0, newText);
+    const value = event.target.value;
+    setInput(value); // this is asynchronous 
+    socket.emit("text-updated", value);
   }
 
   return (
@@ -58,7 +62,7 @@ function TextEditor() {
         className="w-96 h-80 border rounded absolute focus:outline-none focus:ring-0 focus:border-transparent rounded-b-2xl p-2"
         placeholder="E.g. Make a painting with trees..."
         onChange={handleChange}
-        value={text}
+        value={input}
       ></textarea>
     </div>
   );