parse sql into gui yaaayy

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