From 4e63c4667265dd194ca3a1988bbbd9235b211480 Mon Sep 17 00:00:00 2001 From: "Visal .In" Date: Thu, 4 Jul 2024 12:35:58 +0700 Subject: [PATCH] feat: add download and open sql file support --- package-lock.json | 13 +++ package.json | 2 + src/app/client/temp_sess/page-client.tsx | 12 ++ src/app/playground/client/page-client.tsx | 107 +++++++++++++++--- src/components/gui/schema-sidebar.tsx | 11 -- src/components/my-studio.tsx | 105 ++++------------- .../sidebar/feature-request.tsx.tsx | 26 +++++ .../sidebar/temp-session-countdown.tsx | 45 ++++++++ 8 files changed, 211 insertions(+), 110 deletions(-) create mode 100644 src/components/sidebar/feature-request.tsx.tsx create mode 100644 src/components/sidebar/temp-session-countdown.tsx diff --git a/package-lock.json b/package-lock.json index 43ec9256..ec00fe64 100644 --- a/package-lock.json +++ b/package-lock.json @@ -60,6 +60,7 @@ "dotenv": "^16.4.5", "drizzle-orm": "^0.30.1", "eslint-plugin-jest": "^27.6.3", + "file-saver": "^2.0.5", "libsql-stateless-easy": "^1.6.11", "lucia": "^3.1.1", "lucide-react": "^0.309.0", @@ -79,6 +80,7 @@ "@testing-library/jest-dom": "^6.2.1", "@testing-library/react": "^14.1.2", "@types/deep-equal": "^1.0.4", + "@types/file-saver": "^2.0.7", "@types/jest": "^29.5.11", "@types/node": "^20", "@types/react": "^18", @@ -8184,6 +8186,12 @@ "resolved": "https://registry.npmjs.org/@types/extend/-/extend-3.0.4.tgz", "integrity": "sha512-ArMouDUTJEz1SQRpFsT2rIw7DeqICFv5aaVzLSIYMYQSLcwcGOfT3VyglQs/p7K3F7fT4zxr0NWxYZIdifD6dA==" }, + "node_modules/@types/file-saver": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.7.tgz", + "integrity": "sha512-dNKVfHd/jk0SkR/exKGj2ggkB45MAkzvWCaqLUUgkyjITkGNzH8H+yUwr+BLJUBjZOe9w8X3wgmXhZDRg1ED6A==", + "dev": true + }, "node_modules/@types/graceful-fs": { "version": "4.1.9", "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.9.tgz", @@ -12230,6 +12238,11 @@ "node": "^10.12.0 || >=12.0.0" } }, + "node_modules/file-saver": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz", + "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==" + }, "node_modules/fill-range": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", diff --git a/package.json b/package.json index 5e40fadf..bd2c353c 100644 --- a/package.json +++ b/package.json @@ -80,6 +80,7 @@ "dotenv": "^16.4.5", "drizzle-orm": "^0.30.1", "eslint-plugin-jest": "^27.6.3", + "file-saver": "^2.0.5", "libsql-stateless-easy": "^1.6.11", "lucia": "^3.1.1", "lucide-react": "^0.309.0", @@ -99,6 +100,7 @@ "@testing-library/jest-dom": "^6.2.1", "@testing-library/react": "^14.1.2", "@types/deep-equal": "^1.0.4", + "@types/file-saver": "^2.0.7", "@types/jest": "^29.5.11", "@types/node": "^20", "@types/react": "^18", diff --git a/src/app/client/temp_sess/page-client.tsx b/src/app/client/temp_sess/page-client.tsx index 0bc218bd..835a871a 100644 --- a/src/app/client/temp_sess/page-client.tsx +++ b/src/app/client/temp_sess/page-client.tsx @@ -8,6 +8,8 @@ import MyStudio from "@/components/my-studio"; import RqliteDriver from "@/drivers/rqlite-driver"; import TursoDriver from "@/drivers/turso-driver"; import ValtownDriver from "@/drivers/valtown-driver"; +import TemporarySession from "@/components/sidebar/temp-session-countdown"; +import FeatureRequestSidebar from "@/components/sidebar/feature-request.tsx"; export default function ClientPageBody({ config, @@ -29,12 +31,22 @@ export default function ClientPageBody({ return new TursoDriver(config.url, config.token as string, true); }, [config]); + const sidebar = useMemo(() => { + return ( + <> + + + + ); + }, [expired]); + return ( ); } diff --git a/src/app/playground/client/page-client.tsx b/src/app/playground/client/page-client.tsx index 42292757..c667d25d 100644 --- a/src/app/playground/client/page-client.tsx +++ b/src/app/playground/client/page-client.tsx @@ -1,16 +1,22 @@ "use client"; +import { saveAs } from "file-saver"; import MyStudio from "@/components/my-studio"; +import { Button } from "@/components/ui/button"; import SqljsDriver from "@/drivers/sqljs-driver"; import { LucideLoader } from "lucide-react"; import Script from "next/script"; -import { useCallback, useMemo, useState } from "react"; +import { useCallback, useEffect, useMemo, useRef, useState } from "react"; +import { Database, SqlJsStatic } from "sql.js"; export default function PlaygroundEditorBody({ preloadDatabase, }: { preloadDatabase?: string | null; }) { + const fileInput = useRef(null); + const [sqlInit, setSqlInit] = useState(); const [databaseLoading, setDatabaseLoading] = useState(!!preloadDatabase); + const [rawDb, setRawDb] = useState(); const [db, setDb] = useState(); const onReady = useCallback(() => { @@ -18,19 +24,76 @@ export default function PlaygroundEditorBody({ .initSqlJs({ locateFile: (file) => `/sqljs/${file}`, }) - .then((SQL) => { - if (preloadDatabase) { - fetch(preloadDatabase) - .then((r) => r.arrayBuffer()) - .then((r) => - setDb(new SqljsDriver(new SQL.Database(new Uint8Array(r)))) - ) - .finally(() => setDatabaseLoading(false)); - } else { - setDb(new SqljsDriver(new SQL.Database())); + .then(setSqlInit); + }, []); + + useEffect(() => { + if (sqlInit) { + if (preloadDatabase) { + fetch(preloadDatabase) + .then((r) => r.arrayBuffer()) + .then((r) => { + const sqljsDatabase = new sqlInit.Database(new Uint8Array(r)); + setRawDb(sqljsDatabase); + setDb(new SqljsDriver(sqljsDatabase)); + }) + .finally(() => setDatabaseLoading(false)); + } else { + const sqljsDatabase = new sqlInit.Database(); + setRawDb(sqljsDatabase); + setDb(new SqljsDriver(sqljsDatabase)); + } + } + }, [sqlInit, preloadDatabase]); + + const onFileChange = useCallback( + (e: React.ChangeEvent) => { + if (e.currentTarget.files && sqlInit) { + const file = e.currentTarget.files[0]; + if (file) { + file.arrayBuffer().then((buffer) => { + const sqljsDatabase = new sqlInit.Database(new Uint8Array(buffer)); + setRawDb(sqljsDatabase); + setDb(new SqljsDriver(sqljsDatabase)); + }); } - }); - }, [preloadDatabase]); + } + }, + [sqlInit] + ); + + const sidebarMenu = useMemo(() => { + return ( +
+ + +
+ ); + }, [rawDb, fileInput]); const dom = useMemo(() => { if (databaseLoading) { @@ -48,15 +111,29 @@ export default function PlaygroundEditorBody({ } if (db) { - return ; + return ( + + ); } return
; - }, [databaseLoading, preloadDatabase, db]); + }, [databaseLoading, preloadDatabase, db, sidebarMenu]); return ( <>