feat: Hide unnecessary NavItem #1841 (#2037)

### What problem does this PR solve?

feat: Hide unnecessary NavItem #1841

### Type of change

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

gui/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript", "prettier"]
+}

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]
+};

gui/app/(dashboard)/database/hooks.ts

@@ -1,15 +1,18 @@
-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,
   showTableColumns,
   showTableIndexes,
   showTableSegments
 } from '../actions';
-import { initialData } from './constants';
 import { DatabaseRouteParams, TreeParentId } from './interface';
 import { buildLeafData, getParentIdById, updateTreeData } from './utils';
 
@@ -43,19 +46,26 @@ export const useHandleClickTreeName = () => {
 };
 
 export const useBuildTreeData = () => {
-  const loadedAlertElement = useRef(null);
-  const [data, setData] = useState<INode[]>(initialData);
-  const [nodesAlreadyLoaded, setNodesAlreadyLoaded] = useState<any[]>([]);
+  const loadedAlertElement = useRef<HTMLDivElement>(null);
+  const [data, setData] = useState<INode[]>([]);
+  const [nodesAlreadyLoaded, setNodesAlreadyLoaded] = useState<INode[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
 
   const fetchDatabases = useCallback(async () => {
     try {
       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<any[]>([]);
+  const [tableSegments, setTableSegments] = useState<ITableSegment[]>([]);
 
   const fetchTableSegments = useCallback(async () => {
     const data = await showTableSegments({

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 (
     <div className="flex divide-x h-full">
       <section className="w-1/4">

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,

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<INode>
 ) => {