Remove suspense (#109)

* Update ProfilingControlStack.tsx

* remove suspense

* bump version

* Update use-command.ts

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@renzholy/mongood",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "A MongoDB GUI",
   "main": "index.js",
   "private": "true",

src/components/CollectionStatus.tsx

@@ -5,14 +5,34 @@ import bytes from 'bytes'
 import { formatNumber } from '@/utils/formatter'
 import { StatsArea } from '@/components/StatsArea'
 import { useCommandCollStats, useCOmmandDbStats } from '@/hooks/use-command'
+import { LargeMessage } from './LargeMessage'
 
 export function CollectionStatus() {
   const collection = useSelector((state) => state.root.collection)
-  const { data: _collStats } = useCommandCollStats(true)
-  const collStats = _collStats!
-  const { data: _dbStats } = useCOmmandDbStats(true)
-  const dbStats = _dbStats!
+  const { data: collStats, error: collStatsError } = useCommandCollStats()
+  const { data: dbStats, error: dbStatsError } = useCOmmandDbStats()
 
+  if (collStatsError) {
+    return (
+      <LargeMessage
+        iconName="Error"
+        title="Error"
+        content={collStatsError.message}
+      />
+    )
+  }
+  if (dbStatsError) {
+    return (
+      <LargeMessage
+        iconName="Error"
+        title="Error"
+        content={dbStatsError.message}
+      />
+    )
+  }
+  if (!collStats || !dbStats) {
+    return <LargeMessage iconName="HourGlass" title="Loading" />
+  }
   return (
     <div
       style={{

src/components/DocumentsList.tsx

@@ -11,6 +11,7 @@ import { DocumentsListInner } from './DocumentsListInner'
 import { EditorModal } from './EditorModal'
 import { DocumentContextualMenu } from './DocumentContextualMenu'
 import { PromiseButton } from './PromiseButton'
+import { LargeMessage } from './LargeMessage'
 
 type Data = { [key: string]: MongoData }
 
@@ -20,7 +21,7 @@ export function DocumentsList() {
   const database = useSelector((state) => state.root.database)
   const collection = useSelector((state) => state.root.collection)
   const index = useSelector((state) => state.docs.index)
-  const { data, revalidate } = useCommandFind(true)
+  const { data, error, revalidate } = useCommandFind()
   const [isUpdateOpen, setIsUpdateOpen] = useState(false)
   const [isMenuHidden, setIsMenuHidden] = useState(true)
   const [invokedItem, setInvokedItem] = useState<Data>()
@@ -82,6 +83,14 @@ export function DocumentsList() {
     [index],
   )
 
+  if (error) {
+    return (
+      <LargeMessage iconName="Error" title="Error" content={error.message} />
+    )
+  }
+  if (!data) {
+    return <LargeMessage iconName="HourGlass" title="Loading" />
+  }
   return (
     <>
       <EditorModal<Data>
@@ -119,7 +128,7 @@ export function DocumentsList() {
       />
       <DocumentsListInner
         displayMode={displayMode}
-        items={data!.cursor.firstBatch}
+        items={data.cursor.firstBatch}
         order={order}
         onItemInvoked={onItemInvoked}
         onItemContextMenu={onItemContextMenu}

src/components/IndexesList.tsx

@@ -24,9 +24,13 @@ import { IndexContextualMenu } from './IndexContextualMenu'
 import { PromiseButton } from './PromiseButton'
 
 export function IndexesList() {
-  const { data } = useCommandIndexStats(true)
-  const { data: collStats } = useCommandCollStats(true)
-  const { data: indexes, revalidate } = useCommandListIndexes(true)
+  const { data, error } = useCommandIndexStats()
+  const { data: collStats, error: collStatsError } = useCommandCollStats()
+  const {
+    data: indexes,
+    error: indexesError,
+    revalidate,
+  } = useCommandListIndexes()
   const connection = useSelector((state) => state.root.connection)
   const database = useSelector((state) => state.root.database)
   const collection = useSelector((state) => state.root.collection)
@@ -58,7 +62,33 @@ export function IndexesList() {
     data,
   ])
 
-  if (indexes?.cursor.firstBatch.length === 0) {
+  if (error) {
+    return (
+      <LargeMessage iconName="Error" title="Error" content={error.message} />
+    )
+  }
+  if (collStatsError) {
+    return (
+      <LargeMessage
+        iconName="Error"
+        title="Error"
+        content={collStatsError.message}
+      />
+    )
+  }
+  if (indexesError) {
+    return (
+      <LargeMessage
+        iconName="Error"
+        title="Error"
+        content={indexesError.message}
+      />
+    )
+  }
+  if (!data || !indexes || !collStats) {
+    return <LargeMessage iconName="HourGlass" title="Loading" />
+  }
+  if (indexes.cursor.firstBatch.length === 0) {
     return <LargeMessage iconName="Dictionary" title="No Index" />
   }
   return (
@@ -119,7 +149,7 @@ export function IndexesList() {
             alignItems: 'center',
           },
         }}>
-        {indexes!.cursor.firstBatch.map((item) => (
+        {indexes.cursor.firstBatch.map((item) => (
           <IndexCard
             key={item.name}
             value={item}

src/components/OperationsList.tsx

@@ -22,7 +22,7 @@ import { PromiseButton } from './PromiseButton'
 
 export function OperationsList() {
   const theme = getTheme()
-  const { data, revalidate } = useCommandCurrentOp(true)
+  const { data, error, revalidate } = useCommandCurrentOp()
   const [target, setTarget] = useState<MouseEvent>()
   const invokedOperation = useSelector(
     (state) => state.operations.invokedOperation,
@@ -50,7 +50,15 @@ export function OperationsList() {
     }
   }, [promiseKill.resolved, dispatch, revalidate])
 
-  if (data?.inprog.length === 0) {
+  if (error) {
+    return (
+      <LargeMessage iconName="Error" title="Error" content={error.message} />
+    )
+  }
+  if (!data) {
+    return <LargeMessage iconName="HourGlass" title="Loading" />
+  }
+  if (data.inprog.length === 0) {
     return <LargeMessage iconName="AnalyticsReport" title="No Operation" />
   }
   return (
@@ -112,7 +120,7 @@ export function OperationsList() {
             alignItems: 'center',
           },
         }}>
-        {data!.inprog.map((item) => (
+        {data.inprog.map((item) => (
           <OperationCard
             key={stringify(item.opid)}
             value={item}

src/components/ProfilingControlStack.tsx

@@ -90,30 +90,32 @@ export function ProfilingControlStack() {
     },
     [parsed],
   )
-  const items = useMemo<IContextualMenuItem[]>(() => {
-    if (!parsed) {
-      return []
-    }
-    return hosts.map((h) => ({
-      key: h,
-      text: h,
-      checked: h === host,
-      canCheck: true,
-      onClick() {
-        setHost(h)
-      },
-    }))
-  }, [host, hosts, parsed])
+  const items = useMemo<IContextualMenuItem[]>(
+    () =>
+      hosts.map((h) => ({
+        key: h,
+        text: h,
+        checked: h === host,
+        canCheck: true,
+        onClick() {
+          setHost(h)
+          dispatch(
+            actions.profiling.setConnection(
+              generateConnectionWithDirectHost(h),
+            ),
+          )
+        },
+      })),
+    [dispatch, generateConnectionWithDirectHost, host, hosts],
+  )
   useEffect(() => {
     setHost(hosts[0])
-  }, [hosts])
-  useEffect(() => {
     dispatch(
       actions.profiling.setConnection(
-        host ? generateConnectionWithDirectHost(host) : undefined,
+        hosts[0] ? generateConnectionWithDirectHost(hosts[0]) : undefined,
       ),
     )
-  }, [host, dispatch, generateConnectionWithDirectHost])
+  }, [dispatch, generateConnectionWithDirectHost, hosts])
 
   return (
     <Stack

src/components/ProfilingList.tsx

@@ -9,7 +9,7 @@ import { LargeMessage } from './LargeMessage'
 import { EditorModal } from './EditorModal'
 
 export function ProfilingList() {
-  const { data } = useCommandSystemProfileFind(true)
+  const { data, error } = useCommandSystemProfileFind()
   const invokedProfiling = useSelector(
     (state) => state.profiling.invokedProfiling,
   )
@@ -18,7 +18,15 @@ export function ProfilingList() {
   const dispatch = useDispatch()
   const [target, setTarget] = useState<MouseEvent>()
 
-  if (data?.cursor.firstBatch.length === 0) {
+  if (error) {
+    return (
+      <LargeMessage iconName="Error" title="Error" content={error.message} />
+    )
+  }
+  if (!data) {
+    return <LargeMessage iconName="HourGlass" title="Loading" />
+  }
+  if (data.cursor.firstBatch.length === 0) {
     return <LargeMessage iconName="SpeedHigh" title="No Profiling" />
   }
   return (
@@ -61,7 +69,7 @@ export function ProfilingList() {
             alignItems: 'center',
           },
         }}>
-        {data!.cursor.firstBatch.map((item, index) => (
+        {data.cursor.firstBatch.map((item, index) => (
           <ProfilingCard
             key={index.toString()}
             value={item}

src/components/ServerStatus.tsx

@@ -6,11 +6,19 @@ import bytes from 'bytes'
 import { useCommandServerStatus } from '@/hooks/use-command'
 import { formatNumber } from '@/utils/formatter'
 import { StatsArea } from './StatsArea'
+import { LargeMessage } from './LargeMessage'
 
 export function ServerStatus() {
-  const { data } = useCommandServerStatus(true)
-  const serverStatus = data!
+  const { data: serverStatus, error } = useCommandServerStatus()
 
+  if (error) {
+    return (
+      <LargeMessage iconName="Error" title="Error" content={error.message} />
+    )
+  }
+  if (!serverStatus) {
+    return <LargeMessage iconName="HourGlass" title="Loading" />
+  }
   return (
     <div
       style={{

src/components/UsersList.tsx

@@ -6,10 +6,17 @@ import { LargeMessage } from './LargeMessage'
 import { UserCard } from './UserCard'
 
 export function UsersList() {
-  const { data } = useCommandUsers(true)
-  const usersInfo = data!
+  const { data, error } = useCommandUsers()
 
-  if (!usersInfo.users.length) {
+  if (error) {
+    return (
+      <LargeMessage iconName="Error" title="Error" content={error.message} />
+    )
+  }
+  if (!data) {
+    return <LargeMessage iconName="HourGlass" title="Loading" />
+  }
+  if (data.users.length === 0) {
     return <LargeMessage iconName="UserOptional" title="No User" />
   }
   return (
@@ -23,7 +30,7 @@ export function UsersList() {
           alignItems: 'center',
         },
       }}>
-      {usersInfo.users.map((user) => (
+      {data.users.map((user) => (
         <UserCard key={user._id} value={user} />
       ))}
     </Stack>