refactor: dataset and datastate

SiaFoundation · Dec 13, 2024 · c4dee5a · c4dee5a
1 parent 95f51d3
commit c4dee5a
Show file tree

Hide file tree

Showing 55 changed files with 576 additions and 288 deletions.
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'
@@ -24,13 +24,12 @@ export function Contracts() {
         context={cellContext}
         isLoading={dataState === 'loading'}
         emptyState={
-          dataState === 'noneMatchingFilters' ? (
-            <StateNoneMatching />
-          ) : dataState === 'noneYet' ? (
-            <StateNoneYet />
-          ) : dataState === 'error' ? (
-            <StateError />
-          ) : null
+          <EmptyState
+            datasetState={dataState}
+            noneMatching={<StateNoneMatching />}
+            noneYet={<StateNoneYet />}
+            error={<StateError />}
+          />
         }
         pageSize={limit}
         data={datasetPage}

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, dataState, 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={dataState} noneYet={<StateNoneYet />} />
+        }
       />
     </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,7 +12,7 @@ export function Wallet() {
   const {
     balances,
     metrics,
-    dataset,
+    datasetPage,
     dataState,
     columns,
     cellContext,
@@ -31,16 +35,15 @@ export function Wallet() {
         testId="eventsTable"
         isLoading={dataState === 'loading'}
         emptyState={
-          dataState === 'noneMatchingFilters' ? (
-            <StateNoneMatching />
-          ) : dataState === 'noneYet' ? (
-            <StateNoneYet />
-          ) : dataState === 'error' ? (
-            <StateError />
-          ) : null
+          <EmptyState
+            datasetState={dataState}
+            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,
+  useDataEmptyState,
   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,13 @@ function useContractsMain() {
     })
   }, [_datasetPage, multiSelect])
 
+  const isValidating = response.isValidating
+  const error = response.error
+  const dataState = useDataEmptyState(datasetPage, isValidating, error, {
+    filters,
+    offset,
+  })
+
   const siascanUrl = useSiascanUrl()
 
   const cellContext = useMemo(

diff --git a/apps/hostd/contexts/transactions/index.tsx b/apps/hostd/contexts/transactions/index.tsx
@@ -1,5 +1,5 @@
 import {
-  useDatasetEmptyState,
+  useDataEmptyState,
   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,22 @@ function useTransactionsMain() {
     [metrics.data]
   )
 
+  const isValidating = events.isValidating || pending.isValidating
+  const error = events.error || pending.error
+  const dataState = useDataEmptyState(datasetPage, isValidating, error, {
+    filters,
+    offset,
+  })
+
   return {
     balances,
     metrics,
-    dataset,
+    datasetPage,
     error,
     dataState,
     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, useDataEmptyState } 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,7 +48,7 @@ function useVolumesMain() {
 
   const isValidating = response.isValidating
   const error = response.error
-  const dataState = useDatasetEmptyState(dataset, isValidating, error, [])
+  const dataState = useDataEmptyState(dataset, isValidating, error)
 
   return {
     dataState,

diff --git a/apps/renterd/components/Contracts/index.tsx b/apps/renterd/components/Contracts/index.tsx
@@ -1,4 +1,4 @@
-import { ScrollArea, Table } from '@siafoundation/design-system'
+import { EmptyState, ScrollArea, Table } from '@siafoundation/design-system'
 import { useContracts } from '../../contexts/contracts'
 import { StateNoneMatching } from './StateNoneMatching'
 import { StateNoneYet } from './StateNoneYet'
@@ -66,13 +66,12 @@ export function Contracts() {
               context={cellContext}
               isLoading={dataState === 'loading'}
               emptyState={
-                dataState === 'noneMatchingFilters' ? (
-                  <StateNoneMatching />
-                ) : dataState === 'noneYet' ? (
-                  <StateNoneYet />
-                ) : dataState === 'error' ? (
-                  <StateError error={error} />
-                ) : null
+                <EmptyState
+                  datasetState={dataState}
+                  noneMatching={<StateNoneMatching />}
+                  noneYet={<StateNoneYet />}
+                  error={<StateError error={error} />}
+                />
               }
               sortableColumns={sortableColumns}
               pageSize={limit}

diff --git a/apps/renterd/components/Files/Layout.tsx b/apps/renterd/components/Files/Layout.tsx
@@ -8,7 +8,8 @@ import {
   RenterdAuthedPageLayoutProps,
 } from '../RenterdAuthedLayout'
 import { FilesActionsMenu } from '../FilesDirectory/FilesActionsMenu'
-import { FilesStatsMenu } from '../FilesDirectory/FilesStatsMenu'
+import { FilesDirectoryStatsMenu } from '../FilesDirectory/FilesDirectoryStatsMenu'
+import { FilesFlatStatsMenu } from '../FilesFlat/FilesFlatStatsMenu'
 import { FilesDirectoryBulkMenu } from '../FilesDirectory/FilesDirectoryBulkMenu'
 import { useFilesManager } from '../../contexts/filesManager'
 import { FilesFlatBulkMenu } from '../FilesFlat/FilesFlatBulkMenu'
@@ -29,7 +30,7 @@ export function useLayoutProps(): RenterdAuthedPageLayoutProps {
       sidenav: <RenterdSidenav />,
       openSettings: () => openDialog('settings'),
       nav: <FilesDirectoryBreadcrumbMenu />,
-      stats: <FilesStatsMenu />,
+      stats: <FilesDirectoryStatsMenu />,
       actions: <FilesActionsMenu />,
       dockedControls: <FilesDirectoryBulkMenu />,
     }
@@ -42,7 +43,7 @@ export function useLayoutProps(): RenterdAuthedPageLayoutProps {
     sidenav: <RenterdSidenav />,
     openSettings: () => openDialog('settings'),
     nav: <FilesFlatBreadcrumbMenu />,
-    stats: <FilesStatsMenu />,
+    stats: <FilesFlatStatsMenu />,
     actions: <FilesActionsMenu />,
     dockedControls: <FilesFlatBulkMenu />,
   }

diff --git a/apps/renterd/components/FilesDirectory/EmptyState/index.tsx b/apps/renterd/components/FilesDirectory/EmptyState/index.tsx
@@ -1,4 +1,9 @@
-import { Code, LinkButton, Text } from '@siafoundation/design-system'
+import {
+  Code,
+  LinkButton,
+  StateNoneOnPage,
+  Text,
+} from '@siafoundation/design-system'
 import { CloudUpload32 } from '@siafoundation/react-icons'
 import { routes } from '../../../config/routes'
 import { useFilesDirectory } from '../../../contexts/filesDirectory'
@@ -17,6 +22,10 @@ export function EmptyState() {
   const autopilotNotEnabled = useAutopilotNotEnabled()
   const notEnoughContracts = useNotEnoughContracts()
 
+  if (dataState === 'noneOnPage') {
+    return <StateNoneOnPage />
+  }
+
   if (dataState === 'noneMatchingFilters') {
     return <StateNoneMatching />
   }

diff --git a/...s/FilesDirectory/FilesStatsMenu/index.tsx → ...rectory/FilesDirectoryStatsMenu/index.tsx b/...s/FilesDirectory/FilesStatsMenu/index.tsx → ...rectory/FilesDirectoryStatsMenu/index.tsx
@@ -4,9 +4,10 @@ import { FilesStatsMenuShared } from '../../Files/FilesStatsMenuShared'
 import { FilesFilterDirectoryMenu } from '../../Files/FilesFilterDirectoryMenu'
 import { useFilesManager } from '../../../contexts/filesManager'
 
-export function FilesStatsMenu() {
+export function FilesDirectoryStatsMenu() {
   const { isViewingABucket, isViewingBuckets } = useFilesManager()
-  const { limit, marker, isMore, pageCount, dataState } = useFilesDirectory()
+  const { limit, nextMarker, isMore, pageCount, dataState } =
+    useFilesDirectory()
   return (
     <div className="flex gap-3 w-full">
       {isViewingBuckets ? (
@@ -18,7 +19,7 @@ export function FilesStatsMenu() {
       {isViewingABucket && (
         <PaginatorMarker
           isMore={isMore}
-          marker={marker}
+          nextMarker={nextMarker}
           limit={limit}
           pageTotal={pageCount}
           isLoading={dataState === 'loading'}

diff --git a/apps/renterd/components/FilesFlat/EmptyState/index.tsx b/apps/renterd/components/FilesFlat/EmptyState/index.tsx
@@ -2,10 +2,15 @@ import { StateError } from './StateError'
 import { StateNoneMatching } from './StateNoneMatching'
 import { StateNoneYet } from './StateNoneYet'
 import { useFilesFlat } from '../../../contexts/filesFlat'
+import { StateNoneOnPage } from '@siafoundation/design-system'
 
 export function EmptyState() {
   const { dataState } = useFilesFlat()
 
+  if (dataState === 'noneOnPage') {
+    return <StateNoneOnPage />
+  }
+
   if (dataState === 'noneMatchingFilters') {
     return <StateNoneMatching />
   }

diff --git a/...onents/FilesFlat/FilesStatsMenu/index.tsx → ...ts/FilesFlat/FilesFlatStatsMenu/index.tsx b/...onents/FilesFlat/FilesStatsMenu/index.tsx → ...ts/FilesFlat/FilesFlatStatsMenu/index.tsx
@@ -3,14 +3,14 @@ import { useFilesFlat } from '../../../contexts/filesFlat'
 import { FilesFilterDirectoryMenu } from '../../Files/FilesFilterDirectoryMenu'
 import { FilesStatsMenuShared } from '../../Files/FilesStatsMenuShared'
 
-export function FilesStatsMenu() {
+export function FilesFlatStatsMenu() {
   const { limit, pageCount, dataState, nextMarker, isMore } = useFilesFlat()
   return (
     <div className="flex gap-3 w-full">
       <FilesFilterDirectoryMenu placeholder="Filter files in current bucket" />
       <FilesStatsMenuShared />
       <PaginatorMarker
-        marker={nextMarker}
+        nextMarker={nextMarker}
         isMore={isMore}
         limit={limit}
         pageTotal={pageCount}

diff --git a/apps/renterd/components/Hosts/StateEmpty.tsx b/apps/renterd/components/Hosts/StateEmpty.tsx
@@ -1,4 +1,9 @@
-import { Code, LinkButton, Text } from '@siafoundation/design-system'
+import {
+  Code,
+  LinkButton,
+  StateNoneOnPage,
+  Text,
+} from '@siafoundation/design-system'
 import {
   Filter32,
   HardDriveIcon,
@@ -10,6 +15,10 @@ import { useHosts } from '../../contexts/hosts'
 export function StateEmpty() {
   const { dataState } = useHosts()
 
+  if (dataState === 'noneOnPage') {
+    return <StateNoneOnPage />
+  }
+
   if (dataState === 'error') {
     return (
       <div className="flex flex-col gap-10 justify-center items-center h-[400px]">