feat: Add database page #1842 (#1848)

### What problem does this PR solve? feat: Add database page #1842 ### Type of change - [x] New Feature (non-breaking change which adds functionality)
infiniflow · Sep 11, 2024 · ade2e81 · ade2e81
1 parent 5f90962
commit ade2e81
Show file tree

Hide file tree

Showing 9 changed files with 140 additions and 69 deletions.
diff --git a/gui/app/(dashboard)/layout.tsx b/gui/app/(dashboard)/layout.tsx
@@ -71,15 +71,15 @@ function DesktopNav() {
           {/* <span className="sr-only">Acme Inc</span> */}
         </Link>
 
-        <NavItem href="#" label="Dashboard">
+        <NavItem href="/" label="Dashboard">
           <Home className="h-5 w-5" />
         </NavItem>
 
         <NavItem href="/database" label="Database">
           <DatabaseIcon className="h-5 w-5"></DatabaseIcon>
         </NavItem>
 
-        <NavItem href="/" label="Products">
+        <NavItem href="/products" label="Products">
           <Package className="h-5 w-5" />
         </NavItem>
 

diff --git a/gui/app/(dashboard)/page.tsx b/gui/app/(dashboard)/page.tsx
@@ -1,62 +1,17 @@
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { File, PlusCircle } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { ProductsTable } from './products-table';
 // import { getProducts } from '@/lib/db';
 
-export default async function ProductsPage({
+import { ApiUrl } from '@/lib/constant/api';
+import { request } from '@/lib/utils';
+
+export default async function HomePage({
   searchParams
 }: {
   searchParams: { q: string; offset: string };
 }) {
+  const x = await request(ApiUrl.databases);
+  console.log('🚀 ~ x:', x);
   const search = searchParams.q ?? '';
   const offset = searchParams.offset ?? 0;
-  // const { products, newOffset, totalProducts } = await getProducts(
-  //   search,
-  //   Number(offset)
-  // );
-
-  const ret = await fetch('http://localhost:3000/products');
-  const products = await ret.json();
-
-  const { newOffset, totalProducts } = {
-    newOffset: 0,
-    totalProducts: 0
-  };
 
-  return (
-    <Tabs defaultValue="all">
-      <div className="flex items-center">
-        <TabsList>
-          <TabsTrigger value="all">All</TabsTrigger>
-          <TabsTrigger value="active">Active</TabsTrigger>
-          <TabsTrigger value="draft">Draft</TabsTrigger>
-          <TabsTrigger value="archived" className="hidden sm:flex">
-            Archived
-          </TabsTrigger>
-        </TabsList>
-        <div className="ml-auto flex items-center gap-2">
-          <Button size="sm" variant="outline" className="h-8 gap-1">
-            <File className="h-3.5 w-3.5" />
-            <span className="sr-only sm:not-sr-only sm:whitespace-nowrap">
-              Export
-            </span>
-          </Button>
-          <Button size="sm" className="h-8 gap-1">
-            <PlusCircle className="h-3.5 w-3.5" />
-            <span className="sr-only sm:not-sr-only sm:whitespace-nowrap">
-              Add Product
-            </span>
-          </Button>
-        </div>
-      </div>
-      <TabsContent value="all">
-        <ProductsTable
-          products={products}
-          offset={newOffset ?? 0}
-          totalProducts={totalProducts}
-        />
-      </TabsContent>
-    </Tabs>
-  );
+  return <div>HomePage</div>;
 }
diff --git a/gui/app/(dashboard)/products/page.tsx b/gui/app/(dashboard)/products/page.tsx
@@ -0,0 +1,62 @@
+import { Button } from '@/components/ui/button';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { File, PlusCircle } from 'lucide-react';
+import { ProductsTable } from './products-table';
+// import { getProducts } from '@/lib/db';
+
+export default async function ProductsPage({
+  searchParams
+}: {
+  searchParams: { q: string; offset: string };
+}) {
+  const search = searchParams.q ?? '';
+  const offset = searchParams.offset ?? 0;
+  // const { products, newOffset, totalProducts } = await getProducts(
+  //   search,
+  //   Number(offset)
+  // );
+
+  // const products = await request('http://localhost:3000/products');
+
+  const { newOffset, totalProducts, products } = {
+    newOffset: 0,
+    totalProducts: 0,
+    products: []
+  };
+
+  return (
+    <Tabs defaultValue="all">
+      <div className="flex items-center">
+        <TabsList>
+          <TabsTrigger value="all">All</TabsTrigger>
+          <TabsTrigger value="active">Active</TabsTrigger>
+          <TabsTrigger value="draft">Draft</TabsTrigger>
+          <TabsTrigger value="archived" className="hidden sm:flex">
+            Archived
+          </TabsTrigger>
+        </TabsList>
+        <div className="ml-auto flex items-center gap-2">
+          <Button size="sm" variant="outline" className="h-8 gap-1">
+            <File className="h-3.5 w-3.5" />
+            <span className="sr-only sm:not-sr-only sm:whitespace-nowrap">
+              Export
+            </span>
+          </Button>
+          <Button size="sm" className="h-8 gap-1">
+            <PlusCircle className="h-3.5 w-3.5" />
+            <span className="sr-only sm:not-sr-only sm:whitespace-nowrap">
+              Add Product
+            </span>
+          </Button>
+        </div>
+      </div>
+      <TabsContent value="all">
+        <ProductsTable
+          products={products}
+          offset={newOffset ?? 0}
+          totalProducts={totalProducts}
+        />
+      </TabsContent>
+    </Tabs>
+  );
+}
diff --git a/gui/app/(dashboard)/product.tsx → gui/app/(dashboard)/products/product.tsx b/gui/app/(dashboard)/product.tsx → gui/app/(dashboard)/products/product.tsx
@@ -1,4 +1,3 @@
-import Image from 'next/image';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import {
@@ -8,10 +7,10 @@ import {
   DropdownMenuLabel,
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu';
-import { MoreHorizontal } from 'lucide-react';
 import { TableCell, TableRow } from '@/components/ui/table';
+import { MoreHorizontal } from 'lucide-react';
 // import { SelectProduct } from '@/lib/db';
-import { deleteProduct } from './actions';
+import { deleteProduct } from '../actions';
 
 export function Product({ product }: { product: any }) {
   return (

diff --git a/gui/app/(dashboard)/products-table.tsx → ...p/(dashboard)/products/products-table.tsx b/gui/app/(dashboard)/products-table.tsx → ...p/(dashboard)/products/products-table.tsx
@@ -1,12 +1,5 @@
 'use client';
 
-import {
-  TableHead,
-  TableRow,
-  TableHeader,
-  TableBody,
-  Table
-} from '@/components/ui/table';
 import {
   Card,
   CardContent,
@@ -15,11 +8,18 @@ import {
   CardHeader,
   CardTitle
 } from '@/components/ui/card';
+import {
+  Table,
+  TableBody,
+  TableHead,
+  TableHeader,
+  TableRow
+} from '@/components/ui/table';
 import { Product } from './product';
 // import { SelectProduct } from '@/lib/db';
-import { useRouter } from 'next/navigation';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { Button } from '@/components/ui/button';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { useRouter } from 'next/navigation';
 
 export function ProductsTable({
   products,

diff --git a/gui/app/error.tsx b/gui/app/error.tsx
@@ -0,0 +1,30 @@
+'use client'; // Error boundaries must be Client Components
+
+import { useEffect } from 'react';
+
+export default function Error({
+  error,
+  reset
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error(error);
+  }, [error]);
+
+  return (
+    <div>
+      <h2>Something went wrong!</h2>
+      <button
+        onClick={
+          // Attempt to recover by trying to re-render the segment
+          () => reset()
+        }
+      >
+        Try again
+      </button>
+    </div>
+  );
+}
diff --git a/gui/interface/api.ts b/gui/interface/api.ts
@@ -0,0 +1,3 @@
+export interface IResponse {
+  error_code: number;
+}
diff --git a/gui/lib/constant/api.ts b/gui/lib/constant/api.ts
@@ -0,0 +1,3 @@
+export const ApiUrl = {
+  databases: 'databases'
+};
diff --git a/gui/lib/utils.ts b/gui/lib/utils.ts
@@ -1,6 +1,25 @@
-import { type ClassValue, clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+const baseUrl = 'http://127.0.0.1:23820/';
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }
+
+export const request = async (url: string, params?: any) => {
+  const nextUrl = `${baseUrl}${url}`;
+  try {
+    const res = await fetch(nextUrl, {
+      headers: {
+        accept: 'application/json'
+      },
+      cache: 'no-store',
+      ...params
+    });
+    const ret = await res.json();
+    return ret;
+  } catch (error) {
+    console.warn('request error:', error);
+  }
+};