Merge pull request #2 from drawdb-io/mvp

Mvp

src/components/ControlPanel.jsx

@@ -64,7 +64,6 @@ import { areaSchema, noteSchema, tableSchema } from "../data/schemas";
 import { Editor } from "@monaco-editor/react";
 import { db } from "../data/db";
 import { useLiveQuery } from "dexie-react-hooks";
-import { socket } from "../data/socket";
 import Todo from "./Todo";
 
 export default function ControlPanel({
@@ -135,7 +134,7 @@ export default function ControlPanel({
     useContext(NoteContext);
   const { areas, setAreas, updateArea, addArea, deleteArea } =
     useContext(AreaContext);
-  const { undoStack, redoStack, setUndoStack, setRedoStack, setHistoryCount } =
+  const { undoStack, redoStack, setUndoStack, setRedoStack } =
     useContext(UndoRedoContext);
   const { selectedElement, setSelectedElement } = useContext(SelectContext);
   const { tab, setTab } = useContext(TabContext);
@@ -161,10 +160,7 @@ export default function ControlPanel({
 
   const undo = () => {
     if (undoStack.length === 0) return;
-    setHistoryCount(undoStack.length)
     const a = undoStack[undoStack.length - 1];
-    if (socket && a)
-      socket.emit("send-reversed-changes", a);
     setUndoStack(prev => prev.filter((e, i) => i !== prev.length - 1));
     if (a.action === Action.ADD) {
       if (a.element === ObjectType.TABLE) {
@@ -514,7 +510,6 @@ export default function ControlPanel({
       }));
       setUndoStack((prev) => [...prev, a]);
     }
-    setHistoryCount(undoStack.length)
   };
 
   const fileImport = () => setVisible(MODAL.IMPORT);
@@ -977,38 +972,7 @@ export default function ControlPanel({
         ],
         function: () => { },
       },
-      Settings: {
+
-        children: [
-          {
-            Autosave: () =>
-              setSettings((prev) => {
-                Toast.success(
-                  `Autosave is ${settings.autosave ? "off" : "on"}`
-                );
-                return { ...prev, autosave: !prev.autosave };
-              }),
-          },
-          {
-            Panning: () =>
-              setSettings((prev) => {
-                Toast.success(`Panning is ${settings.panning ? "off" : "on"}`);
-                return { ...prev, panning: !prev.panning };
-              }),
-          },
-          {
-            "Flush storage": async () => {
-              db.delete()
-                .then(() => {
-                  Toast.success("Storage flushed");
-                  window.location.reload(false);
-                })
-                .catch(() => {
-                  Toast.error("Oops! Something went wrong.");
-                });
-            },
-          },
-        ],
-      },
       Exit: {
         function: () => { },
       },
@@ -1134,6 +1098,30 @@ export default function ControlPanel({
         function: enterFullscreen,
       },
     },
+    Settings: {
+      Autosave: () =>
+        setSettings((prev) => {
+          Toast.success(
+            `Autosave is ${settings.autosave ? "off" : "on"}`
+          );
+          return { ...prev, autosave: !prev.autosave };
+        }),
+      Panning: () =>
+        setSettings((prev) => {
+          Toast.success(`Panning is ${settings.panning ? "off" : "on"}`);
+          return { ...prev, panning: !prev.panning };
+        }),
+      "Flush storage": async () => {
+        db.delete()
+          .then(() => {
+            Toast.success("Storage flushed");
+            window.location.reload(false);
+          })
+          .catch(() => {
+            Toast.error("Oops! Something went wrong.");
+          });
+      },
+    },
     Help: {
       Shortcuts: {
         function: () => window.open("/shortcuts", "_blank"),
@@ -1142,9 +1130,6 @@ export default function ControlPanel({
       "Ask us on discord": {
         function: () => { },
       },
-      "Tweet us": {
-        function: () => { },
-      },
       "Report a bug": {
         function: () => window.open("/bug_report", "_blank"),
       },

src/pages/editor.jsx

@@ -1,5 +1,4 @@
 import { useState, createContext, useEffect } from "react";
-
 import ControlPanel from "../components/ControlPanel";
 import Canvas from "../components/Canvas";
 import SidePanel from "../components/SidePanel";
@@ -7,15 +6,11 @@ import {
   Tab,
   defaultTableTheme,
   defaultNoteTheme,
-  // avatarThemes,
   Action,
   ObjectType,
   State,
 } from "../data/data";
-import { socket } from "../data/socket";
 import { db } from "../data/db";
-// import { flipAction } from "../utils";
-// import { uniqueNamesGenerator, colors, animals } from "unique-names-generator";
 
 export const LayoutContext = createContext();
 export const TableContext = createContext();
@@ -69,7 +64,6 @@ export default function Editor() {
   const [tasks, setTasks] = useState([]);
   const [undoStack, setUndoStack] = useState([]);
   const [redoStack, setRedoStack] = useState([]);
-  const [historyCount, setHistoryCount] = useState(0);
   const [selectedElement, setSelectedElement] = useState({
     element: ObjectType.NONE,
     id: -1,
@@ -551,14 +545,6 @@ export default function Editor() {
     save(diagram);
   }, [tables, relationships, notes, areas, types, title, id, state]);
 
-  useEffect(() => {
-    if (socket) {
-      if (historyCount < undoStack.length) {
-        socket.emit("send-changes", undoStack[undoStack.length - 1]);
-      }
-    }
-  }, [undoStack, historyCount]);
-
   useEffect(() => {
     document.title = "Editor | drawDB";
 
@@ -668,480 +654,6 @@ export default function Editor() {
         body.setAttribute("theme-mode", "light");
       }
     }
-
-    socket.connect();
-
-    // const onConnect = () => {
-    //   const name = uniqueNamesGenerator({
-    //     dictionaries: [colors, animals],
-    //     separator: " ",
-    //     style: "capital",
-    //   });
-    //   const color =
-    //     avatarThemes[Math.floor(Math.random() * avatarThemes.length)];
-    //   socket.emit("new-user", name, color);
-    //   setMessages((prev) => [
-    //     ...prev,
-    //     { message: `You joined as ${name}`, type: "note", action: "join" },
-    //   ]);
-    // };
-    // const onRecieve = (value) =>
-    //   setMessages((prev) => [{ ...value, type: "message" }, ...prev]);
-    // const onUserConnected = (name) =>
-    //   setMessages((prev) => [
-    //     { message: `${name} just joined`, type: "note", action: "join" },
-    //     ...prev,
-    //   ]);
-    // const onUserDisconnected = (name) =>
-    //   setMessages((prev) => [
-    //     { message: `${name} left`, type: "note", action: "leave" },
-    //     ...prev,
-    //   ]);
-
-    // socket.on("connect", onConnect);
-    // socket.on("recieve-message", onRecieve);
-    // socket.on("user-connected", onUserConnected);
-    // socket.on("user-disconnected", onUserDisconnected);
-
-    const applyChange = (delta) => {
-      // console.log("apply: ", delta)
-      if (!delta) return;
-      if (delta.action === Action.ADD) {
-        switch (delta.element) {
-          case ObjectType.TABLE:
-            addTable(false);
-            return;
-          case ObjectType.AREA:
-            addArea(false);
-            return;
-          case ObjectType.NOTE:
-            addNote(false);
-            return;
-          case ObjectType.RELATIONSHIP:
-            addRelationship(false, delta.data);
-            return;
-          case ObjectType.TYPE:
-            addType(false);
-            return;
-        }
-      } else if (delta.action === Action.MOVE) {
-        switch (delta.element) {
-          case ObjectType.TABLE:
-            updateTable(delta.id, { x: delta.toX, y: delta.toY }, true);
-            return;
-          case ObjectType.AREA:
-            updateArea(delta.id, { x: delta.toX, y: delta.toY });
-            return;
-          case ObjectType.NOTE:
-            updateNote(delta.id, { x: delta.toX, y: delta.toY });
-            return;
-        }
-      } else if (delta.action === Action.DELETE) {
-        switch (delta.element) {
-          case ObjectType.TABLE:
-            deleteTable(delta.data.id, false);
-            return;
-          case ObjectType.RELATIONSHIP:
-            deleteRelationship(delta.data.id, false);
-            return;
-          case ObjectType.AREA:
-            deleteArea(delta.data.id, false);
-            return;
-          case ObjectType.NOTE:
-            deleteNote(delta.data.id, false);
-            return;
-          case ObjectType.TYPE:
-            deleteType(delta.id, false);
-            return;
-        }
-      } else if (delta.action === Action.EDIT) {
-        switch (delta.element) {
-          case ObjectType.AREA:
-            updateArea(delta.aid, delta.redo);
-            return;
-          case ObjectType.RELATIONSHIP:
-            setRelationships((prev) =>
-              prev.map((e, idx) =>
-                idx === delta.rid ? { ...e, ...delta.redo } : e
-              )
-            );
-            return;
-          case ObjectType.NOTE:
-            updateNote(delta.nid, delta.redo);
-            return;
-          case ObjectType.TABLE:
-            if (delta.component === "field") {
-              updateField(delta.tid, delta.fid, delta.redo);
-            } else if (delta.component === "field_delete") {
-              setTables((prev) =>
-                prev.map((t) => {
-                  if (t.id === delta.tid) {
-                    setRelationships((prev) => {
-                      return prev.map((e) => {
-                        if (
-                          e.startTableId === delta.tid &&
-                          e.startFieldId > delta.data.id
-                        ) {
-                          return {
-                            ...e,
-                            startFieldId: e.startFieldId - 1,
-                            startX: t.x + 15,
-                            startY: t.y + (e.startFieldId - 1) * 36 + 50 + 19,
-                          };
-                        }
-                        if (
-                          e.endTableId === delta.tid &&
-                          e.endFieldId > delta.data.id
-                        ) {
-                          return {
-                            ...e,
-                            endFieldId: e.endFieldId - 1,
-                            endX: t.x + 15,
-                            endY: t.y + (e.endFieldId - 1) * 36 + 50 + 19,
-                          };
-                        }
-                        return e;
-                      });
-                    });
-                    return {
-                      ...t,
-                      fields: t.fields
-                        .filter((field) => field.id !== delta.data.id)
-                        .map((e, i) => ({ ...e, id: i })),
-                    };
-                  }
-                  return t;
-                })
-              );
-            } else if (delta.component === "field_add") {
-              setTables((prev) =>
-                prev.map((t) => {
-                  if (t.id === delta.tid) {
-                    return {
-                      ...t,
-                      fields: [
-                        ...t.fields,
-                        {
-                          name: "",
-                          type: "",
-                          default: "",
-                          check: "",
-                          primary: false,
-                          unique: false,
-                          notNull: false,
-                          increment: false,
-                          comment: "",
-                          id: t.fields.length,
-                        },
-                      ],
-                    };
-                  }
-                  return t;
-                })
-              );
-            } else if (delta.component === "index_add") {
-              setTables((prev) =>
-                prev.map((table) => {
-                  if (table.id === delta.tid) {
-                    return {
-                      ...table,
-                      indices: [
-                        ...table.indices,
-                        {
-                          id: table.indices.length,
-                          name: `index_${table.indices.length}`,
-                          fields: [],
-                        },
-                      ],
-                    };
-                  }
-                  return table;
-                })
-              );
-            } else if (delta.component === "index") {
-              setTables((prev) =>
-                prev.map((t) => {
-                  if (t.id === delta.tid) {
-                    return {
-                      ...t,
-                      indices: t.indices.map((index) =>
-                        index.id === delta.iid
-                          ? {
-                            ...index,
-                            ...delta.redo,
-                          }
-                          : index
-                      ),
-                    };
-                  }
-                  return t;
-                })
-              );
-            } else if (delta.component === "index_delete") {
-              setTables((prev) =>
-                prev.map((t) => {
-                  if (t.id === delta.tid) {
-                    return {
-                      ...t,
-                      indices: t.indices
-                        .filter((e) => e.id !== delta.data.id)
-                        .map((x, i) => ({ ...x, id: i })),
-                    };
-                  }
-                  return t;
-                })
-              );
-            } else if (delta.component === "self") {
-              updateTable(delta.tid, delta.redo, false);
-            }
-            return;
-          case ObjectType.TYPE:
-            if (delta.component === "field") {
-              setTypes((prev) =>
-                prev.map((t, i) => {
-                  if (i === delta.tid) {
-                    return {
-                      ...t,
-                      fields: t.fields.map((e, j) =>
-                        j === delta.fid ? { ...e, ...delta.redo } : e
-                      ),
-                    };
-                  }
-                  return t;
-                })
-              );
-            } else if (delta.component === "field_add") {
-              setTypes((prev) =>
-                prev.map((t, i) => {
-                  if (i === delta.tid) {
-                    return {
-                      ...t,
-                      fields: [...t.fields, { name: "", type: "" }],
-                    };
-                  }
-                  return t;
-                })
-              );
-            } else if (delta.component === "field_delete") {
-              setTypes((prev) =>
-                prev.map((t, i) => {
-                  if (i === delta.tid) {
-                    return {
-                      ...t,
-                      fields: t.fields.filter((field, j) => j !== delta.fid),
-                    };
-                  }
-                  return t;
-                })
-              );
-            } else if (delta.component === "self") {
-              updateType(delta.tid, delta.redo);
-            }
-            return;
-        }
-      }
-    };
-
-    const reverseChange = (delta) => {
-      // console.log("reverse: ", delta);
-      if (delta.action === Action.ADD) {
-        switch (delta.element) {
-          case ObjectType.TABLE:
-            setTables(prev => prev.filter((e, i) => i !== prev.length - 1));
-            return;
-          case ObjectType.RELATIONSHIP:
-            setRelationships(prev => prev.filter((e, i) => i !== prev.length - 1));
-            return;
-          case ObjectType.AREA:
-            setAreas(prev => prev.filter((e, i) => i !== prev.length - 1));
-            return;
-          case ObjectType.NOTE:
-            setNotes(prev => prev.filter((e, i) => i !== prev.length - 1));
-            return;
-          case ObjectType.TYPE:
-            setTypes(prev => prev.filter((e, i) => i !== prev.length - 1));
-            return;
-        }
-      } else if (delta.action === Action.MOVE) {
-        switch (delta.element) {
-          case ObjectType.TABLE:
-            updateTable(delta.id, { x: delta.x, y: delta.y }, true);
-            return;
-          case ObjectType.AREA:
-            updateArea(delta.id, { x: delta.x, y: delta.y });
-            return;
-          case ObjectType.NOTE:
-            updateNote(delta.id, { x: delta.x, y: delta.y });
-            return;
-        }
-      } else if (delta.action === Action.DELETE) {
-        switch (delta.element) {
-          case ObjectType.TABLE:
-            addTable(false, delta.data);
-            return;
-          case ObjectType.AREA:
-            addArea(false, delta.data);
-            return;
-          case ObjectType.NOTE:
-            addNote(false, delta.data);
-            return;
-          case ObjectType.RELATIONSHIP:
-            addRelationship(false, delta.data);
-            return;
-          case ObjectType.TYPE:
-            addType(false, delta.data);
-            return;
-        }
-      } else if (delta.action === Action.EDIT) {
-        switch (delta.element) {
-          case ObjectType.AREA:
-            updateArea(delta.aid, delta.undo);
-            return;
-          case ObjectType.RELATIONSHIP:
-            setRelationships((prev) =>
-              prev.map((e, idx) =>
-                idx === delta.rid ? { ...e, ...delta.undo } : e
-              )
-            );
-            return;
-          case ObjectType.NOTE:
-            updateNote(delta.nid, delta.undo);
-            return;
-          case ObjectType.TABLE:
-            if (delta.component === "field") {
-              updateField(delta.tid, delta.fid, delta.undo);
-            } else if (delta.component === "field_delete") {
-              setTables((prev) =>
-                prev.map((t) => {
-                  if (t.id === delta.tid) {
-                    const temp = t.fields.slice();
-                    temp.splice(delta.data.id, 0, delta.data);
-                    return { ...t, fields: temp.map((t, i) => ({ ...t, id: i })) };
-                  }
-                  return t;
-                })
-              );
-            } else if (delta.component === "field_add") {
-              setTables((prev) =>
-                prev.map((t) => {
-                  if (t.id === delta.tid) {
-                    return {
-                      ...t,
-                      fields: t.fields.filter((f) => f.id !== t.fields.length - 1).map((f, i) => ({ ...f, id: i })),
-                    };
-                  }
-                  return t;
-                })
-              );
-            } else if (delta.component === "index_add") {
-              setTables((prev) =>
-                prev.map((t) => {
-                  if (t.id === delta.tid) {
-                    return {
-                      ...t,
-                      indices: t.indices.filter((f) => f.id !== t.indices.length - 1).map((f, i) => ({ ...f, id: i })),
-                    };
-                  }
-                  return t;
-                })
-              );
-            } else if (delta.component === "index") {
-              setTables((prev) =>
-                prev.map((t) => {
-                  if (t.id === delta.tid) {
-                    return {
-                      ...t,
-                      indices: t.indices.map((index) =>
-                        index.id === delta.iid
-                          ? {
-                            ...index,
-                            ...delta.undo,
-                          }
-                          : index
-                      ),
-                    };
-                  }
-                  return t;
-                })
-              );
-            } else if (delta.component === "index_delete") {
-              setTables((prev) =>
-                prev.map((table) => {
-                  if (table.id === delta.tid) {
-                    const temp = table.indices.slice();
-                    temp.splice(delta.data.id, 0, delta.data);
-                    return {
-                      ...table,
-                      indices: temp.map((t, i) => ({ ...t, id: i })),
-                    };
-                  }
-                  return table;
-                })
-              );
-            } else if (delta.component === "self") {
-              updateTable(delta.tid, delta.undo, false);
-            }
-            return;
-          case ObjectType.TYPE:
-            if (delta.component === "field") {
-              setTypes((prev) =>
-                prev.map((t, i) => {
-                  if (i === delta.tid) {
-                    return {
-                      ...t,
-                      fields: t.fields.map((e, j) =>
-                        j === delta.fid ? { ...e, ...delta.undo } : e
-                      ),
-                    };
-                  }
-                  return t;
-                })
-              );
-            } else if (delta.component === "field_add") {
-              setTypes((prev) =>
-                prev.map((t, i) => {
-                  if (i === delta.tid) {
-                    return {
-                      ...t,
-                      fields: t.fields.filter(
-                        (e, i) => i !== t.fields.length - 1
-                      ),
-                    };
-                  }
-                  return t;
-                })
-              );
-            } else if (delta.component === "field_delete") {
-              setTypes((prev) =>
-                prev.map((t, i) => {
-                  if (i === delta.tid) {
-                    const temp = t.fields.slice();
-                    temp.splice(delta.fid, 0, delta.data);
-                    return { ...t, fields: temp };
-                  }
-                  return t;
-                })
-              );
-            } else if (delta.component === "self") {
-              updateType(delta.tid, delta.undo);
-            }
-            return;
-        }
-      }
-    };
-
-    socket.on("recieve-changes", (delta) => applyChange(delta));
-    socket.on("recieve-reversed-changes", (delta) => reverseChange(delta));
-    return () => {
-      // socket.off("connect", onConnect);
-      // socket.off("recieve-message", onRecieve);
-      // socket.off("user-connected", onUserConnected);
-      // socket.off("user-disconnected", onUserDisconnected);
-      socket.off("recieve-reversed-changes", reverseChange);
-      socket.off("recieve-changes", applyChange);
-      socket.disconnect();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
@@ -1169,7 +681,7 @@ export default function Editor() {
             <TabContext.Provider value={{ tab, setTab }}>
               <SettingsContext.Provider value={{ settings, setSettings }}>
                 <UndoRedoContext.Provider
-                  value={{ undoStack, redoStack, setUndoStack, setRedoStack, setHistoryCount }}
+                  value={{ undoStack, redoStack, setUndoStack, setRedoStack }}
                 >
                   <SelectContext.Provider
                     value={{ selectedElement, setSelectedElement }}