From 274c434206b4676f350ce2a542ee723e76a376ca Mon Sep 17 00:00:00 2001 From: 1ilit Date: Tue, 19 Sep 2023 15:50:57 +0300 Subject: [PATCH] added chat --- package-lock.json | 129 +++++++++++++++++++++++++++++-------- package.json | 2 + src/components/chat.jsx | 40 ++++++++++++ src/components/issues.jsx | 56 ++++++++-------- src/components/sidebar.jsx | 9 ++- src/components/todo.jsx | 1 + src/data/socket.js | 7 ++ src/pages/editor.jsx | 24 ++++++- 8 files changed, 209 insertions(+), 59 deletions(-) create mode 100644 src/components/chat.jsx create mode 100644 src/data/socket.js diff --git a/package-lock.json b/package-lock.json index fa64837..119f37d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,6 @@ "name": "frontend", "version": "0.1.0", "dependencies": { - "@dbml/core": "^2.5.4", "@douyinfe/semi-ui": "^2.36.0", "@monaco-editor/react": "^4.5.1", "@testing-library/jest-dom": "^5.16.5", @@ -24,10 +23,12 @@ "react-hotkeys-hook": "^4.4.1", "react-router-dom": "^6.11.2", "react-scripts": "5.0.1", + "socket.io-client": "^4.7.2", "url": "^0.11.1", "web-vitals": "^2.1.4" }, "devDependencies": { + "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "tailwindcss": "^3.3.2" } }, @@ -724,9 +725,16 @@ } }, "node_modules/@babel/plugin-proposal-private-property-in-object": { - "version": "7.21.0-placeholder-for-preset-env.2", - "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz", - "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==", + "version": "7.21.11", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.11.tgz", + "integrity": "sha512-0QZ8qP/3RLDVBwBFoWAwCtgcDZJVwA5LUJRZU8x2YFfKNuFq161wK3cuGrALu5yiPu+vzwTAg/sMWVNeWeNyaw==", + "dev": true, + "dependencies": { + "@babel/helper-annotate-as-pure": "^7.18.6", + "@babel/helper-create-class-features-plugin": "^7.21.0", + "@babel/helper-plugin-utils": "^7.20.2", + "@babel/plugin-syntax-private-property-in-object": "^7.14.5" + }, "engines": { "node": ">=6.9.0" }, @@ -1984,6 +1992,17 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/preset-env/node_modules/@babel/plugin-proposal-private-property-in-object": { + "version": "7.21.0-placeholder-for-preset-env.2", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz", + "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==", + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, "node_modules/@babel/preset-env/node_modules/semver": { "version": "6.3.0", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", @@ -2393,16 +2412,6 @@ "postcss-selector-parser": "^6.0.10" } }, - "node_modules/@dbml/core": { - "version": "2.5.4", - "resolved": "https://registry.npmjs.org/@dbml/core/-/core-2.5.4.tgz", - "integrity": "sha512-bfLb59z6pExD64eFUZTiRQfVW853v+vsfQd1bOKAZm4fHozGYVyQnM5WI4AahkAy+Jwm9NKr/b0wmrT/Hyft1w==", - "dependencies": { - "lodash": "^4.17.15", - "parsimmon": "^1.13.0", - "pluralize": "^8.0.0" - } - }, "node_modules/@douyinfe/semi-animation": { "version": "2.37.0", "resolved": "https://registry.npmjs.org/@douyinfe/semi-animation/-/semi-animation-2.37.0.tgz", @@ -3859,6 +3868,11 @@ "@sinonjs/commons": "^1.7.0" } }, + "node_modules/@socket.io/component-emitter": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz", + "integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==" + }, "node_modules/@surma/rollup-plugin-off-main-thread": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz", @@ -7300,6 +7314,46 @@ "node": ">= 0.8" } }, + "node_modules/engine.io-client": { + "version": "6.5.2", + "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.5.2.tgz", + "integrity": "sha512-CQZqbrpEYnrpGqC07a9dJDz4gePZUgTPMU3NKJPSeQOyw27Tst4Pl3FemKoFGAlHzgZmKjoRmiJvbWfhCXUlIg==", + "dependencies": { + "@socket.io/component-emitter": "~3.1.0", + "debug": "~4.3.1", + "engine.io-parser": "~5.2.1", + "ws": "~8.11.0", + "xmlhttprequest-ssl": "~2.0.0" + } + }, + "node_modules/engine.io-client/node_modules/ws": { + "version": "8.11.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz", + "integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==", + "engines": { + "node": ">=10.0.0" + }, + "peerDependencies": { + "bufferutil": "^4.0.1", + "utf-8-validate": "^5.0.2" + }, + "peerDependenciesMeta": { + "bufferutil": { + "optional": true + }, + "utf-8-validate": { + "optional": true + } + } + }, + "node_modules/engine.io-parser": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.1.tgz", + "integrity": "sha512-9JktcM3u18nU9N2Lz3bWeBgxVgOKpw7yhRaoxQA3FUDZzzw+9WlA6p4G4u0RixNkg14fH7EfEc/RhpurtiROTQ==", + "engines": { + "node": ">=10.0.0" + } + }, "node_modules/enhanced-resolve": { "version": "5.15.0", "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz", @@ -13221,11 +13275,6 @@ "node": ">= 0.8" } }, - "node_modules/parsimmon": { - "version": "1.18.1", - "resolved": "https://registry.npmjs.org/parsimmon/-/parsimmon-1.18.1.tgz", - "integrity": "sha512-u7p959wLfGAhJpSDJVYXoyMCXWYwHia78HhRBWqk7AIbxdmlrfdp5wX0l3xv/iTSH5HvhN9K7o26hwwpgS5Nmw==" - }, "node_modules/pascal-case": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz", @@ -13440,14 +13489,6 @@ "node": ">=4" } }, - "node_modules/pluralize": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-8.0.0.tgz", - "integrity": "sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==", - "engines": { - "node": ">=4" - } - }, "node_modules/postcss": { "version": "8.4.24", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz", @@ -15901,6 +15942,32 @@ "node": ">=8" } }, + "node_modules/socket.io-client": { + "version": "4.7.2", + "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.7.2.tgz", + "integrity": "sha512-vtA0uD4ibrYD793SOIAwlo8cj6haOeMHrGvwPxJsxH7CeIksqJ+3Zc06RvWTIFgiSqx4A3sOnTXpfAEE2Zyz6w==", + "dependencies": { + "@socket.io/component-emitter": "~3.1.0", + "debug": "~4.3.2", + "engine.io-client": "~6.5.2", + "socket.io-parser": "~4.2.4" + }, + "engines": { + "node": ">=10.0.0" + } + }, + "node_modules/socket.io-parser": { + "version": "4.2.4", + "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz", + "integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==", + "dependencies": { + "@socket.io/component-emitter": "~3.1.0", + "debug": "~4.3.1" + }, + "engines": { + "node": ">=10.0.0" + } + }, "node_modules/sockjs": { "version": "0.3.24", "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz", @@ -17989,6 +18056,14 @@ "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz", "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==" }, + "node_modules/xmlhttprequest-ssl": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz", + "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==", + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/y18n": { "version": "5.0.8", "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", diff --git a/package.json b/package.json index f169771..a055cf6 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "react-hotkeys-hook": "^4.4.1", "react-router-dom": "^6.11.2", "react-scripts": "5.0.1", + "socket.io-client": "^4.7.2", "url": "^0.11.1", "web-vitals": "^2.1.4" }, @@ -46,6 +47,7 @@ ] }, "devDependencies": { + "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "tailwindcss": "^3.3.2" } } diff --git a/src/components/chat.jsx b/src/components/chat.jsx new file mode 100644 index 0000000..158960d --- /dev/null +++ b/src/components/chat.jsx @@ -0,0 +1,40 @@ +import React, { useContext, useState } from "react"; +import { Button, Input } from "@douyinfe/semi-ui"; +import { IconSend } from "@douyinfe/semi-icons"; +import { socket } from "../data/socket"; +import { MessageContext } from "../pages/editor"; + +export default function Chat() { + const [message, setMessage] = useState(""); + const { messages, setMessages } = useContext(MessageContext); + + return ( +
+
+ {messages.map((m, i) => ( +
{m}
+ ))} +
+
{ + e.preventDefault(); + if (message !== "") { + setMessages((prev) => [...prev, message]); + socket.emit("send-message", message); + } + setMessage(""); + }} + className="flex" + > + setMessage(v)} + placeholder="Message" + value={message} + autoComplete="off" + className="me-2" + > + +
+
+ ); +} diff --git a/src/components/issues.jsx b/src/components/issues.jsx index c56f862..e76fddf 100644 --- a/src/components/issues.jsx +++ b/src/components/issues.jsx @@ -5,35 +5,33 @@ import { SettingsContext } from "../pages/editor"; export default function Issues() { const { settings } = useContext(SettingsContext); return ( -
- - - {" "} - Issues -
- } - itemKey="1" - > -
- {settings.strictMode ? ( -
- Strict mode is off so no issues will be displayed. -
- ) : ( -
-
Issue 1
-
Issue 2
-
Issue 3
-
Issue 4
-
Issue 5
-
Issue 6
-
- )} + + + {" "} + Issues
- - - + } + itemKey="1" + > +
+ {settings.strictMode ? ( +
+ Strict mode is off so no issues will be displayed. +
+ ) : ( +
+
Issue 1
+
Issue 2
+
Issue 3
+
Issue 4
+
Issue 5
+
Issue 6
+
+ )} +
+ + ); } diff --git a/src/components/sidebar.jsx b/src/components/sidebar.jsx index f37de2f..1c9f191 100644 --- a/src/components/sidebar.jsx +++ b/src/components/sidebar.jsx @@ -7,6 +7,7 @@ import todo from "../assets/calendar.png"; import { Tooltip, SideSheet, List } from "@douyinfe/semi-ui"; import { UndoRedoContext } from "../pages/editor"; import Todo from "./todo"; +import Chat from "./chat"; export default function Sidebar() { const SidesheetType = { @@ -54,6 +55,8 @@ export default function Sidebar() { return renderTimeline(); case SidesheetType.TODO: return ; + case SidesheetType.CHAT: + return ; default: break; } @@ -117,8 +120,10 @@ export default function Sidebar() { return ( {[...undoStack].reverse().map((e) => ( - +
{e.message}
diff --git a/src/components/todo.jsx b/src/components/todo.jsx index 2eef13c..f1d620f 100644 --- a/src/components/todo.jsx +++ b/src/components/todo.jsx @@ -104,6 +104,7 @@ export default function Todo() { {Object.values(SortOrder).map((order) => ( { setSortOrder(order); sort(order); diff --git a/src/data/socket.js b/src/data/socket.js new file mode 100644 index 0000000..d2dc753 --- /dev/null +++ b/src/data/socket.js @@ -0,0 +1,7 @@ +import { io } from "socket.io-client"; + +const URL = "http://localhost:5000"; + +export const socket = io(URL, { + autoConnect: false, +}); diff --git a/src/pages/editor.jsx b/src/pages/editor.jsx index 4bd5bde..5eadaad 100644 --- a/src/pages/editor.jsx +++ b/src/pages/editor.jsx @@ -10,6 +10,7 @@ import { Action, ObjectType, } from "../data/data"; +import { socket } from "../data/socket"; export const LayoutContext = createContext(); export const TableContext = createContext(); @@ -20,6 +21,7 @@ export const SettingsContext = createContext(); export const UndoRedoContext = createContext(); export const SelectContext = createContext(); export const TaskContext = createContext(); +export const MessageContext = createContext(); export default function Editor(props) { const [tables, setTables] = useState([]); @@ -49,6 +51,7 @@ export default function Editor(props) { showGrid: true, }); const [tasks, setTasks] = useState([]); + const [messages, setMessages] = useState([]); const [undoStack, setUndoStack] = useState([]); const [redoStack, setRedoStack] = useState([]); const [selectedElement, setSelectedElement] = useState({ @@ -395,6 +398,19 @@ export default function Editor(props) { useEffect(() => { document.title = "Editor - drawDB"; + + socket.connect(); + + const onConnect = () => console.log(`You connected with id: ${socket.id}`); + const onRecieve = (value) => setMessages((prev) => [...prev, value]); + + socket.on("connect", onConnect); + socket.on("recieve-message", onRecieve); + + return () => { + socket.off("connect", onConnect); + socket.off("recieve-message", onRecieve); + }; }, []); return ( @@ -449,7 +465,13 @@ export default function Editor(props) { /> )} - {layout.services && } + {layout.services && ( + + + + )}