Save diagram to IndexedDb

src/components/ControlPanel.jsx

@@ -59,6 +59,7 @@ import { useHotkeys } from "react-hotkeys-hook";
 import { Validator } from "jsonschema";
 import { areaSchema, noteSchema, tableSchema } from "../data/schemas";
 import { Editor } from "@monaco-editor/react";
+import { db } from "../data/db";
 
 export default function ControlPanel(props) {
   const MODAL = {
@@ -658,6 +659,17 @@ export default function ControlPanel(props) {
     copy();
     del();
   };
+  const save = () => {
+    console.log("saving");
+    db.diagrams.add({
+      name: title,
+      tables: tables,
+      references: relationships,
+      types: types,
+      notes: notes,
+      areas: areas,
+    });
+  };
 
   const menu = {
     File: {
@@ -671,7 +683,8 @@ export default function ControlPanel(props) {
         function: () => {},
       },
       Save: {
-        function: () => {},
+        function: save,
+        shortcut: "Ctrl+S",
       },
       "Save as": {
         function: () => {},
@@ -1401,7 +1414,10 @@ export default function ControlPanel(props) {
           </Tooltip>
           <Divider layout="vertical" margin="8px" />
           <Tooltip content="Save" position="bottom">
-            <button className="py-1 px-2 hover-2 rounded flex items-center">
+            <button
+              className="py-1 px-2 hover-2 rounded flex items-center"
+              onClick={save}
+            >
               <IconSaveStroked size="extra-large" />
             </button>
           </Tooltip>

src/data/db.js

@@ -0,0 +1,9 @@
+import Dexie from "dexie";
+
+const db = new Dexie("diagrams");
+
+db.version(1).stores({
+  diagrams: "++id",
+});
+
+export { db };

src/pages/LandingPage.jsx

@@ -2,10 +2,27 @@ import React, { useState, useEffect } from "react";
 import { Link } from "react-router-dom";
 import { IconCrossStroked } from "@douyinfe/semi-icons";
 import Navbar from "../components/Navbar";
+import { useLiveQuery } from "dexie-react-hooks";
+import { db } from "../data/db";
 
 export default function LandingPage() {
   const [showSurvey, setShowSurvey] = useState(true);
 
+  const clearDatabase = () => {
+    db.delete()
+      .then(() => {
+        console.log("Database cleared.");
+      })
+      .catch((error) => {
+        console.error("Failed to clear the database:", error);
+      });
+  };
+
+  const diagrams = useLiveQuery(() => db.diagrams.toArray());
+  useEffect(() => {
+    console.log(diagrams);
+  }, [diagrams]);
+
   useEffect(() => {
     document.body.setAttribute("theme-mode", "light");
     document.title =
@@ -27,6 +44,7 @@ export default function LandingPage() {
         </div>
       )}
       <Navbar />
+      <button onClick={clearDatabase}>delete db</button>
     </div>
   );
 }