refactor: dataset and datastate

SiaFoundation · Dec 16, 2024 · a5daa68 · a5daa68
1 parent 95f51d3
commit a5daa68
Show file tree

Hide file tree

Showing 71 changed files with 706 additions and 416 deletions.
diff --git a/apps/hostd/components/Contracts/ContractsFiltersBar.tsx b/apps/hostd/components/Contracts/ContractsFiltersBar.tsx
@@ -3,15 +3,15 @@ import { useContracts } from '../../contexts/contracts'
 import { ContractsFilterMenu } from './ContractsFilterMenu'
 
 export function ContractsFiltersBar() {
-  const { offset, limit, totalCount, pageCount, dataState } = useContracts()
+  const { offset, limit, totalCount, pageCount, datasetState } = useContracts()
 
   return (
     <div className="flex gap-2 justify-between w-full">
       <ContractsFilterMenu />
       <PaginatorKnownTotal
         offset={offset}
         limit={limit}
-        isLoading={dataState === 'loading'}
+        isLoading={datasetState === 'loading'}
         datasetTotal={totalCount}
         pageTotal={pageCount}
       />

diff --git a/apps/hostd/components/Contracts/index.tsx b/apps/hostd/components/Contracts/index.tsx
@@ -1,4 +1,4 @@
-import { Table } from '@siafoundation/design-system'
+import { EmptyState, Table } from '@siafoundation/design-system'
 import { useContracts } from '../../contexts/contracts'
 import { StateNoneMatching } from './StateNoneMatching'
 import { StateNoneYet } from './StateNoneYet'
@@ -13,7 +13,7 @@ export function Contracts() {
     sortableColumns,
     toggleSort,
     limit,
-    dataState,
+    datasetState,
     cellContext,
   } = useContracts()
 
@@ -22,15 +22,14 @@ export function Contracts() {
       <Table
         testId="contractsTable"
         context={cellContext}
-        isLoading={dataState === 'loading'}
+        isLoading={datasetState === 'loading'}
         emptyState={
-          dataState === 'noneMatchingFilters' ? (
-            <StateNoneMatching />
-          ) : dataState === 'noneYet' ? (
-            <StateNoneYet />
-          ) : dataState === 'error' ? (
-            <StateError />
-          ) : null
+          <EmptyState
+            datasetState={datasetState}
+            noneMatching={<StateNoneMatching />}
+            noneYet={<StateNoneYet />}
+            error={<StateError />}
+          />
         }
         pageSize={limit}
         data={datasetPage}

diff --git a/apps/hostd/components/Node/Logs.tsx b/apps/hostd/components/Node/Logs.tsx
@@ -4,7 +4,7 @@ import {
   Panel,
   Skeleton,
   Text,
-  useDatasetEmptyState,
+  useDatasetState,
 } from '@siafoundation/design-system'
 import { useLogsSearch } from '@siafoundation/hostd-react'
 import { humanDate } from '@siafoundation/units'
@@ -21,7 +21,7 @@ export function Logs() {
     },
   })
 
-  const loadingState = useDatasetEmptyState(
+  const loadingState = useDatasetState(
     logs.data?.entries,
     logs.isValidating,
     logs.error,

diff --git a/apps/hostd/components/Volumes/index.tsx b/apps/hostd/components/Volumes/index.tsx
@@ -1,9 +1,9 @@
-import { Table } from '@siafoundation/design-system'
+import { EmptyState, Table } from '@siafoundation/design-system'
 import { useVolumes } from '../../contexts/volumes'
 import { StateNoneYet } from './StateNoneYet'
 
 export function Volumes() {
-  const { dataset, isLoading, columns } = useVolumes()
+  const { dataset, datasetState, isLoading, columns } = useVolumes()
   return (
     <div className="p-6 min-w-fit">
       <Table
@@ -12,7 +12,9 @@ export function Volumes() {
         pageSize={20}
         data={dataset}
         columns={columns}
-        emptyState={<StateNoneYet />}
+        emptyState={
+          <EmptyState datasetState={datasetState} noneYet={<StateNoneYet />} />
+        }
       />
     </div>
   )

diff --git a/apps/hostd/components/Wallet/WalletFilterBar.tsx b/apps/hostd/components/Wallet/WalletFilterBar.tsx
@@ -8,7 +8,7 @@ import { useTransactions } from '../../contexts/transactions'
 export function WalletFilterBar() {
   const { isSynced, syncPercent, isWalletSynced, walletScanPercent } =
     useSyncStatus()
-  const { offset, limit, pageCount, dataState } = useTransactions()
+  const { offset, limit, pageCount, datasetState } = useTransactions()
   return (
     <div className="flex gap-2 w-full">
       <WalletSyncWarning
@@ -22,7 +22,7 @@ export function WalletFilterBar() {
         offset={offset}
         limit={limit}
         pageTotal={pageCount}
-        isLoading={dataState === 'loading'}
+        isLoading={datasetState === 'loading'}
       />
     </div>
   )

diff --git a/apps/hostd/components/Wallet/index.tsx b/apps/hostd/components/Wallet/index.tsx
@@ -1,4 +1,8 @@
-import { BalanceEvolution, Table } from '@siafoundation/design-system'
+import {
+  BalanceEvolution,
+  EmptyState,
+  Table,
+} from '@siafoundation/design-system'
 import { useTransactions } from '../../contexts/transactions'
 import { StateNoneMatching } from './StateNoneMatching'
 import { StateNoneYet } from './StateNoneYet'
@@ -8,8 +12,8 @@ export function Wallet() {
   const {
     balances,
     metrics,
-    dataset,
-    dataState,
+    datasetPage,
+    datasetState,
     columns,
     cellContext,
     sortableColumns,
@@ -29,18 +33,17 @@ export function Wallet() {
       ) : null}
       <Table
         testId="eventsTable"
-        isLoading={dataState === 'loading'}
+        isLoading={datasetState === 'loading'}
         emptyState={
-          dataState === 'noneMatchingFilters' ? (
-            <StateNoneMatching />
-          ) : dataState === 'noneYet' ? (
-            <StateNoneYet />
-          ) : dataState === 'error' ? (
-            <StateError />
-          ) : null
+          <EmptyState
+            datasetState={datasetState}
+            noneMatching={<StateNoneMatching />}
+            noneYet={<StateNoneYet />}
+            error={<StateError />}
+          />
         }
         pageSize={defaultPageSize}
-        data={dataset}
+        data={datasetPage}
         context={cellContext}
         columns={columns}
         sortableColumns={sortableColumns}

diff --git a/apps/hostd/contexts/contracts/index.tsx b/apps/hostd/contexts/contracts/index.tsx
@@ -1,6 +1,6 @@
 import {
   useTableState,
-  useDatasetEmptyState,
+  useDatasetState,
   useServerFilters,
   getContractsTimeRangeBlockHeight,
   useMultiSelect,
@@ -82,15 +82,6 @@ function useContractsMain() {
     [enabledColumns]
   )
 
-  const isValidating = response.isValidating
-  const error = response.error
-  const dataState = useDatasetEmptyState(
-    _datasetPage,
-    isValidating,
-    error,
-    filters
-  )
-
   const { estimatedBlockHeight, isSynced, nodeBlockHeight } = useSyncStatus()
   const currentHeight = isSynced ? nodeBlockHeight : estimatedBlockHeight
 
@@ -115,6 +106,16 @@ function useContractsMain() {
     })
   }, [_datasetPage, multiSelect])
 
+  const isValidating = response.isValidating
+  const error = response.error
+  const datasetState = useDatasetState({
+    datasetPage,
+    isValidating,
+    error,
+    filters,
+    offset,
+  })
+
   const siascanUrl = useSiascanUrl()
 
   const cellContext = useMemo(
@@ -128,7 +129,7 @@ function useContractsMain() {
   )
 
   return {
-    dataState,
+    datasetState,
     offset,
     limit,
     cellContext,

diff --git a/apps/hostd/contexts/transactions/index.tsx b/apps/hostd/contexts/transactions/index.tsx
@@ -1,5 +1,5 @@
 import {
-  useDatasetEmptyState,
+  useDatasetState,
   useServerFilters,
   useTableState,
 } from '@siafoundation/design-system'
@@ -28,6 +28,7 @@ import {
   defaultSortField,
   sortOptions,
 } from './types'
+import { Maybe } from '@siafoundation/types'
 
 const defaultPageSize = 50
 
@@ -58,7 +59,7 @@ function useTransactionsMain() {
     useServerFilters()
 
   const syncStatus = useSyncStatus()
-  const dataset = useMemo<EventData[] | null>(() => {
+  const datasetPage = useMemo<Maybe<EventData[]>>(() => {
     if (!events.data || !pending.data) {
       return null
     }
@@ -97,8 +98,12 @@ function useTransactionsMain() {
       }
       return res
     })
-    return [...dataPending.reverse(), ...dataEvents]
-  }, [events.data, pending.data, syncStatus.nodeBlockHeight])
+    if (offset === 0) {
+      return [...dataPending.reverse(), ...dataEvents]
+    } else {
+      return [...dataEvents]
+    }
+  }, [events.data, pending.data, syncStatus.nodeBlockHeight, offset])
 
   const {
     configurableColumns,
@@ -128,11 +133,6 @@ function useTransactionsMain() {
     [enabledColumns]
   )
 
-  const isValidating = events.isValidating || pending.isValidating
-  const error = events.error || pending.error
-
-  const dataState = useDatasetEmptyState(dataset, isValidating, error, filters)
-
   const siascanUrl = useSiascanUrl()
   const cellContext = useMemo<CellContext>(
     () => ({
@@ -168,15 +168,25 @@ function useTransactionsMain() {
     [metrics.data]
   )
 
+  const isValidating = events.isValidating || pending.isValidating
+  const error = events.error || pending.error
+  const datasetState = useDatasetState({
+    datasetPage,
+    isValidating,
+    error,
+    filters,
+    offset,
+  })
+
   return {
     balances,
     metrics,
-    dataset,
+    datasetPage,
     error,
-    dataState,
+    datasetState,
     offset,
     limit,
-    pageCount: dataset?.length || 0,
+    pageCount: datasetPage?.length || 0,
     defaultPageSize,
     cellContext,
     configurableColumns,

diff --git a/apps/hostd/contexts/volumes/dataset.ts b/apps/hostd/contexts/volumes/dataset.ts
@@ -4,15 +4,16 @@ import { useVolumes } from '@siafoundation/hostd-react'
 import { VolumeData } from './types'
 import BigNumber from 'bignumber.js'
 import { MiBToBytes } from '@siafoundation/units'
+import { Maybe } from '@siafoundation/types'
 
 export function useDataset({
   response,
 }: {
   response: ReturnType<typeof useVolumes>
 }) {
-  return useMemo<VolumeData[] | null>(() => {
+  return useMemo<Maybe<VolumeData[]>>(() => {
     if (!response.data) {
-      return null
+      return undefined
     }
     return (
       response.data?.map((contract) => {

diff --git a/apps/hostd/contexts/volumes/index.tsx b/apps/hostd/contexts/volumes/index.tsx
@@ -1,7 +1,4 @@
-import {
-  useTableState,
-  useDatasetEmptyState,
-} from '@siafoundation/design-system'
+import { useTableState, useDatasetState } from '@siafoundation/design-system'
 import { VolumeMeta } from '@siafoundation/hostd-types'
 import { useVolumes as useVolumesData } from '@siafoundation/hostd-react'
 import { createContext, useContext, useMemo } from 'react'
@@ -51,10 +48,14 @@ function useVolumesMain() {
 
   const isValidating = response.isValidating
   const error = response.error
-  const dataState = useDatasetEmptyState(dataset, isValidating, error, [])
+  const datasetState = useDatasetState({
+    datasetPage: dataset,
+    isValidating,
+    error,
+  })
 
   return {
-    dataState,
+    datasetState,
     totalCount: dataset?.length || 0,
     isLoading: response.isValidating,
     columns: filteredTableColumns,

diff --git a/apps/renterd/components/Alerts/AlertsFilterMenu.tsx b/apps/renterd/components/Alerts/AlertsFilterMenu.tsx
@@ -12,7 +12,7 @@ export function AlertsFilterMenu() {
     limit,
     totals,
     pageCount,
-    dataState,
+    datasetState,
     datasetPage,
     dismissMany,
   } = useAlerts()
@@ -53,7 +53,7 @@ export function AlertsFilterMenu() {
         </Button>
       </div>
       <div className="flex-1" />
-      {!dataState && !!pageCount && (
+      {datasetState === 'loaded' && !!pageCount && (
         <Button
           tip={severityFilter ? `dismiss ${pageCount}` : 'dismiss all'}
           onClick={() => {
@@ -70,7 +70,7 @@ export function AlertsFilterMenu() {
       <PaginatorKnownTotal
         offset={offset}
         limit={limit}
-        isLoading={dataState === 'loading'}
+        isLoading={datasetState === 'loading'}
         datasetTotal={totals.all}
         pageTotal={pageCount}
       />

diff --git a/apps/renterd/components/Alerts/index.tsx b/apps/renterd/components/Alerts/index.tsx
@@ -13,19 +13,19 @@ export function Alerts() {
     sortableColumns,
     toggleSort,
     limit,
-    dataState,
+    datasetState,
   } = useAlerts()
 
   return (
     <div className="p-6 min-w-fit">
       <Table
-        isLoading={dataState === 'loading'}
+        isLoading={datasetState === 'loading'}
         emptyState={
-          dataState === 'noneMatchingFilters' ? (
+          datasetState === 'noneMatchingFilters' ? (
             <StateNoneMatching />
-          ) : dataState === 'noneYet' ? (
+          ) : datasetState === 'noneYet' ? (
             <StateNoneYet />
-          ) : dataState === 'error' ? (
+          ) : datasetState === 'error' ? (
             <StateError />
           ) : null
         }