Save diagram to IndexedDb

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