feat: Create database #1841 (#1938)

### What problem does this PR solve?


feat: Create database #1841

### Type of change

- [x] New Feature (non-breaking change which adds functionality)

gui/app/(dashboard)/actions.ts

@@ -1,10 +1,42 @@
 'use server';
 
-import { deleteProductById } from '@/lib/db';
-import { revalidatePath } from 'next/cache';
+import { ApiUrl } from '@/lib/constant/api';
+import { CreateOption } from '@/lib/constant/common';
+import { get, post } from '@/lib/request';
 
 export async function deleteProduct(formData: FormData) {
   // let id = Number(formData.get('id'));
   // await deleteProductById(id);
   // revalidatePath('/');
 }
+
+export async function createDatabaseAction(formData: FormData) {
+  // let id = Number(formData.get('id'));
+  // await deleteProductById(id);
+  // revalidatePath('/');
+}
+
+export const createDatabase = async (params: {
+  database_name: string;
+  create_option: CreateOption;
+}) => {
+  try {
+    const x = await post(`${ApiUrl.databases}/${params.database_name}`, {
+      create_option: params.create_option
+    });
+    console.log('🚀 ~ x:', x);
+    return x;
+  } catch (error) {
+    console.log('🚀 ~ error:', error);
+  }
+};
+
+export const listDatabase = async () => {
+  try {
+    const x = await get(`${ApiUrl.databases}`);
+    console.log('🚀 ~ x:', x);
+    return x;
+  } catch (error) {
+    console.log('🚀 ~ error:', error);
+  }
+};

gui/app/(dashboard)/database-creating-dialog.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Button } from '@/components/ui/button';
 import {
   Dialog,
@@ -7,19 +9,25 @@ import {
   DialogTitle,
   DialogTrigger
 } from '@/components/ui/dialog';
-import React from 'react';
+import React, { useCallback } from 'react';
 import { DatabaseCreatingForm } from './database-creating-form';
 
 export function DatabaseCreatingDialog({ children }: React.PropsWithChildren) {
+  const [open, setOpen] = React.useState(false);
+
+  const hide = useCallback(() => {
+    setOpen(false);
+  }, []);
+
   return (
-    <Dialog>
+    <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>{children}</DialogTrigger>
       <DialogContent className="sm:max-w-[425px]">
         <DialogHeader>
           <DialogTitle>Create Database</DialogTitle>
         </DialogHeader>
         <div className="grid gap-4 py-4">
-          <DatabaseCreatingForm></DatabaseCreatingForm>
+          <DatabaseCreatingForm hide={hide}></DatabaseCreatingForm>
         </div>
         <DialogFooter>
           <Button type="submit" form="database-creating">

gui/app/(dashboard)/database-creating-form.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useRouter } from 'next/navigation';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -21,34 +22,42 @@ import {
   SelectTrigger,
   SelectValue
 } from '@/components/ui/select';
+import { CreateOption } from '@/lib/constant/common';
+import { createDatabase } from './actions';
 
 export const FormSchema = z.object({
   database_name: z
     .string({
       required_error: 'Please input name'
     })
     .trim(),
-  create_option: z.string()
+  create_option: z.nativeEnum(CreateOption)
 });
 
-export function DatabaseCreatingForm() {
+interface IProps {
+  hide(): void;
+}
+
+export function DatabaseCreatingForm({ hide }: IProps) {
+  const router = useRouter();
   const form = useForm<z.infer<typeof FormSchema>>({
     resolver: zodResolver(FormSchema),
     defaultValues: {
-      create_option: 'error'
+      create_option: CreateOption.Error
     }
   });
 
-  function onSubmit(data: z.infer<typeof FormSchema>) {
-    console.log('🚀 ~ onSubmit ~ data:', data);
-    toast({
-      title: 'You submitted the following values:',
-      description: (
-        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-        </pre>
-      )
-    });
+  async function onSubmit(data: z.infer<typeof FormSchema>) {
+    const ret = await createDatabase(data);
+    console.log('🚀 ~ onSubmit ~ ret:', ret);
+    if (ret.error_code === 0) {
+      router.refresh();
+      hide();
+      toast({
+        title: 'Create Success',
+        description: ''
+      });
+    }
   }
 
   return (

gui/app/(dashboard)/page.tsx

@@ -4,17 +4,16 @@ import {
   CardHeader,
   CardTitle
 } from '@/components/ui/card';
-import { ApiUrl } from '@/lib/constant/api';
 import AddIcon from '/public/add.svg';
 
-import { request } from '@/lib/request';
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue
 } from '@radix-ui/react-select';
+import { listDatabase } from './actions';
 import { DatabaseCreatingDialog } from './database-creating-dialog';
 
 interface IDatabaseSelectProps {
@@ -44,7 +43,7 @@ export default async function HomePage({
 }: {
   searchParams: { q: string; offset: string };
 }) {
-  const ret = await request(ApiUrl.databases);
+  const ret = await listDatabase();
   console.log('🚀 ~ x:', ret);
   const search = searchParams.q ?? '';
   const offset = searchParams.offset ?? 0;

gui/app/layout.tsx

@@ -1,5 +1,6 @@
 import './globals.css';
 
+import { Toaster } from '@/components/ui/toaster';
 import { Analytics } from '@vercel/analytics/react';
 
 export const metadata = {
@@ -15,7 +16,10 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className="flex min-h-screen w-full flex-col">{children}</body>
+      <body className="flex min-h-screen w-full flex-col">
+        {children}
+        <Toaster />
+      </body>
       <Analytics />
     </html>
   );

gui/lib/constant/common.ts

@@ -0,0 +1,4 @@
+export enum CreateOption {
+  Error = 'error',
+  IgnoreIfExists = 'ignore_if_exists'
+}

gui/lib/request.ts

@@ -29,7 +29,7 @@ export const request = async (
   }
 };
 
-export const get = (url: string, params: Record<string, string>) =>
+export const get = (url: string, params?: Record<string, string>) =>
   request(url, params, 'GET');
 
 export const post = (url: string, params: Record<string, string>) =>

gui/lib/service/index.ts

@@ -1,6 +1,12 @@
 import { ApiUrl } from '../constant/api';
+import { CreateOption } from '../constant/common';
 import { post } from '../request';
 
-export const createDatabase = async (databaseName: string) => {
-  return post(`${ApiUrl.databases}/${databaseName}`, { create_option: 'post' });
+export const createDatabase = async (
+  databaseName: string,
+  createOption: CreateOption
+) => {
+  return post(`${ApiUrl.databases}/${databaseName}`, {
+    create_option: createOption
+  });
 };