From 536c847375a406571a2d7f5fb3f708f4e80c4a6d Mon Sep 17 00:00:00 2001
From: Artemy <artegoser@gmail.com>
Date: Tue, 4 Apr 2023 20:10:41 +0300
Subject: [PATCH] feat: collaborative editing

---
 index.js               | 25 +++++++++++++++++
 src/App.jsx            |  2 --
 src/localisation/en.js |  3 ++
 src/localisation/ru.js |  3 ++
 src/pages/create.jsx   | 64 ++++++++++++++++++++++++++++++++++++++++++
 src/pages/settings.jsx | 11 ++++++++
 6 files changed, 106 insertions(+), 2 deletions(-)

diff --git a/index.js b/index.js
index d86e3c7..a93607d 100644
--- a/index.js
+++ b/index.js
@@ -17,6 +17,31 @@ if (!fs.existsSync("./notes")) {
   fs.mkdirSync("./notes");
 }
 
+io.on("connection", (socket) => {
+  socket.on("nameChanged", ({ name, room }) => {
+    socket.to(room).emit("nameChanged", {
+      name,
+    });
+  });
+
+  socket.on("textChanged", ({ text, room }) => {
+    socket.to(room).emit("textChanged", {
+      text,
+    });
+  });
+
+  socket.on("joinRoom", (room) => {
+    let rooms = Array.from(io.sockets.adapter.sids.get(socket.id));
+
+    for (let room of rooms) {
+      if (socket.id != room) {
+        socket.leave(room);
+      }
+    }
+    socket.join(room);
+  });
+});
+
 app.use(bodyParser.json());
 
 app.post("/publish", function (req, res) {
diff --git a/src/App.jsx b/src/App.jsx
index e690f0d..0c07476 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -12,7 +12,6 @@ import PubNoteSafe from "./pages/pubNoteSafe";
 import RenderMarkdown from "./components/markdown";
 import socket from "./components/socket";
 import Settings from "./pages/settings";
-import Chat from "./pages/chat";
 import Locales from "./localisation/main";
 import { useState } from "react";
 
@@ -55,7 +54,6 @@ function App() {
           <Route path="/pubNotesSafe/:id" element={<PubNoteSafe />} />
           <Route path="/pubError" element={<PubError />} />
           <Route path="/settings" element={<Settings />} />
-          <Route path="/chat" element={<Chat />} />
           <Route
             path="/about"
             element={
diff --git a/src/localisation/en.js b/src/localisation/en.js
index f09f431..04478f5 100644
--- a/src/localisation/en.js
+++ b/src/localisation/en.js
@@ -43,6 +43,9 @@ let en = {
   NoNotesYet: "No notes yet",
   AIComplete: "Continue Note (AI)",
   AdditionalFeatures: "Additional features",
+  CollabEdit: "Collaborative editing",
+  Password: "Password",
+  CollabEditPassword: "Password for collaborative editing",
 };
 
 export default en;
diff --git a/src/localisation/ru.js b/src/localisation/ru.js
index ebf2f00..907beda 100644
--- a/src/localisation/ru.js
+++ b/src/localisation/ru.js
@@ -44,6 +44,9 @@ let ru = {
   NoNotesYet: "Заметок пока нет",
   AIComplete: "Продолжить заметку (ИИ)",
   AdditionalFeatures: "Дополнительные функции",
+  CollabEdit: "Совместное редактрование",
+  Password: "Пароль",
+  CollabEditPassword: "Пароль для совместного редактирования",
 };
 
 export default ru;
diff --git a/src/pages/create.jsx b/src/pages/create.jsx
index 8d96051..cb9570c 100644
--- a/src/pages/create.jsx
+++ b/src/pages/create.jsx
@@ -22,6 +22,26 @@ import {
 import { inputStyle } from "../components/styles";
 import { Complete } from "../components/openai";
 
+function nameUpdate(e) {
+  if (Date.now() - window.lastSocketUpdate > window.socketTimeout) {
+    socket.emit("nameChanged", {
+      name: e.target.value,
+      room: settings.CollabEditPassword,
+    });
+    window.lastSocketUpdate = Date.now();
+  }
+}
+
+function textUpdate(e) {
+  if (Date.now() - window.lastSocketUpdate > window.socketTimeout) {
+    socket.emit("textChanged", {
+      text: e.target.value,
+      room: settings.CollabEditPassword,
+    });
+    window.lastSocketUpdate = Date.now();
+  }
+}
+
 function CreateNote() {
   const [preview, setPreview] = useState(false);
   const [publicState, setPublicState] = useState(settings.publicNote);
@@ -42,6 +62,32 @@ function CreateNote() {
     md = md.value.trim();
 
     localStorage.setItem("NoteText", md);
+
+    if (settings.CollabEdit === true) {
+      socket.emit("textChanged", {
+        text: md,
+        room: settings.CollabEditPassword,
+      });
+    }
+  }
+
+  if (settings.CollabEdit === true) {
+    if (!window.alreadyConnected) {
+      socket.emit("joinRoom", settings.CollabEditPassword);
+      window.alreadyConnected = true;
+      window.lastSocketUpdate = Date.now();
+      window.socketTimeout = 100;
+    }
+
+    socket.on("textChanged", (data) => {
+      setText(data.text);
+      localStorage.setItem("NoteText", data.text);
+    });
+
+    socket.on("nameChanged", (data) => {
+      setName(data.name);
+      localStorage.setItem("NoteName", data.name);
+    });
   }
 
   return (
@@ -73,6 +119,13 @@ function CreateNote() {
         onChange={(e) => {
           setName(e.target.value);
           localStorage.setItem("NoteName", e.target.value);
+
+          if (settings.CollabEdit === true) {
+            nameUpdate(e);
+            setTimeout(() => {
+              nameUpdate(e);
+            }, window.socketTimeout);
+          }
         }}
       />
       <textarea
@@ -87,6 +140,13 @@ function CreateNote() {
         onChange={(e) => {
           setText(e.target.value);
           localStorage.setItem("NoteText", e.target.value);
+
+          if (settings.CollabEdit === true) {
+            textUpdate(e);
+            setTimeout(() => {
+              textUpdate(e);
+            }, window.socketTimeout);
+          }
         }}
         value={localStorage.getItem("NoteText") || ""}
       ></textarea>
@@ -148,6 +208,10 @@ function CreateNote() {
                   }}
                 />
               )}
+              <SettingsCheckBox
+                label={locals.CollabEdit}
+                settingName="CollabEdit"
+              />
             </SettingsSection>
           </div>
         )}
diff --git a/src/pages/settings.jsx b/src/pages/settings.jsx
index 633f463..0d3a9ae 100644
--- a/src/pages/settings.jsx
+++ b/src/pages/settings.jsx
@@ -51,6 +51,17 @@ function Settings() {
           label={locals.AdditionalFeatures}
           settingName="additionalFeatures"
         />
+
+        <SettingsCheckBox label={locals.CollabEdit} settingName="CollabEdit" />
+
+        <SettingsTextInput
+          placeholder={locals.Password}
+          label={locals.CollabEditPassword}
+          settingName="CollabEditPassword"
+          onChange={(e) => {
+            window.alreadyConnected = false;
+          }}
+        />
       </SettingsSection>
 
       <SettingsSection name={locals.Interface}>