Make it possible to reset the database from the UI

src/components/Header.tsx

@@ -3,6 +3,7 @@ import { BugIcon, DatabaseZap, GithubIcon } from "lucide-react";
 import { ConfigureDB } from "./ConfigureDB";
 import { ModeToggle } from "./mode-toggle";
 import { NetworkLatencyConfigurator } from "./NetworkLatencyConfigurator";
+import { ResetTheDbDialog } from "./ResetTheDbDialog";
 import { Button } from "./ui/button";
 import { SidebarTrigger } from "./ui/sidebar";
 
@@ -41,6 +42,9 @@ export function Header() {
           <ConfigureDB />
         </div>
       </ClientOnly>
+      <ClientOnly fallback={null}>
+        <ResetTheDbDialog />
+      </ClientOnly>
       <ClientOnly fallback={null}>
         <NetworkLatencyConfigurator />
       </ClientOnly>

src/components/ResetTheDbDialog.tsx

@@ -0,0 +1,69 @@
+import { Trash2 } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+import { resetAndSeed } from "../db/seed";
+import { Button } from "./ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "./ui/dialog";
+
+export function ResetTheDbDialog() {
+  const [open, setOpen] = useState(false);
+  const [isResetting, setIsResetting] = useState(false);
+
+  const handleReset = async () => {
+    try {
+      setIsResetting(true);
+      await resetAndSeed();
+      setOpen(false);
+      // Reload the page to reflect the reset data
+      window.location.reload();
+    } catch (error) {
+      console.error("Failed to reset database:", error);
+      // alert("Failed to reset the database. Please try again.");
+      toast.error("Failed to reset the database. Please try again.");
+    } finally {
+      setIsResetting(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant="outline" size="icon">
+          <Trash2 />
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Reset the db</DialogTitle>
+          <DialogDescription>
+            This will reset the database to its initial seed data. All of your
+            current changes will be permanently lost.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline" disabled={isResetting}>
+              Cancel
+            </Button>
+          </DialogClose>
+          <Button
+            variant="destructive"
+            onClick={handleReset}
+            disabled={isResetting}
+          >
+            <Trash2 /> {isResetting ? "Resetting..." : "Reset"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/db/seed.ts

@@ -347,3 +347,35 @@ export async function seed() {
     throw error;
   }
 }
+
+export async function resetAndSeed() {
+  try {
+    // Find all tables in the database
+    const tablesResult = await db.execute<{ tablename: string }>(
+      `SELECT tablename FROM pg_tables WHERE schemaname = 'public'`,
+    );
+
+    console.log(`Found ${tablesResult.rows.length} tables to clear.`);
+
+    // Delete all records from each table (except drizzle_migrations)
+    for (const { tablename } of tablesResult.rows) {
+      if (tablename === "drizzle_migrations") {
+        console.log(`Skipping table: ${tablename}`);
+        continue;
+      }
+      await db.execute(`DELETE FROM "${tablename}"`);
+      console.log(`Cleared table: ${tablename}`);
+    }
+
+    console.log("All tables have been cleared.");
+
+    // Run the seed function
+    const result = await seed();
+    console.log("Database has been reseeded successfully.");
+
+    return result;
+  } catch (error) {
+    console.error("Error during reset and seed:", error);
+    throw error;
+  }
+}