From 39f7388354561946de95c1fc5348691fb1ebc0b3 Mon Sep 17 00:00:00 2001
From: Greg Richardson <greg.nmr@gmail.com>
Date: Wed, 7 Aug 2024 10:44:22 -0500
Subject: [PATCH] feat: download databases

---
 apps/postgres-new/components/sidebar.tsx | 26 +++++++++++++++++++++++-
 apps/postgres-new/lib/util.ts            |  9 ++++++++
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/apps/postgres-new/components/sidebar.tsx b/apps/postgres-new/components/sidebar.tsx
index cc02240d..6770a598 100644
--- a/apps/postgres-new/components/sidebar.tsx
+++ b/apps/postgres-new/components/sidebar.tsx
@@ -6,6 +6,7 @@ import {
   ArrowRightToLine,
   CircleEllipsis,
   Database as DbIcon,
+  Download,
   Loader,
   LogOut,
   PackagePlus,
@@ -26,6 +27,7 @@ import { useDatabasesQuery } from '~/data/databases/databases-query'
 import { usePublishWaitlistCreateMutation } from '~/data/publish-waitlist/publish-waitlist-create-mutation'
 import { useIsOnPublishWaitlistQuery } from '~/data/publish-waitlist/publish-waitlist-query'
 import { Database } from '~/lib/db'
+import { downloadFile, titleToKebabCase } from '~/lib/util'
 import { cn } from '~/lib/utils'
 import { useApp } from './app-provider'
 import { CodeBlock } from './code-block'
@@ -208,7 +210,7 @@ type DatabaseMenuItemProps = {
 
 function DatabaseMenuItem({ database, isActive }: DatabaseMenuItemProps) {
   const router = useRouter()
-  const { user } = useApp()
+  const { user, dbManager } = useApp()
   const [isPopoverOpen, setIsPopoverOpen] = useState(false)
   const { mutateAsync: deleteDatabase } = useDatabaseDeleteMutation()
   const { mutateAsync: updateDatabase } = useDatabaseUpdateMutation()
@@ -364,6 +366,28 @@ function DatabaseMenuItem({ database, isActive }: DatabaseMenuItemProps) {
                   onClick={async (e) => {
                     e.preventDefault()
 
+                    if (!dbManager) {
+                      throw new Error('dbManager is not available')
+                    }
+
+                    const db = await dbManager.getDbInstance(database.id)
+                    const dumpBlob = await db.dumpDataDir()
+
+                    const fileName = `${titleToKebabCase(database.name ?? 'My Database')}-${Date.now()}`
+                    const file = new File([dumpBlob], fileName, { type: dumpBlob.type })
+
+                    downloadFile(file)
+                  }}
+                >
+                  <Download size={16} strokeWidth={2} className="flex-shrink-0" />
+
+                  <span>Download</span>
+                </Button>
+                <Button
+                  className="bg-inherit justify-start hover:bg-neutral-200 flex gap-3"
+                  onClick={async (e) => {
+                    e.preventDefault()
+
                     setIsPublishDialogOpen(true)
                     setIsPopoverOpen(false)
                   }}
diff --git a/apps/postgres-new/lib/util.ts b/apps/postgres-new/lib/util.ts
index 9adb3c84..36bd5b08 100644
--- a/apps/postgres-new/lib/util.ts
+++ b/apps/postgres-new/lib/util.ts
@@ -38,3 +38,12 @@ export function isAutomatedUserMessage(message: Message) {
     message.data.automated === true
   )
 }
+
+export function titleToKebabCase(str: string): string {
+  return str
+    .toLowerCase()
+    .replace(/[_\s]+/g, '-') // Replace spaces and underscores with dashes
+    .replace(/[^a-z0-9-]/g, '') // Remove any non-alphanumeric characters except dashes
+    .replace(/-+/g, '-') // Replace multiple dashes with a single dash
+    .replace(/^-|-$/g, '') // Remove leading and trailing dashes
+}