parse sql into gui yaaayy

package-lock.json

@@ -19,11 +19,13 @@
         "file-saver": "^2.0.5",
         "html2canvas": "^1.4.1",
         "jointjs": "^3.7.2",
+        "node-sql-parser": "^4.7.0",
         "react": "^18.2.0",
         "react-dnd": "^16.0.1",
         "react-dnd-html5-backend": "^16.0.1",
         "react-dom": "^18.2.0",
         "react-resizable": "^3.0.5",
+        "react-router-dom": "^6.11.2",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
       },
@@ -3262,6 +3264,14 @@
       "resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz",
       "integrity": "sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA=="
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.6.2.tgz",
+      "integrity": "sha512-LzqpSrMK/3JBAVBI9u3NWtOhWNw5AMQfrUFYB0+bDHTSw17z++WJLsPsxAuK+oSddsxk4d7F/JcdDPM1M5YAhA==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -5546,6 +5556,14 @@
         "node": ">= 8.0.0"
       }
     },
+    "node_modules/big-integer": {
+      "version": "1.6.51",
+      "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.51.tgz",
+      "integrity": "sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
     "node_modules/big.js": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
@@ -12444,6 +12462,17 @@
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.12.tgz",
       "integrity": "sha512-QzsYKWhXTWx8h1kIvqfnC++o0pEmpRQA/aenALsL2F4pqNVr7YzcdMlDij5WBnwftRbJCNJL/O7zdKaxKPHqgQ=="
     },
+    "node_modules/node-sql-parser": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/node-sql-parser/-/node-sql-parser-4.7.0.tgz",
+      "integrity": "sha512-6pKgpQ15gwzDdIZVSDYH/5rVOOEWXzIrVOcq7FLCtoo+AVXTFIDmJjgRZOhTW+mDjj9trSHELXv+2AOK4C2dlQ==",
+      "dependencies": {
+        "big-integer": "^1.6.48"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -14672,6 +14701,36 @@
         "react": ">= 16.3"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.11.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.11.2.tgz",
+      "integrity": "sha512-74z9xUSaSX07t3LM+pS6Un0T55ibUE/79CzfZpy5wsPDZaea1F8QkrsiyRnA2YQ7LwE/umaydzXZV80iDCPkMg==",
+      "dependencies": {
+        "@remix-run/router": "1.6.2"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.11.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.11.2.tgz",
+      "integrity": "sha512-JNbKtAeh1VSJQnH6RvBDNhxNwemRj7KxCzc5jb7zvDSKRnPWIFj9pO+eXqjM69gQJ0r46hSz1x4l9y0651DKWw==",
+      "dependencies": {
+        "@remix-run/router": "1.6.2",
+        "react-router": "6.11.2"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",

package.json

@@ -14,11 +14,13 @@
     "file-saver": "^2.0.5",
     "html2canvas": "^1.4.1",
     "jointjs": "^3.7.2",
+    "node-sql-parser": "^4.7.0",
     "react": "^18.2.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.2.0",
     "react-resizable": "^3.0.5",
+    "react-router-dom": "^6.11.2",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/App.js

@@ -1,9 +1,17 @@
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Editor from "./pages/editor";
+import LandingPage from "./pages/landing_page";
 
 function App() {
   return (
     <>
-      <Editor name="Untitled"/>
+      <Router>
+        <Routes>
+
+        <Route path="/" element={<LandingPage />} />
+        <Route path="/editor" element={<Editor name="Untitled" />} />
+        </Routes>
+      </Router>
     </>
   );
 }

src/components/editor_panel.jsx

@@ -1,4 +1,4 @@
-import { React, useState } from "react";
+import { React, useState, useRef } from "react";
 import { ResizableBox } from "react-resizable";
 import CodeMirror from "@uiw/react-codemirror";
 import { createTheme } from "@uiw/codemirror-themes";
@@ -8,6 +8,7 @@ import { shapes } from "jointjs";
 import Shape from "./shape";
 import { saveAs } from "file-saver";
 import html2canvas from "html2canvas";
+import { Parser } from "node-sql-parser";
 import "react-resizable/css/styles.css";
 
 const myTheme = createTheme({
@@ -26,6 +27,7 @@ const myTheme = createTheme({
 
 export default function EditorPanel(props) {
   const [editor, setEditor] = useState(true);
+  const map = useRef(new Map());
 
   return (
     <ResizableBox
@@ -78,6 +80,41 @@ export default function EditorPanel(props) {
           export src
         </button>
         <br />
+        <button
+          onClick={() => {
+            try {
+              const parser = new Parser();
+              const ast = parser.astify(props.code);
+              console.log(ast);
+              ast.forEach((e) => {
+                e.table.forEach((t) => {
+                  if (map.current.has(t.table)) {
+                    return;
+                  }
+                  map.current.set(t.table, t);
+                  const rect = new shapes.standard.Rectangle();
+                  rect.position(100, 100);
+                  rect.resize(100, 40);
+                  rect.attr({
+                    body: {
+                      fill: "#7039FF",
+                    },
+                    label: {
+                      text: t.table,
+                      fill: "white",
+                    },
+                  });
+                  rect.addTo(props.graph);
+                });
+              });
+            } catch (e) {
+              alert("parsing error");
+            }
+          }}
+        >
+          parse
+        </button>
+        <br />
         <button
           onClick={() => {
             html2canvas(document.getElementById("canvas")).then((canvas) => {
@@ -95,7 +132,9 @@ export default function EditorPanel(props) {
             height="100%"
             theme={myTheme}
             extensions={[sql()]}
-            onChange={() => {}}
+            onChange={(e) => {
+              props.setCode(e);
+            }}
           />
         ) : (
           <Shape />

src/pages/landing_page.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+export default function LandingPage() {
+  return (
+    <div>
+      <Link to="/editor">editor</Link>
+      LandingPage  
+    </div>
+  );
+}