Skip to content

Commit e9594df

Browse files
DaryaVorontsovaDaryaVorontsova
committed
Fix bugs
1 parent a8deff0 commit e9594df

File tree

11 files changed

+47
-29
lines changed

11 files changed

+47
-29
lines changed

‎src/components/PaginatedTable/PaginatedTable.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import React from 'react';
33
import {usePaginatedTableState} from './PaginatedTableContext';
44
import {TableChunksRenderer} from './TableChunksRenderer';
55
import {TableHead} from './TableHead';
6+
import type {PaginatedTableId} from './constants';
67
import {DEFAULT_TABLE_ROW_HEIGHT} from './constants';
78
import {b} from './shared';
89
import type {
@@ -22,7 +23,7 @@ export interface PaginatedTableProps<T, F> {
2223
initialEntitiesCount?: number;
2324
fetchData: FetchData<T, F>;
2425
filters?: F;
25-
tableName: string;
26+
tableName: PaginatedTableId;
2627
columns: Column<T>[];
2728
getRowClassName?: GetRowClassName<T>;
2829
rowHeight?: number;
@@ -33,7 +34,6 @@ export interface PaginatedTableProps<T, F> {
3334
containerClassName?: string;
3435
onDataFetched?: (data: PaginatedTableData<T>) => void;
3536
keepCache?: boolean;
36-
useColumnsIdsInRequest?: boolean;
3737
}
3838

3939
const DEFAULT_PAGINATION_LIMIT = 20;
@@ -54,7 +54,6 @@ export const PaginatedTable = <T, F>({
5454
containerClassName,
5555
onDataFetched,
5656
keepCache = true,
57-
useColumnsIdsInRequest = true,
5857
}: PaginatedTableProps<T, F>) => {
5958
// Get state and setters from context
6059
const {tableState, setSortParams, setTotalEntities, setFoundEntities, setIsInitialLoad} =
@@ -124,7 +123,6 @@ export const PaginatedTable = <T, F>({
124123
renderEmptyDataMessage={renderEmptyDataMessage}
125124
onDataFetched={handleDataFetched}
126125
keepCache={keepCache}
127-
useColumnsIdsInRequest={useColumnsIdsInRequest}
128126
/>
129127
</tbody>
130128
</table>

‎src/components/PaginatedTable/TableChunk.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import {ResponseError} from '../Errors/ResponseError';
88

99
import {usePaginatedTableState} from './PaginatedTableContext';
1010
import {EmptyTableRow, LoadingTableRow, TableRow} from './TableRow';
11+
import type {PaginatedTableId} from './constants';
12+
import {shouldSendColumnIds} from './constants';
1113
import i18n from './i18n';
1214
import type {
1315
Column,
@@ -32,7 +34,7 @@ interface TableChunkProps<T, F> {
3234
sortParams?: SortParams;
3335
shouldFetch: boolean;
3436
shouldRender: boolean;
35-
tableName: string;
37+
tableName: PaginatedTableId;
3638

3739
fetchData: FetchData<T, F>;
3840
getRowClassName?: GetRowClassName<T>;
@@ -41,7 +43,6 @@ interface TableChunkProps<T, F> {
4143
onDataFetched: (data?: PaginatedTableData<T>) => void;
4244

4345
keepCache?: boolean;
44-
useColumnsIdsInRequest?: boolean;
4546
}
4647

4748
// Memoisation prevents chunks rerenders that could cause perfomance issues on big tables
@@ -62,17 +63,18 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
6263
shouldFetch,
6364
shouldRender,
6465
keepCache,
65-
useColumnsIdsInRequest,
6666
}: TableChunkProps<T, F>) {
6767
const [isTimeoutActive, setIsTimeoutActive] = React.useState(true);
6868
const [autoRefreshInterval] = useAutoRefreshInterval();
6969
const {noBatching} = usePaginatedTableState();
7070

71+
const preserveColsOrderInRequest = shouldSendColumnIds(tableName);
72+
7173
const columnsIds = React.useMemo(
7274
() =>
7375
//sort ids to prevent refetch if only order was changed
74-
useColumnsIdsInRequest ? columns.map((column) => column.name).toSorted() : [],
75-
[columns, useColumnsIdsInRequest],
76+
preserveColsOrderInRequest ? columns.map((column) => column.name).toSorted() : [],
77+
[columns, preserveColsOrderInRequest],
7678
);
7779

7880
const queryParams = {

‎src/components/PaginatedTable/TableChunksRenderer.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22

33
import {TableChunk} from './TableChunk';
4+
import type {PaginatedTableId} from './constants';
45
import {b} from './shared';
56
import type {
67
Column,
@@ -22,14 +23,13 @@ export interface TableChunksRendererProps<T, F> {
2223
columns: Column<T>[];
2324
fetchData: FetchData<T, F>;
2425
filters?: F;
25-
tableName: string;
26+
tableName: PaginatedTableId;
2627
sortParams?: SortParams;
2728
getRowClassName?: GetRowClassName<T>;
2829
renderErrorMessage?: RenderErrorMessage;
2930
renderEmptyDataMessage?: RenderEmptyDataMessage;
3031
onDataFetched: (data?: PaginatedTableData<T>) => void;
3132
keepCache: boolean;
32-
useColumnsIdsInRequest?: boolean;
3333
}
3434

3535
export const TableChunksRenderer = <T, F>({
@@ -48,7 +48,6 @@ export const TableChunksRenderer = <T, F>({
4848
renderEmptyDataMessage,
4949
onDataFetched,
5050
keepCache,
51-
useColumnsIdsInRequest,
5251
}: TableChunksRendererProps<T, F>) => {
5352
const chunkStates = useScrollBasedChunks({
5453
scrollContainerRef,
@@ -127,7 +126,6 @@ export const TableChunksRenderer = <T, F>({
127126
shouldFetch={chunkState.shouldFetch}
128127
shouldRender={chunkState.shouldRender}
129128
keepCache={keepCache}
130-
useColumnsIdsInRequest={useColumnsIdsInRequest}
131129
/>
132130
);
133131
},
@@ -146,7 +144,6 @@ export const TableChunksRenderer = <T, F>({
146144
rowHeight,
147145
sortParams,
148146
tableName,
149-
useColumnsIdsInRequest,
150147
],
151148
);
152149

‎src/components/PaginatedTable/constants.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,25 @@ export const DEFAULT_REQUEST_TIMEOUT = 200;
1616
export const DEFAULT_TABLE_ROW_HEIGHT = 41;
1717

1818
export const DEFAULT_INTERSECTION_OBSERVER_MARGIN = '100%';
19+
20+
export const PAGINATED_TABLE_IDS = {
21+
NODES: 'nodes',
22+
STORAGE_NODES: 'storage-nodes',
23+
STORAGE_GROUPS: 'storage-groups',
24+
TOPIC_DATA: 'topic-data',
25+
NODE_PEERS: 'node-peers',
26+
} as const;
27+
28+
export type PaginatedTableId = (typeof PAGINATED_TABLE_IDS)[keyof typeof PAGINATED_TABLE_IDS];
29+
30+
export const PAGINATED_TABLE_COLUMN_IDS_IN_REQUEST: Record<PaginatedTableId, boolean> = {
31+
[PAGINATED_TABLE_IDS.NODES]: true,
32+
[PAGINATED_TABLE_IDS.STORAGE_NODES]: true,
33+
[PAGINATED_TABLE_IDS.STORAGE_GROUPS]: true,
34+
[PAGINATED_TABLE_IDS.TOPIC_DATA]: true,
35+
[PAGINATED_TABLE_IDS.NODE_PEERS]: false,
36+
};
37+
38+
export function shouldSendColumnIds(tableId: PaginatedTableId): boolean {
39+
return PAGINATED_TABLE_COLUMN_IDS_IN_REQUEST[tableId] ?? false;
40+
}

‎src/containers/Node/NodeNetwork/NodeNetworkTable.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22

3-
import {ResizeablePaginatedTable} from '../../../components/PaginatedTable';
3+
import {PAGINATED_TABLE_IDS, ResizeablePaginatedTable} from '../../../components/PaginatedTable';
44
import type {PaginatedTableData} from '../../../components/PaginatedTable';
55
import {renderPaginatedTableErrorMessage} from '../../../utils/renderPaginatedTableErrorMessage';
66
import type {Column} from '../../../utils/tableUtils/types';
@@ -42,8 +42,7 @@ export function NodeNetworkTable({
4242
columns={columns}
4343
fetchData={getNodePeers}
4444
filters={filters}
45-
tableName={i18n('table_node-peers')}
46-
useColumnsIdsInRequest={false}
45+
tableName={PAGINATED_TABLE_IDS.NODE_PEERS}
4746
renderErrorMessage={renderPaginatedTableErrorMessage}
4847
renderEmptyDataMessage={renderEmptyDataMessage}
4948
onDataFetched={onDataFetched}

‎src/containers/Node/NodeNetwork/columns.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ function getPeerConnectTimeColumn<T extends {ConnectTime?: string}>(): Column<T>
3535
};
3636
}
3737

38-
function renderSent(bytes?: number | string) {
38+
function renderBytes(bytes?: number | string) {
3939
return formatBytes({
4040
value: bytes,
4141
size: 'mb',
@@ -50,7 +50,7 @@ function getPeerSentBytesColumn<T extends {BytesSend?: string | number}>(): Colu
5050
align: DataTable.RIGHT,
5151
width: 140,
5252
resizeMinWidth: 120,
53-
render: ({row}) => renderSent(row.BytesSend) || EMPTY_DATA_PLACEHOLDER,
53+
render: ({row}) => renderBytes(row.BytesSend) || EMPTY_DATA_PLACEHOLDER,
5454
};
5555
}
5656

@@ -61,7 +61,7 @@ function getPeerReceivedBytesColumn<T extends {BytesReceived?: string | number}>
6161
align: DataTable.RIGHT,
6262
width: 160,
6363
resizeMinWidth: 130,
64-
render: ({row}) => renderSent(row.BytesReceived) || EMPTY_DATA_PLACEHOLDER,
64+
render: ({row}) => renderBytes(row.BytesReceived) || EMPTY_DATA_PLACEHOLDER,
6565
};
6666
}
6767

‎src/containers/Node/NodeNetwork/i18n/en.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,5 @@
44
"field_received-bytes": "Received Bytes",
55
"alert_no-network-data": "No network data",
66
"search-placeholder": "Search peers",
7-
"field_peers": "Peers",
8-
"table_node-peers": "Node Peers"
7+
"field_peers": "Peers"
98
}

‎src/containers/Nodes/NodesTable.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22

33
import {Illustration} from '../../components/Illustration';
44
import type {PaginatedTableData} from '../../components/PaginatedTable';
5-
import {ResizeablePaginatedTable} from '../../components/PaginatedTable';
5+
import {PAGINATED_TABLE_IDS, ResizeablePaginatedTable} from '../../components/PaginatedTable';
66
import {NODES_COLUMNS_WIDTH_LS_KEY} from '../../components/nodesColumns/constants';
77
import type {NodesColumn} from '../../components/nodesColumns/types';
88
import type {NodesFilters} from '../../store/reducers/nodes/types';
@@ -94,7 +94,7 @@ export function NodesTable({
9494
renderEmptyDataMessage={renderEmptyDataMessage}
9595
getRowClassName={getRowClassName}
9696
filters={tableFilters}
97-
tableName="nodes"
97+
tableName={PAGINATED_TABLE_IDS.NODES}
9898
onDataFetched={onDataFetched}
9999
/>
100100
);

‎src/containers/Storage/PaginatedStorageGroupsTable/PaginatedStorageGroupsTable.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22

33
import {LoaderWrapper} from '../../../components/LoaderWrapper/LoaderWrapper';
44
import type {RenderErrorMessage} from '../../../components/PaginatedTable';
5-
import {ResizeablePaginatedTable} from '../../../components/PaginatedTable';
5+
import {PAGINATED_TABLE_IDS, ResizeablePaginatedTable} from '../../../components/PaginatedTable';
66
import {
77
useCapabilitiesLoaded,
88
useStorageGroupsHandlerAvailable,
@@ -103,7 +103,7 @@ export const PaginatedStorageGroupsTable = ({
103103
renderErrorMessage={renderErrorMessage}
104104
renderEmptyDataMessage={renderEmptyDataMessage}
105105
filters={tableFilters}
106-
tableName="storage-groups"
106+
tableName={PAGINATED_TABLE_IDS.STORAGE_GROUPS}
107107
/>
108108
</LoaderWrapper>
109109
);

‎src/containers/Storage/PaginatedStorageNodesTable/PaginatedStorageNodesTable.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22

33
import type {PaginatedTableData, RenderErrorMessage} from '../../../components/PaginatedTable';
4-
import {ResizeablePaginatedTable} from '../../../components/PaginatedTable';
4+
import {PAGINATED_TABLE_IDS, ResizeablePaginatedTable} from '../../../components/PaginatedTable';
55
import type {NodesColumn} from '../../../components/nodesColumns/types';
66
import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
77
import type {PreparedStorageNode, VisibleEntities} from '../../../store/reducers/storage/types';
@@ -109,7 +109,7 @@ export const PaginatedStorageNodesTable = ({
109109
renderEmptyDataMessage={renderEmptyDataMessage}
110110
getRowClassName={getRowUnavailableClassName}
111111
filters={tableFilters}
112-
tableName="storage-nodes"
112+
tableName={PAGINATED_TABLE_IDS.STORAGE_NODES}
113113
onDataFetched={onDataFetched}
114114
/>
115115
);

0 commit comments

Comments
 (0)