geneeral clean up

src/components/draw_area.jsx

@@ -2,10 +2,10 @@ import React, { useEffect, useRef } from "react";
 import { dia, shapes } from "jointjs";
 import { useDrop } from "react-dnd";
 
-function Diagram(props) {
+export default function DrawArea(props) {
   const canvas = useRef(null);
 
-  const [{ isOver }, drop] = useDrop(() => ({
+  const [, drop] = useDrop(() => ({
     accept: "CARD",
     drop: (item, monitor) => {
       const offset = monitor.getClientOffset();
@@ -45,4 +45,3 @@ function Diagram(props) {
     </div>
   );
 }
-export default Diagram;

src/components/editor_panel.jsx

@@ -0,0 +1,80 @@
+import { React, useState } from "react";
+import { ResizableBox } from "react-resizable";
+import CodeMirror from "@uiw/react-codemirror";
+import { createTheme } from "@uiw/codemirror-themes";
+import { sql } from "@codemirror/lang-sql";
+import { tags as t } from "@lezer/highlight";
+import { shapes } from "jointjs";
+import Shape from "./shape";
+import "react-resizable/css/styles.css";
+
+const myTheme = createTheme({
+  dark: "light",
+  settings: {},
+  styles: [
+    { tag: t.comment, color: "#8ab0ed" },
+    { tag: t.string, color: "#e68e29" },
+    { tag: t.number, color: "#e68e29" },
+    { tag: t.keyword, color: "#295be6" },
+    { tag: t.variableName, color: "#1a00db" },
+    { tag: t.typeName, color: "#295be6" },
+    { tag: t.tagName, color: "#008a02" },
+  ],
+});
+
+export default function EditorPanel(props) {
+  const [editor, setEditor] = useState(true);
+
+  return (
+    <ResizableBox
+      width={window.innerWidth * 0.2}
+      height={window.innerHeight}
+      resizeHandles={["e"]}
+      minConstraints={[window.innerWidth * 0.2, window.innerHeight]}
+      maxConstraints={[Infinity, Infinity]}
+      axis="x"
+    >
+      <div className="overflow-auto h-full">
+        <button
+          onClick={() => {
+            setEditor(!editor);
+          }}
+        >
+          change view
+        </button>
+        <br />
+        <button
+          onClick={() => {
+            const rect = new shapes.standard.Rectangle();
+            rect.position(100, 100);
+            rect.resize(100, 40);
+            rect.attr({
+              body: {
+                fill: "#7039FF",
+              },
+              label: {
+                text: "hi",
+                fill: "white",
+              },
+            });
+            rect.addTo(props.graph);
+            props.setCode((prevCode) => `create table hi\n\n${prevCode}`);
+          }}
+        >
+          add
+        </button>
+        {editor ? (
+          <CodeMirror
+            value={props.code}
+            height="100%"
+            theme={myTheme}
+            extensions={[sql()]}
+            onChange={() => {}}
+          />
+        ) : (
+          <Shape />
+        )}
+      </div>
+    </ResizableBox>
+  );
+}

src/components/shape.jsx

@@ -0,0 +1,41 @@
+import {React} from "react"
+import { useDrag } from "react-dnd";
+
+export default function Shape (){
+  const rectData = {
+    type: "rect",
+    position: { x: 100, y: 100 },
+    size: { width: 100, height: 40 },
+    attrs: {
+      body: {
+        fill: "#7039FF",
+      },
+      label: {
+        text: "hi",
+        fill: "white",
+      },
+    },
+  };
+
+  const [{ isDragging }, drag] = useDrag(() => ({
+    type: "CARD",
+    item: rectData,
+    collect: (monitor) => ({
+      isDragging: !!monitor.isDragging(),
+    }),
+  }));
+
+  return (
+    <div
+      ref={drag}
+      style={{
+        opacity: isDragging ? 0.5 : 1,
+        fontSize: 25,
+        fontWeight: "bold",
+        cursor: "move",
+      }}
+    >
+      rect
+    </div>
+  );
+};

src/pages/editor.jsx

@@ -1,141 +1,25 @@
-import { React, useState, useEffect, useMemo } from "react";
-import Diagram from "../components/diagram";
+import { React, useState, useMemo } from "react";
 import Header from "../components/header";
 import Sidebar from "../components/sidebar";
-import { ResizableBox } from "react-resizable";
-import "react-resizable/css/styles.css";
 import ControlPanel from "../components/control_panel";
-import CodeMirror from "@uiw/react-codemirror";
-import { createTheme } from "@uiw/codemirror-themes";
-import { sql } from "@codemirror/lang-sql";
-import { tags as t } from "@lezer/highlight";
-import { DndProvider, useDrag } from "react-dnd";
+import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
-import { dia, shapes } from "jointjs";
-
-const myTheme = createTheme({
-  dark: "light",
-  settings: {},
-  styles: [
-    { tag: t.comment, color: "#8ab0ed" },
-    { tag: t.string, color: "#e68e29" },
-    { tag: t.number, color: "#e68e29" },
-    { tag: t.keyword, color: "#295be6" },
-    { tag: t.variableName, color: "#1a00db" },
-    { tag: t.typeName, color: "#295be6" },
-    { tag: t.tagName, color: "#008a02" },
-  ],
-});
-const Shape = () => {
-  const rectData = {
-    type: "rect",
-    position: { x: 100, y: 100 },
-    size: { width: 100, height: 40 },
-    attrs: {
-      body: {
-        fill: "#7039FF",
-      },
-      label: {
-        text: "hi",
-        fill: "white",
-      },
-    },
-  };
-
-  const [{ isDragging }, drag] = useDrag(() => ({
-    type: "CARD",
-    item: rectData,
-    collect: (monitor) => ({
-      isDragging: !!monitor.isDragging(),
-    }),
-  }));
-
-  return (
-    <div
-      ref={drag}
-      style={{
-        opacity: isDragging ? 0.5 : 1,
-        fontSize: 25,
-        fontWeight: "bold",
-        cursor: "move",
-      }}
-    >
-      rect
-    </div>
-  );
-};
-
-const Window = (props) => {
-  const [editor, setEditor] = useState(true);
-
-  return (
-    <ResizableBox
-      width={window.innerWidth * 0.2}
-      height={window.innerHeight}
-      resizeHandles={["e"]}
-      minConstraints={[window.innerWidth * 0.2, window.innerHeight]}
-      maxConstraints={[Infinity, Infinity]}
-      axis="x"
-    >
-      <div className="overflow-auto h-full">
-        <button
-          onClick={() => {
-            setEditor(!editor);
-          }}
-        >
-          change view
-        </button>
-        <br />
-        <button
-          onClick={() => {
-            const rect = new shapes.standard.Rectangle();
-            rect.position(100, 100);
-            rect.resize(100, 40);
-            rect.attr({
-              body: {
-                fill: "#7039FF",
-              },
-              label: {
-                text: "hi",
-                fill: "white",
-              },
-            });
-            rect.addTo(props.graph);
-            props.setCode((prevCode) => `create table hi\n\n${prevCode}`);
-          }}
-        >
-          add
-        </button>
-        {editor ? (
-          <CodeMirror
-            value={props.code}
-            height="100%"
-            theme={myTheme}
-            extensions={[sql()]}
-            onChange={() => {}}
-          />
-        ) : (
-          <Shape />
-        )}
-      </div>
-    </ResizableBox>
-  );
-};
+import { dia } from "jointjs";
+import DrawArea from "../components/draw_area";
+import EditorPanel from "../components/editor_panel";
 
 export default function Editor(props) {
   const graph = useMemo(() => new dia.Graph(), []);
   const [code, setCode] = useState("");
 
-  useEffect(() => {}, [graph]);
-
   return (
     <>
       <Header name={props.name} />
       <ControlPanel />
       <div className="flex h-full">
         <DndProvider backend={HTML5Backend}>
-          <Window graph={graph} code={code} setCode={setCode}/>
-          <Diagram graph={graph} code={code} setCode={setCode}/>
+          <EditorPanel graph={graph} code={code} setCode={setCode}/>
+          <DrawArea graph={graph} code={code} setCode={setCode}/>
         </DndProvider>
         <Sidebar />
       </div>