From 6af0bfacb22c55aa92b688c1307109a2f1220d66 Mon Sep 17 00:00:00 2001 From: Artemy Date: Wed, 5 Apr 2023 14:23:32 +0300 Subject: [PATCH] feat: sync --- index.js | 12 +++++++++ src/components/checkbox.jsx | 6 ++--- src/components/openai.js | 6 ++++- src/components/settingsInputs.jsx | 20 ++++++++------- src/components/socket.js | 11 ++++++++ src/components/styles.js | 2 +- src/index.css | 2 +- src/localisation/en.js | 4 +++ src/localisation/ru.js | 4 +++ src/pages/create.jsx | 2 +- src/pages/settings.jsx | 42 ++++++++++++++++++++++++++++++- 11 files changed, 94 insertions(+), 17 deletions(-) diff --git a/index.js b/index.js index 0b5f708..9f1d85b 100644 --- a/index.js +++ b/index.js @@ -41,6 +41,18 @@ io.on("connection", (socket) => { socket.join(room); socket.to(room).emit("roomJoined"); }); + + socket.on("leaveRoom", () => { + for (let room of rooms) { + if (socket.id != room) { + socket.leave(room); + } + } + }); + + socket.on("broadcastSync", ({ data, room }) => { + socket.to(room).emit("broadcastSync", data); + }); }); app.use(bodyParser.json()); diff --git a/src/components/checkbox.jsx b/src/components/checkbox.jsx index ceef7c7..48af3d1 100644 --- a/src/components/checkbox.jsx +++ b/src/components/checkbox.jsx @@ -1,8 +1,8 @@ function CheckBox(props) { return ( -
+
); } +function setSetting(settingName, value) { + window.settings[settingName] = value; + localStorage.setObj("settings", window.settings); +} + function SettingsSelectInput({ label, className, @@ -64,9 +67,8 @@ function SettingsSelectInput({ className={`${inputStyle} ${settingsAddInput} m-2 ${className}`} defaultValue={window.settings[settingName]} onChange={(e) => { - window.settings[settingName] = e.target.value; - localStorage.setObj("settings", window.settings); - onChange && onChange(e); + !!settingName && setSetting(settingName, e.target.value); + !!onChange && onChange(e); }} > {options.map((option) => ( diff --git a/src/components/socket.js b/src/components/socket.js index 3e0f109..ce89f56 100644 --- a/src/components/socket.js +++ b/src/components/socket.js @@ -1,4 +1,5 @@ import { io } from "socket.io-client"; +import { reRenderPage } from "./utils"; const socket = io(); @@ -8,14 +9,24 @@ function onConnect() { function onDisconnect() { console.log("Socket disconnected, local mode only"); + window.alreadyConnected = false; } function onFooEvent() { console.log("bar"); } +function onSync({ settings, Notes, NoteText, NoteName }) { + localStorage.setItem("Notes", Notes); + localStorage.setItem("NoteText", NoteText); + localStorage.setItem("NoteName", NoteName); + localStorage.setItem("settings", settings); + reRenderPage(); +} + socket.on("connect", onConnect); socket.on("disconnect", onDisconnect); socket.on("foo", onFooEvent); +socket.on("broadcastSync", onSync); export default socket; diff --git a/src/components/styles.js b/src/components/styles.js index fd4e64a..4ca8574 100644 --- a/src/components/styles.js +++ b/src/components/styles.js @@ -1,5 +1,5 @@ let inputStyle = - "form-control block px-3 py-1.5 text-base font-normal text-gray-700 dark:text-white bg-white dark:bg-zinc-900 bg-clip-padding border border-solid border-gray-300 rounded-lg transition ease-in-out focus:border-blue-600 focus:outline-none"; + "block px-3 py-1.5 text-base font-normal text-gray-700 dark:text-white bg-white dark:bg-zinc-900 bg-clip-padding border border-solid border-gray-300 rounded-lg transition ease-in-out focus:border-blue-600 focus:outline-none"; let settingsAddInput = "w-full lg:w-1/4"; export { inputStyle, settingsAddInput }; diff --git a/src/index.css b/src/index.css index bf13651..09ae894 100644 --- a/src/index.css +++ b/src/index.css @@ -64,7 +64,7 @@ } .md table { - @apply w-1/2; + @apply w-full lg:w-1/2; border-style: hidden; } diff --git a/src/localisation/en.js b/src/localisation/en.js index 04478f5..446e141 100644 --- a/src/localisation/en.js +++ b/src/localisation/en.js @@ -45,7 +45,11 @@ let en = { AdditionalFeatures: "Additional features", CollabEdit: "Collaborative editing", Password: "Password", + SyncPassword: "Sync password", CollabEditPassword: "Password for collaborative editing", + BroadcastSync: "Getting notes, settings from another device", + SyncAll: "Send data to all devices", + Sync: "Sync", }; export default en; diff --git a/src/localisation/ru.js b/src/localisation/ru.js index 42d0ae8..4dde711 100644 --- a/src/localisation/ru.js +++ b/src/localisation/ru.js @@ -47,6 +47,10 @@ let ru = { CollabEdit: "Совместное редактирование", Password: "Пароль", CollabEditPassword: "Пароль для совместного редактирования", + SyncPassword: "Пароль для синхронизации", + BroadcastSync: "Получение заметок, настроек с другого устройства", + SyncAll: "Отправить данные", + Sync: "Синхронизация", }; export default ru; diff --git a/src/pages/create.jsx b/src/pages/create.jsx index 732cf03..956aa44 100644 --- a/src/pages/create.jsx +++ b/src/pages/create.jsx @@ -209,7 +209,7 @@ function CreateNote() { className="m-1" w="w-full" onClick={() => { - Complete(setText); + Complete(setText, textUpdate); }} /> )} diff --git a/src/pages/settings.jsx b/src/pages/settings.jsx index 0d3a9ae..bf84239 100644 --- a/src/pages/settings.jsx +++ b/src/pages/settings.jsx @@ -6,6 +6,8 @@ import { } from "../components/settingsInputs"; import { reRenderPage } from "../components/utils"; import Locales from "../localisation/main"; +import { ButtonWithIcon } from "../components/button"; +import { ChevronDoubleRightIcon } from "@heroicons/react/24/outline"; function Settings() { return ( @@ -58,12 +60,50 @@ function Settings() { placeholder={locals.Password} label={locals.CollabEditPassword} settingName="CollabEditPassword" - onChange={(e) => { + onChange={() => { window.alreadyConnected = false; }} /> + + { + if (e.target.checked) { + socket.emit("joinRoom", settings.syncPassword); + } else { + socket.emit("leaveRoom"); + } + }} + /> + + + + { + socket.emit("broadcastSync", { + data: { + settings: localStorage.getItem("settings"), + Notes: localStorage.getItem("Notes"), + NoteText: localStorage.getItem("NoteText"), + NoteName: localStorage.getItem("NoteName"), + }, + room: settings.syncPassword, + }); + }} + /> + +