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,8 +210,14 @@ export default function DatabaseNewForm() {
 							<Button
 								className="bg-[#3A7BFE]"
 								onClick={() => {
-									deployDatabase(databaseConfig).then((res) => {
+									deployDatabase(databaseConfig)
+										.then((res) => {
 											console.log(res);
+											setOpen(false);
+											router.refresh();
+										})
+										.catch((err) => {
+											console.error(err);
 										});
 								}}
 							>

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

@@ -1,7 +1,19 @@
 import { Database } from 'lucide-react';
 import DatabaseNewForm from './database-new-form';
+import prisma from '@/lib/prisma';
 
-export default async function Databases() {
+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>
@@ -19,4 +31,23 @@ export default async function Databases() {
 				</div>
 			</div>
 		);
+	}
+
+	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">
+				{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>
+	);
 }

lib/deploy/database.ts

@@ -1,16 +1,65 @@
 "use server";
 
 import { IDatabaseConfig } from "@/app/(deploy)/[workspace]/databases/database-new-form";
+import prisma from "../prisma";
+import { DatabaseProvider } from "@prisma/client";
 
 export async function deployDatabase(config: IDatabaseConfig) {
 
-    return fetch("http://127.0.0.1:8080/databases", {
+    // TODO: Refactor using transactions
+    const database = await prisma.database.create({
+        data: {
+            name: config.name,
+            provider: DatabaseProvider.REDIS,
+            password: config.user.password,
+            username: config.user.username,
+            workspaceId: config.workspaceId,
+            host: "",
+            port: 0,
+        }
+    });
+
+    try {
+        const res = await fetch("http://127.0.0.1:8080/databases", {
         method: "POST",
         headers: {
             "Content-Type": "application/json",
         },
-        body: JSON.stringify(config),
+        body: JSON.stringify({
-    }).then((res) => res.json()).catch((err) => {
+            workspaceId: config.workspaceId,
-        console.error(err);
+            id: database.id,
+            provider: {
+                id: config.provider.id,
+            },
+            user: {
+                username: config.user.username,
+                password: config.user.password,
+            },
+        }),
         });
+
+        const json = await res.json();
+        console.log(json)
+
+        if (!res.ok) {
+            throw new Error(json.message);
+        }
+
+        await prisma.database.update({
+            where: {
+                id: database.id,
+            },
+            data: {
+                host: "toset",
+                port: json.port,
+            }
+        });
+    } catch(err) {
+        await prisma.database.delete({
+            where: {
+                id: database.id,
+            }
+        })
+        throw new Error("Failed to deploy database");
+    }
 }

lib/nextauth.ts

@@ -3,6 +3,7 @@ import NextAuth, { NextAuthOptions, TokenSet, User } from "next-auth"
 import Github from "next-auth/providers/github"
 import prisma from "./prisma"
 import { Adapter } from "next-auth/adapters"
+import { createWorkspace } from "./deploy/workspace"
 
 export const authOptions: NextAuthOptions = {
     providers: [
@@ -95,7 +96,7 @@ export const authOptions: NextAuthOptions = {
       },
       events: {
         createUser: async ({ user }) => {
-            await prisma.workspace.create({
+            const worksapce = await prisma.workspace.create({
                 data: {
                     name: user.username + "'s Personal",
                     ownerId: user.id,