add: wip databases

app/(deploy)/[workspace]/databases/database-new-form.tsx

@@ -11,6 +11,7 @@ import { deployDatabase } from '@/lib/deploy/database';
 import { cn } from '@/lib/utils';
 import { Plus } from 'lucide-react';
 import Image from 'next/image';
+import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 
 interface DatabaseNewSteps {
@@ -27,6 +28,7 @@ interface IDatabaseProvider {
 }
 
 export interface IDatabaseConfig {
+	workspaceId: string;
 	name: string;
 	provider: IDatabaseProvider;
 	user: {
@@ -73,8 +75,12 @@ export default function DatabaseNewForm() {
 	const [open, setOpen] = useState<boolean>(false);
 	const [currentSteps, setCurrentSteps] = useState<number>(1);
 
-	// TODO: Generate all data, but leave the user the choice to modify
+	const router = useRouter();
+
+	// TODO: Generate all data randomly, but leave the user the choice to modify
+	const { id } = useWorkspace();
 	const defaultDatabaseConfig: IDatabaseConfig = {
+		workspaceId: id,
 		name: 'my-new-cool-db',
 		provider: databaseProviders[0],
 		user: {
@@ -85,8 +91,6 @@ export default function DatabaseNewForm() {
 
 	const [databaseConfig, setDatabaseConfig] = useState<IDatabaseConfig>(defaultDatabaseConfig);
 
-	const { id } = useWorkspace();
-
 	return (
 		<Sheet open={open} onOpenChange={() => setOpen((open) => !open)}>
 			<SheetTrigger asChild>
@@ -206,9 +210,15 @@ export default function DatabaseNewForm() {
 							<Button
 								className="bg-[#3A7BFE]"
 								onClick={() => {
-									deployDatabase(databaseConfig).then((res) => {
-										console.log(res);
-									});
+									deployDatabase(databaseConfig)
+										.then((res) => {
+											console.log(res);
+											setOpen(false);
+											router.refresh();
+										})
+										.catch((err) => {
+											console.error(err);
+										});
 								}}
 							>
 								Deploy

app/(deploy)/[workspace]/databases/page.tsx

@@ -1,20 +1,51 @@
 import { Database } from 'lucide-react';
 import DatabaseNewForm from './database-new-form';
+import prisma from '@/lib/prisma';
+
+export default async function Databases({ params }: { params: { workspace: string } }) {
+	const workspaceSlug = params.workspace;
+	const workspace = await prisma.workspace.findUniqueOrThrow({
+		where: {
+			slug: workspaceSlug,
+		},
+		include: {
+			Database: true,
+		},
+	});
+
+	if (workspace?.Database.length == 0) {
+		return (
+			<div className="mt-12">
+				<h1 className="text-3xl font-semibold">Databases</h1>
+				<div className="bg-white py-6 flex flex-col items-center rounded-lg mt-6 gap-4">
+					<Database size={64} className="text-gray-300" />
+					<div className="text-center">
+						<h3 className="font-semibold">No database</h3>
+						<p className="text-gray-700">Get started by creating a new database.</p>
+					</div>
+					{/* <Button className="flex gap-1 justify-center items-center bg-[#3A7BFE]">
+                        <Plus />
+                        New Database
+                    </Button> */}
+					<DatabaseNewForm />
+				</div>
+			</div>
+		);
+	}
 
-export default async function Databases() {
 	return (
 		<div className="mt-12">
 			<h1 className="text-3xl font-semibold">Databases</h1>
 			<div className="bg-white py-6 flex flex-col items-center rounded-lg mt-6 gap-4">
-				<Database size={64} className="text-gray-300" />
-				<div className="text-center">
-					<h3 className="font-semibold">No database</h3>
-					<p className="text-gray-700">Get started by creating a new database.</p>
-				</div>
-				{/* <Button className="flex gap-1 justify-center items-center bg-[#3A7BFE]">
-					<Plus />
-					New Database
-				</Button> */}
+				{workspace.Database.map((database) => (
+					<div key={database.id} className="flex flex-row">
+						<Database size={64} className="text-gray-300" />
+						<div className="text-center">
+							<h3 className="font-semibold">{database.name}</h3>
+							<p className="text-gray-700">{database.provider}</p>
+						</div>
+					</div>
+				))}
 				<DatabaseNewForm />
 			</div>
 		</div>