diff --git a/gui/.eslintrc.json b/gui/.eslintrc.json new file mode 100644 index 0000000000..4360d9b1ba --- /dev/null +++ b/gui/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": ["next/core-web-vitals", "next/typescript", "prettier"] +} diff --git a/gui/.lintstagedrc.js b/gui/.lintstagedrc.js new file mode 100644 index 0000000000..138f90ad81 --- /dev/null +++ b/gui/.lintstagedrc.js @@ -0,0 +1,10 @@ +const path = require('path'); + +const buildEslintCommand = (filenames) => + `next lint --fix --file ${filenames + .map((f) => path.relative(process.cwd(), f)) + .join(' --file ')}`; + +module.exports = { + '*.{js,jsx,ts,tsx}': [buildEslintCommand] +}; diff --git a/gui/app/(dashboard)/database/hooks.ts b/gui/app/(dashboard)/database/hooks.ts index b60c54f72f..b57ee89a83 100644 --- a/gui/app/(dashboard)/database/hooks.ts +++ b/gui/app/(dashboard)/database/hooks.ts @@ -1,7 +1,11 @@ -import { ITableColumns, ITableIndex } from '@/lib/databse-interface'; +import { + ITableColumns, + ITableIndex, + ITableSegment +} from '@/lib/databse-interface'; import { useRouter } from 'next/navigation'; import { useCallback, useEffect, useRef, useState } from 'react'; -import { INode } from 'react-accessible-treeview'; +import { INode, ITreeViewOnLoadDataProps } from 'react-accessible-treeview'; import { listDatabase, listTable, @@ -9,7 +13,6 @@ import { showTableIndexes, showTableSegments } from '../actions'; -import { initialData } from './constants'; import { DatabaseRouteParams, TreeParentId } from './interface'; import { buildLeafData, getParentIdById, updateTreeData } from './utils'; @@ -43,9 +46,9 @@ export const useHandleClickTreeName = () => { }; export const useBuildTreeData = () => { - const loadedAlertElement = useRef(null); - const [data, setData] = useState(initialData); - const [nodesAlreadyLoaded, setNodesAlreadyLoaded] = useState([]); + const loadedAlertElement = useRef(null); + const [data, setData] = useState([]); + const [nodesAlreadyLoaded, setNodesAlreadyLoaded] = useState([]); const [loading, setLoading] = useState(true); const fetchDatabases = useCallback(async () => { @@ -53,9 +56,16 @@ export const useBuildTreeData = () => { setLoading(true); const ret = await listDatabase(); if (ret.databases.length > 0) { - setData((value) => + setData( updateTreeData( - value, + [ + { + name: '', + id: 0, + children: [], + parent: null + } + ], 0, ret.databases.map((x: string) => ({ name: x, @@ -68,7 +78,8 @@ export const useBuildTreeData = () => { ); } setLoading(false); - } catch (error) { + } catch (err: unknown) { + console.log('🚀 ~ fetchDatabases ~ err:', err); setLoading(false); } }, []); @@ -99,7 +110,7 @@ export const useBuildTreeData = () => { } else { setData((value) => value.map((x) => { - let metadata = x.metadata ?? {}; + const metadata = x.metadata ?? {}; if (x.id === databaseName) { metadata['isEmpty'] = true; } @@ -145,7 +156,7 @@ export const useBuildTreeData = () => { // }); }; - const wrappedOnLoadData = async (props: any) => { + const wrappedOnLoadData = async (props: ITreeViewOnLoadDataProps) => { const nodeHasNoChildData = props.element.children.length === 0; const nodeHasAlreadyBeenLoaded = nodesAlreadyLoaded.find( (e) => e.id === props.element.id @@ -154,13 +165,17 @@ export const useBuildTreeData = () => { await onLoadData(props); if (nodeHasNoChildData && !nodeHasAlreadyBeenLoaded) { - const el: any = loadedAlertElement.current; + const el = loadedAlertElement.current; setNodesAlreadyLoaded([...nodesAlreadyLoaded, props.element]); - el && (el.innerHTML = `${props.element.name} loaded`); + if (el) { + el.innerHTML = `${props.element.name} loaded`; + } // Clearing aria-live region so loaded node alerts no longer appear in DOM setTimeout(() => { - el && (el.innerHTML = ''); + if (el) { + el.innerHTML = ''; + } }, 5000); } }; @@ -216,7 +231,7 @@ export const useFetchTableSegments = ({ databaseId, tableId }: DatabaseRouteParams['params']) => { - const [tableSegments, setTableSegments] = useState([]); + const [tableSegments, setTableSegments] = useState([]); const fetchTableSegments = useCallback(async () => { const data = await showTableSegments({ diff --git a/gui/app/(dashboard)/database/layout.tsx b/gui/app/(dashboard)/database/layout.tsx index 0aacf5a3e3..d851c97548 100644 --- a/gui/app/(dashboard)/database/layout.tsx +++ b/gui/app/(dashboard)/database/layout.tsx @@ -3,15 +3,11 @@ import Loading from './loading'; import AsyncTree from './tree'; export default async function DatabaseLayout({ - searchParams, children }: { searchParams: { q: string; offset: string }; children: React.ReactNode; }) { - const search = searchParams?.q ?? ''; - const offset = searchParams?.offset ?? 0; - return (
diff --git a/gui/app/(dashboard)/database/tree.tsx b/gui/app/(dashboard)/database/tree.tsx index 05eed9cd5e..a7cea43447 100644 --- a/gui/app/(dashboard)/database/tree.tsx +++ b/gui/app/(dashboard)/database/tree.tsx @@ -49,11 +49,11 @@ function AsyncTree() { element, isBranch, isExpanded, - isSelected, - isHalfSelected, + // isSelected, + // isHalfSelected, + // handleSelect, getNodeProps, level, - handleSelect, handleExpand }) => { const branchNode = (isExpanded: boolean, element: INode) => { @@ -100,7 +100,13 @@ function AsyncTree() { ); } -const ArrowIcon = ({ isOpen, className }: any) => { +const ArrowIcon = ({ + isOpen, + className +}: { + isOpen: boolean; + className?: string; +}) => { const baseClass = 'arrow'; const classes = cx( baseClass, diff --git a/gui/app/(dashboard)/database/utils.ts b/gui/app/(dashboard)/database/utils.ts index 489ff21bfa..afd063b97b 100644 --- a/gui/app/(dashboard)/database/utils.ts +++ b/gui/app/(dashboard)/database/utils.ts @@ -3,7 +3,7 @@ import { Leaf } from './constants'; import { TreeParentId } from './interface'; export const updateTreeData = ( - list: any[], + list: INode[], id: string | number, children: Array ) => { diff --git a/gui/app/(dashboard)/layout.tsx b/gui/app/(dashboard)/layout.tsx index caecb64136..3fdcb1c4d5 100644 --- a/gui/app/(dashboard)/layout.tsx +++ b/gui/app/(dashboard)/layout.tsx @@ -1,25 +1,6 @@ -import { - Home, - LineChart, - Package, - Package2, - PanelLeft, - Settings, - ShoppingCart, - Users2 -} from 'lucide-react'; +import { Home, Settings } from 'lucide-react'; import Link from 'next/link'; -import { - Breadcrumb, - BreadcrumbItem, - BreadcrumbLink, - BreadcrumbList, - BreadcrumbPage, - BreadcrumbSeparator -} from '@/components/ui/breadcrumb'; -import { Button } from '@/components/ui/button'; -import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'; import { Tooltip, TooltipContent, @@ -28,11 +9,8 @@ import { import { Analytics } from '@vercel/analytics/react'; import { NavItem } from './nav-item'; import Providers from './providers'; -import { SearchInput } from './search'; -import { User } from './user'; import DatabaseIcon from '/public/database.svg'; import Logo from '/public/logo.svg'; -import TableIcon from '/public/table.svg'; export default function DashboardLayout({ children @@ -44,12 +22,12 @@ export default function DashboardLayout({
-
+ {/*
-
+
*/}
{children}
@@ -76,11 +54,11 @@ function DesktopNav() { - + - + {/* @@ -90,7 +68,7 @@ function DesktopNav() { - + */}