Skip to content

Commit 14e73b4

Browse files
alexfreskaalexfreska
committed
refactor: visible columns
1 parent e4130b4 commit 14e73b4

File tree

44 files changed

+192
-290
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+192
-290
lines changed

‎.changeset/cyan-lamps-hang.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@siafoundation/design-system': minor
3+
---
4+
5+
useTableState now handles column filtering.

‎.changeset/silly-zebras-collect.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@siafoundation/design-system': minor
3+
---
4+
5+
Renamed enabledColumns to visibleColumns and removed disabled categories from useTableState.

‎apps/hostd/components/Contracts/ContractsViewDropdownMenu.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export function ContractsViewDropdownMenu() {
3030
setSortField,
3131
sortDirection,
3232
setSortDirection,
33-
enabledColumns,
33+
visibleColumnIds,
3434
} = useContracts()
3535

3636
const generalColumns = configurableColumns
@@ -128,42 +128,42 @@ export function ContractsViewDropdownMenu() {
128128
<MenuSectionLabelToggleAll
129129
label="General"
130130
columns={generalColumns.map((c) => c.value)}
131-
enabled={enabledColumns}
131+
enabled={visibleColumnIds}
132132
setColumnsVisible={setColumnsVisible}
133133
setColumnsHidden={setColumnsHidden}
134134
/>
135135
<BaseMenuItem>
136136
<PoolCombo
137137
options={generalColumns}
138-
values={enabledColumns}
138+
values={visibleColumnIds}
139139
onChange={(value) => toggleColumnVisibility(value)}
140140
/>
141141
</BaseMenuItem>
142142
<MenuSectionLabelToggleAll
143143
label="Time"
144144
columns={timeColumns.map((c) => c.value)}
145-
enabled={enabledColumns}
145+
enabled={visibleColumnIds}
146146
setColumnsVisible={setColumnsVisible}
147147
setColumnsHidden={setColumnsHidden}
148148
/>
149149
<BaseMenuItem>
150150
<PoolCombo
151151
options={timeColumns}
152-
values={enabledColumns}
152+
values={visibleColumnIds}
153153
onChange={(value) => toggleColumnVisibility(value)}
154154
/>
155155
</BaseMenuItem>
156156
<MenuSectionLabelToggleAll
157157
label="Usage"
158158
columns={financialColumns.map((c) => c.value)}
159-
enabled={enabledColumns}
159+
enabled={visibleColumnIds}
160160
setColumnsVisible={setColumnsVisible}
161161
setColumnsHidden={setColumnsHidden}
162162
/>
163163
<BaseMenuItem>
164164
<PoolCombo
165165
options={financialColumns}
166-
values={enabledColumns}
166+
values={visibleColumnIds}
167167
onChange={(value) => toggleColumnVisibility(value)}
168168
/>
169169
</BaseMenuItem>

‎apps/hostd/components/Contracts/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { StateError } from './StateError'
66

77
export function Contracts() {
88
const {
9-
columns,
9+
visibleColumns,
1010
datasetPage,
1111
sortField,
1212
sortDirection,
@@ -33,7 +33,7 @@ export function Contracts() {
3333
}
3434
pageSize={limit}
3535
data={datasetPage}
36-
columns={columns}
36+
columns={visibleColumns}
3737
sortableColumns={sortableColumns}
3838
sortDirection={sortDirection}
3939
sortField={sortField}

‎apps/hostd/components/Volumes/VolumesViewDropdownMenu.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export function VolumesViewDropdownMenu() {
2121
resetDefaultColumnVisibility,
2222
setColumnsVisible,
2323
setColumnsHidden,
24-
enabledColumns,
24+
visibleColumnIds,
2525
} = useVolumes()
2626

2727
const generalColumns = configurableColumns
@@ -68,28 +68,28 @@ export function VolumesViewDropdownMenu() {
6868
<MenuSectionLabelToggleAll
6969
label="General"
7070
columns={generalColumns.map((c) => c.value)}
71-
enabled={enabledColumns}
71+
enabled={visibleColumnIds}
7272
setColumnsVisible={setColumnsVisible}
7373
setColumnsHidden={setColumnsHidden}
7474
/>
7575
<BaseMenuItem>
7676
<PoolCombo
7777
options={generalColumns}
78-
values={enabledColumns}
78+
values={visibleColumnIds}
7979
onChange={(value) => toggleColumnVisibility(value)}
8080
/>
8181
</BaseMenuItem>
8282
<MenuSectionLabelToggleAll
8383
label="Operations"
8484
columns={opsColumns.map((c) => c.value)}
85-
enabled={enabledColumns}
85+
enabled={visibleColumnIds}
8686
setColumnsVisible={setColumnsVisible}
8787
setColumnsHidden={setColumnsHidden}
8888
/>
8989
<BaseMenuItem>
9090
<PoolCombo
9191
options={opsColumns}
92-
values={enabledColumns}
92+
values={visibleColumnIds}
9393
onChange={(value) => toggleColumnVisibility(value)}
9494
/>
9595
</BaseMenuItem>

‎apps/hostd/components/Volumes/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,15 @@ import { useVolumes } from '../../contexts/volumes'
33
import { StateNoneYet } from './StateNoneYet'
44

55
export function Volumes() {
6-
const { dataset, datasetState, isLoading, columns } = useVolumes()
6+
const { dataset, datasetState, isLoading, visibleColumns } = useVolumes()
77
return (
88
<div className="p-6 min-w-fit">
99
<Table
1010
testId="volumesTable"
1111
isLoading={isLoading}
1212
pageSize={20}
1313
data={dataset}
14-
columns={columns}
14+
columns={visibleColumns}
1515
emptyState={
1616
<EmptyState datasetState={datasetState} noneYet={<StateNoneYet />} />
1717
}

‎apps/hostd/components/Wallet/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export function Wallet() {
1414
metrics,
1515
datasetPage,
1616
datasetState,
17-
columns,
17+
visibleColumns,
1818
cellContext,
1919
sortableColumns,
2020
sortDirection,
@@ -45,7 +45,7 @@ export function Wallet() {
4545
pageSize={defaultPageSize}
4646
data={datasetPage}
4747
context={cellContext}
48-
columns={columns}
48+
columns={visibleColumns}
4949
sortableColumns={sortableColumns}
5050
sortDirection={sortDirection}
5151
sortField={sortField}

‎apps/hostd/contexts/contracts/index.tsx

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,7 @@ import {
1414
columnsDefaultVisible,
1515
ContractData,
1616
defaultSortField,
17-
SortField,
1817
sortOptions,
19-
TableColumnId,
2018
} from './types'
2119
import { columns } from './columns'
2220
import { useDataset } from './dataset'
@@ -33,7 +31,8 @@ function useContractsMain() {
3331

3432
const {
3533
configurableColumns,
36-
enabledColumns,
34+
visibleColumnIds,
35+
visibleColumns,
3736
sortableColumns,
3837
toggleColumnVisibility,
3938
setColumnsVisible,
@@ -44,7 +43,7 @@ function useContractsMain() {
4443
sortField,
4544
sortDirection,
4645
resetDefaultColumnVisibility,
47-
} = useTableState<TableColumnId, SortField>('hostd/v0/contracts', {
46+
} = useTableState('hostd/v0/contracts', {
4847
columns,
4948
columnsDefaultVisible,
5049
sortOptions,
@@ -75,11 +74,6 @@ function useContractsMain() {
7574
response,
7675
})
7776

78-
const filteredTableColumns = useMemo(
79-
() => columns.filter((column) => enabledColumns.includes(column.id)),
80-
[enabledColumns]
81-
)
82-
8377
const { estimatedBlockHeight, isSynced, nodeBlockHeight } = useSyncStatus()
8478
const currentHeight = isSynced ? nodeBlockHeight : estimatedBlockHeight
8579

@@ -133,10 +127,10 @@ function useContractsMain() {
133127
cellContext,
134128
datasetPageTotal: datasetPage?.length || 0,
135129
datasetFilteredTotal: response.data?.count,
136-
columns: filteredTableColumns,
130+
visibleColumns,
137131
datasetPage,
138132
configurableColumns,
139-
enabledColumns,
133+
visibleColumnIds,
140134
sortableColumns,
141135
toggleColumnVisibility,
142136
setColumnsVisible,

‎apps/hostd/contexts/transactions/index.tsx

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,8 @@ function useTransactionsMain() {
107107

108108
const {
109109
configurableColumns,
110-
enabledColumns,
110+
visibleColumnIds,
111+
visibleColumns,
111112
sortableColumns,
112113
toggleColumnVisibility,
113114
setColumnsVisible,
@@ -125,14 +126,6 @@ function useTransactionsMain() {
125126
defaultSortField,
126127
})
127128

128-
const filteredTableColumns = useMemo(
129-
() =>
130-
columns.filter(
131-
(column) => column.fixed || enabledColumns.includes(column.id)
132-
),
133-
[enabledColumns]
134-
)
135-
136129
const siascanUrl = useSiascanUrl()
137130
const cellContext = useMemo<CellContext>(
138131
() => ({
@@ -190,7 +183,7 @@ function useTransactionsMain() {
190183
defaultPageSize,
191184
cellContext,
192185
configurableColumns,
193-
enabledColumns,
186+
visibleColumnIds,
194187
sortableColumns,
195188
toggleColumnVisibility,
196189
setColumnsVisible,
@@ -206,8 +199,7 @@ function useTransactionsMain() {
206199
removeFilter,
207200
removeLastFilter,
208201
resetFilters,
209-
filteredTableColumns,
210-
columns,
202+
visibleColumns,
211203
}
212204
}
213205

‎apps/hostd/contexts/volumes/index.tsx

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ import {
77
} from '@siafoundation/design-system'
88
import { VolumeMeta } from '@siafoundation/hostd-types'
99
import { useVolumes as useVolumesData } from '@siafoundation/hostd-react'
10-
import { createContext, useContext, useMemo } from 'react'
11-
import { columnsDefaultVisible, TableColumnId, VolumeData } from './types'
10+
import { createContext, useContext } from 'react'
11+
import { columnsDefaultVisible, VolumeData } from './types'
1212
import { columns } from './columns'
1313
import { useDataset } from './dataset'
1414
import { defaultDatasetRefreshInterval } from '../../config/swr'
@@ -22,7 +22,8 @@ function useVolumesMain() {
2222

2323
const {
2424
configurableColumns,
25-
enabledColumns,
25+
visibleColumnIds,
26+
visibleColumns,
2627
toggleColumnVisibility,
2728
setColumnsVisible,
2829
setColumnsHidden,
@@ -32,7 +33,7 @@ function useVolumesMain() {
3233
sortField,
3334
sortDirection,
3435
resetDefaultColumnVisibility,
35-
} = useTableState<TableColumnId, never>('hostd/v0/volumes', {
36+
} = useTableState('hostd/v0/volumes', {
3637
columns,
3738
columnsDefaultVisible,
3839
})
@@ -61,11 +62,6 @@ function useVolumesMain() {
6162
limit,
6263
})
6364

64-
const filteredTableColumns = useMemo(
65-
() => columns.filter((column) => enabledColumns.includes(column.id)),
66-
[enabledColumns]
67-
)
68-
6965
const isValidating = response.isValidating
7066
const error = response.error
7167
const datasetState = useDatasetState({
@@ -80,13 +76,13 @@ function useVolumesMain() {
8076
datasetFilteredTotal: datasetFiltered?.length || 0,
8177
datasetPageTotal: datasetPage?.length || 0,
8278
isLoading: response.isValidating,
83-
columns: filteredTableColumns,
79+
visibleColumns,
8480
dataset,
8581
datasetPage,
8682
offset,
8783
limit,
8884
configurableColumns,
89-
enabledColumns,
85+
visibleColumnIds,
9086
toggleColumnVisibility,
9187
setColumnsVisible,
9288
setColumnsHidden,

‎apps/renterd/components/Alerts/AlertsViewDropdownMenu.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export function AlertsViewDropdownMenu() {
2121
resetDefaultColumnVisibility,
2222
setColumnsVisible,
2323
setColumnsHidden,
24-
enabledColumns,
24+
visibleColumnIds,
2525
} = useAlerts()
2626

2727
const generalColumns = configurableColumns
@@ -62,14 +62,14 @@ export function AlertsViewDropdownMenu() {
6262
<MenuSectionLabelToggleAll
6363
label="General"
6464
columns={generalColumns.map((c) => c.value)}
65-
enabled={enabledColumns}
65+
enabled={visibleColumnIds}
6666
setColumnsVisible={setColumnsVisible}
6767
setColumnsHidden={setColumnsHidden}
6868
/>
6969
<BaseMenuItem>
7070
<PoolCombo
7171
options={generalColumns}
72-
values={enabledColumns}
72+
values={visibleColumnIds}
7373
onChange={(value) => toggleColumnVisibility(value)}
7474
/>
7575
</BaseMenuItem>

‎apps/renterd/components/Alerts/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { useAlerts } from '../../contexts/alerts'
66

77
export function Alerts() {
88
const {
9-
columns,
9+
visibleColumns,
1010
datasetPage,
1111
sortField,
1212
sortDirection,
@@ -32,7 +32,7 @@ export function Alerts() {
3232
sortableColumns={sortableColumns}
3333
pageSize={limit}
3434
data={datasetPage}
35-
columns={columns}
35+
columns={visibleColumns}
3636
sortDirection={sortDirection}
3737
sortField={sortField}
3838
toggleSort={toggleSort}

0 commit comments

Comments
 (0)