feat: add ui and handler for export

client/app/components/modals/ExportModal.tsx

@@ -0,0 +1,45 @@
+import { useState } from "react";
+import { AsyncButton } from "../AsyncButton";
+import { getExport } from "api/api";
+
+export default function ExportModal() {
+    const [loading, setLoading] = useState(false)
+    const [error, setError] = useState('')
+
+    const handleExport = () => {
+        setLoading(true)
+        fetch(`/apis/web/v1/export`, {
+            method: "GET"
+        })
+        .then(res => {
+            if (res.ok) {
+                res.blob()
+                .then(blob => {
+                    const url = window.URL.createObjectURL(blob)
+                    const a = document.createElement("a")
+                    a.href = url
+                    a.download = "koito_export.json"
+                    document.body.appendChild(a)
+                    a.click()
+                    a.remove()
+                    window.URL.revokeObjectURL(url)
+                    setLoading(false)
+                })
+            } else {
+                res.json().then(r => setError(r.error))
+                setLoading(false)
+            }
+        }).catch(err => {
+            setError(err)
+            setLoading(false)
+        })
+    }
+
+    return (
+        <div>
+            <h2>Export</h2>
+            <AsyncButton loading={loading} onClick={handleExport}>Export Data</AsyncButton>
+            {error && <p className="error">{error}</p>}
+        </div>
+    )
+}

client/app/components/modals/SettingsModal.tsx

@@ -5,6 +5,8 @@ import { ThemeSwitcher } from "../themeSwitcher/ThemeSwitcher";
 import ThemeHelper from "../../routes/ThemeHelper";
 import { useAppContext } from "~/providers/AppProvider";
 import ApiKeysModal from "./ApiKeysModal";
+import { AsyncButton } from "../AsyncButton";
+import ExportModal from "./ExportModal";
 
 interface Props {
     open: boolean 
@@ -29,9 +31,12 @@ export default function SettingsModal({ open, setOpen } : Props) {
                     <TabsTrigger className={triggerClasses} value="Appearance">Appearance</TabsTrigger>
                     <TabsTrigger className={triggerClasses} value="Account">Account</TabsTrigger>
                     {user && (
-                        <TabsTrigger className={triggerClasses} value="API Keys">
-                            API Keys
-                        </TabsTrigger>
+                        <>
+                            <TabsTrigger className={triggerClasses} value="API Keys">
+                                API Keys
+                            </TabsTrigger>
+                            <TabsTrigger className={triggerClasses} value="Export">Export</TabsTrigger>
+                        </>
                     )}
                 </TabsList>
 
@@ -44,6 +49,9 @@ export default function SettingsModal({ open, setOpen } : Props) {
                 <TabsContent value="API Keys" className={contentClasses}>
                     <ApiKeysModal />
                 </TabsContent>
+                <TabsContent value="Export" className={contentClasses}>
+                    <ExportModal />
+                </TabsContent>
             </Tabs>
         </Modal>
     )