added chat

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 (
+    <div className="mx-5 flex flex-col h-full">
+      <div className="h-full flex-1 overflow-y-auto" id="message-box">
+        {messages.map((m, i) => (
+          <div key={i}>{m}</div>
+        ))}
+      </div>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          if (message !== "") {
+            setMessages((prev) => [...prev, message]);
+            socket.emit("send-message", message);
+          }
+          setMessage("");
+        }}
+        className="flex"
+      >
+        <Input
+          onChange={(v) => setMessage(v)}
+          placeholder="Message"
+          value={message}
+          autoComplete="off"
+          className="me-2"
+        ></Input>
+        <Button icon={<IconSend />} htmlType="submit"></Button>
+      </form>
+    </div>
+  );
+}

src/components/issues.jsx

@@ -5,35 +5,33 @@ import { SettingsContext } from "../pages/editor";
 export default function Issues() {
   const { settings } = useContext(SettingsContext);
   return (
-    <div>
-      <Collapse style={{ width: "100%" }}>
-        <Collapse.Panel
-          header={
-            <div>
-              <i className="fa-solid fa-triangle-exclamation me-1 text-yellow-500"></i>{" "}
-              Issues
-            </div>
-          }
-          itemKey="1"
-        >
-          <div className="max-h-[160px] overflow-y-auto">
-            {settings.strictMode ? (
-              <div className="mb-1">
-                Strict mode is off so no issues will be displayed.
-              </div>
-            ) : (
-              <div>
-                <div className="py-2">Issue 1</div>
-                <div className="py-2">Issue 2</div>
-                <div className="py-2">Issue 3</div>
-                <div className="py-2">Issue 4</div>
-                <div className="py-2">Issue 5</div>
-                <div className="py-2">Issue 6</div>
-              </div>
-            )}
+    <Collapse style={{ width: "100%" }}>
+      <Collapse.Panel
+        header={
+          <div>
+            <i className="fa-solid fa-triangle-exclamation me-1 text-yellow-500"></i>{" "}
+            Issues
           </div>
-        </Collapse.Panel>
-      </Collapse>
-    </div>
+        }
+        itemKey="1"
+      >
+        <div className="max-h-[160px] overflow-y-auto">
+          {settings.strictMode ? (
+            <div className="mb-1">
+              Strict mode is off so no issues will be displayed.
+            </div>
+          ) : (
+            <div>
+              <div className="py-2">Issue 1</div>
+              <div className="py-2">Issue 2</div>
+              <div className="py-2">Issue 3</div>
+              <div className="py-2">Issue 4</div>
+              <div className="py-2">Issue 5</div>
+              <div className="py-2">Issue 6</div>
+            </div>
+          )}
+        </div>
+      </Collapse.Panel>
+    </Collapse>
   );
 }

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 <Todo />;
+      case SidesheetType.CHAT:
+        return <Chat />;
       default:
         break;
     }
@@ -117,8 +120,10 @@ export default function Sidebar() {
       return (
         <List>
           {[...undoStack].reverse().map((e) => (
-            <List.Item style={{ padding: "4px 18px 4px 18px" }}
-            className="hover:bg-slate-100">
+            <List.Item
+              style={{ padding: "4px 18px 4px 18px" }}
+              className="hover:bg-slate-100"
+            >
               <div className="flex items-center py-1 w-full">
                 <i className="block fa-regular fa-circle fa-xs"></i>
                 <div className="ms-2">{e.message}</div>

src/components/todo.jsx

@@ -104,6 +104,7 @@ export default function Todo() {
             <Dropdown.Menu>
               {Object.values(SortOrder).map((order) => (
                 <Dropdown.Item
+                  key={order}
                   onClick={() => {
                     setSortOrder(order);
                     sort(order);

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,
+});

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) {
                             />
                           )}
                           <Canvas />
-                          {layout.services && <Sidebar />}
+                          {layout.services && (
+                            <MessageContext.Provider
+                              value={{ messages, setMessages }}
+                            >
+                              <Sidebar />
+                            </MessageContext.Provider>
+                          )}
                         </div>
                       </div>
                     </TaskContext.Provider>