Skip to content

Commit 55cfba2

Browse files
afposchenriederafposchenrieder
committed
Adding Epoch Block Table.
1 parent 0fc51e4 commit 55cfba2

File tree

11 files changed

+338
-177
lines changed

11 files changed

+338
-177
lines changed

‎examples/explorer/src/components/Blocks/BlockPagedTable/BlockPagedTable.jsx‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import React, { useState } from 'react';
2+
import Pagination from 'react-bootstrap/Pagination';
3+
4+
import BlockTable from '../BlockTable/BlockTable';
5+
import { TABLE_PAGE_SIZE } from '../../../helpers/constants';
6+
import { blocksFromBlockConnection } from '../../../helpers/blockHelper';
7+
8+
const BlockPagedTable = ({ data, relay }) => {
9+
const [start, setStart] = useState(1);
10+
const blocks = blocksFromBlockConnection(data.blocks);
11+
const { pageInfo } = data.blocks;
12+
13+
const handlePageChange = (vars, callback) => {
14+
relay.refetch(
15+
{
16+
first: vars.first || null,
17+
last: vars.last || null,
18+
after: vars.after || null,
19+
before: vars.before || null
20+
},
21+
error => {
22+
if (error) {
23+
console.error(error); // eslint-disable-line no-console
24+
}
25+
callback();
26+
}
27+
);
28+
};
29+
30+
const openPreviousPage = () => {
31+
handlePageChange({ before: pageInfo.startCursor, last: TABLE_PAGE_SIZE }, () =>
32+
setStart(start - TABLE_PAGE_SIZE)
33+
);
34+
};
35+
36+
const openNextPage = () => {
37+
handlePageChange({ after: pageInfo.endCursor, first: TABLE_PAGE_SIZE }, () =>
38+
setStart(start + TABLE_PAGE_SIZE)
39+
);
40+
};
41+
42+
const openLastPage = () => {
43+
handlePageChange({ last: TABLE_PAGE_SIZE }, () => setStart(start - TABLE_PAGE_SIZE));
44+
};
45+
46+
const openFirstPage = () => {
47+
handlePageChange({ first: TABLE_PAGE_SIZE }, () => setStart(0));
48+
};
49+
50+
return (
51+
<>
52+
<BlockTable {...{ blocks }} />
53+
<Pagination>
54+
<Pagination.Item onClick={openLastPage} disabled={!pageInfo.hasNextPage}>
55+
Last
56+
</Pagination.Item>
57+
<Pagination.Prev onClick={openNextPage} disabled={!pageInfo.hasNextPage} />
58+
<Pagination.Ellipsis disabled />
59+
<Pagination.Next onClick={openPreviousPage} disabled={!pageInfo.hasPreviousPage} />
60+
<Pagination.Item onClick={openFirstPage} disabled={!pageInfo.hasPreviousPage}>
61+
First
62+
</Pagination.Item>
63+
</Pagination>
64+
</>
65+
);
66+
};
67+
68+
export default BlockPagedTable;

‎examples/explorer/src/components/Blocks/BlockTable/BlockTable.jsx‎

Lines changed: 47 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -1,125 +1,64 @@
1-
import React, { useState } from 'react';
1+
import React from 'react';
22
import Table from 'react-bootstrap/Table';
3-
import Pagination from 'react-bootstrap/Pagination';
43

54
import graphql from 'babel-plugin-relay/macro';
6-
import { createRefetchContainer } from 'react-relay';
5+
import { createFragmentContainer } from 'react-relay';
76

8-
import BlockTablePage from '../BlockTablePage/BlockTablePage';
9-
import { TABLE_PAGE_SIZE } from '../../../helpers/constants';
7+
import BlockLink from '../../Commons/BlockLink/BlockLink';
8+
import EpochLink from '../../Commons/EpochLink/EpochLink';
109

11-
const getBlocksFromConnection = data => {
12-
return data.allBlocks.edges.map(edge => edge.node);
10+
const orderBlocks = blocks => {
11+
return blocks.sort((b1, b2) => Number(b2.chainLength) - Number(b1.chainLength));
1312
};
1413

15-
const BlockTable = ({ data, relay }) => {
16-
const [start, setStart] = useState(1);
17-
const blocks = getBlocksFromConnection(data);
18-
const { pageInfo } = data.allBlocks;
19-
20-
const handlePageChange = (vars, callback) => {
21-
relay.refetch(
22-
{
23-
first: vars.first || null,
24-
last: vars.last || null,
25-
after: vars.after || null,
26-
before: vars.before || null
27-
},
28-
error => {
29-
if (error) {
30-
console.error(error); // eslint-disable-line no-console
31-
}
32-
callback();
33-
}
34-
);
35-
};
36-
37-
const openPreviousPage = () => {
38-
handlePageChange({ before: pageInfo.startCursor, last: TABLE_PAGE_SIZE }, () =>
39-
setStart(start - TABLE_PAGE_SIZE)
40-
);
41-
};
42-
43-
const openNextPage = () => {
44-
handlePageChange({ after: pageInfo.endCursor, first: TABLE_PAGE_SIZE }, () =>
45-
setStart(start + TABLE_PAGE_SIZE)
46-
);
47-
};
48-
49-
const openLastPage = () => {
50-
handlePageChange({ last: TABLE_PAGE_SIZE }, () => setStart(start - TABLE_PAGE_SIZE));
51-
};
52-
53-
const openFirstPage = () => {
54-
handlePageChange({ first: TABLE_PAGE_SIZE }, () => setStart(0));
55-
};
56-
14+
const BlockTable = ({ blocks }) => {
15+
const orderedBlocks = orderBlocks(blocks);
5716
return (
58-
<>
59-
<Table striped bordered hover>
60-
<thead>
17+
<Table striped bordered hover>
18+
<thead>
19+
<tr>
20+
<th>Chain Length</th>
21+
<th>Hash</th>
22+
<th>Epoch</th>
23+
<th>Slot</th>
24+
<th>Tx count</th>
25+
</tr>
26+
</thead>
27+
<tbody>
28+
{orderedBlocks.map(block => (
6129
<tr>
62-
<th>Chain Length</th>
63-
<th>Hash</th>
64-
<th>Epoch</th>
65-
<th>Slot</th>
66-
<th>Tx count</th>
30+
<td>
31+
<BlockLink chainLength={block.chainLength} />
32+
</td>
33+
<td>
34+
<BlockLink id={block.id} />
35+
</td>
36+
<td>
37+
<EpochLink number={block.date.epoch.id} />
38+
</td>
39+
<td>{block.date.slot}</td>
40+
<td>{block.transactions.length}</td>
6741
</tr>
68-
</thead>
69-
<BlockTablePage {...{ blocks }} />
70-
</Table>
71-
<Pagination>
72-
<Pagination.Item onClick={openLastPage} disabled={!pageInfo.hasNextPage}>
73-
Last
74-
</Pagination.Item>
75-
<Pagination.Prev onClick={openNextPage} disabled={!pageInfo.hasNextPage} />
76-
<Pagination.Ellipsis disabled />
77-
<Pagination.Next onClick={openPreviousPage} disabled={!pageInfo.hasPreviousPage} />
78-
<Pagination.Item onClick={openFirstPage} disabled={!pageInfo.hasPreviousPage}>
79-
First
80-
</Pagination.Item>
81-
</Pagination>
82-
</>
42+
))}
43+
</tbody>
44+
</Table>
8345
);
8446
};
8547

86-
export default createRefetchContainer(
87-
BlockTable,
88-
{
89-
data: graphql`
90-
fragment BlockTable_data on Query
91-
@argumentDefinitions(
92-
first: { type: "Int" }
93-
last: { type: "Int" }
94-
after: { type: "BlockCursor" }
95-
before: { type: "BlockCursor" }
96-
) {
97-
allBlocks(first: $first, last: $last, after: $after, before: $before) {
98-
edges {
99-
cursor
100-
node {
101-
...BlockTablePage_blocks
102-
}
103-
}
104-
pageInfo {
105-
hasNextPage
106-
hasPreviousPage
107-
endCursor
108-
startCursor
109-
}
110-
totalCount
48+
export default createFragmentContainer(BlockTable, {
49+
blocks: graphql`
50+
fragment BlockTable_blocks on Block @relay(plural: true) {
51+
id
52+
date {
53+
epoch {
54+
id
11155
}
56+
slot
57+
}
58+
chainLength
59+
transactions {
60+
id
11261
}
113-
`
114-
},
115-
graphql`
116-
query BlockTableRefetchQuery(
117-
$first: Int
118-
$last: Int
119-
$after: BlockCursor
120-
$before: BlockCursor
121-
) {
122-
...BlockTable_data @arguments(first: $first, last: $last, after: $after, before: $before)
12362
}
12463
`
125-
);
64+
});

‎examples/explorer/src/components/Blocks/BlockTablePage/BlockTablePage.jsx‎

Lines changed: 0 additions & 53 deletions
This file was deleted.

0 commit comments

Comments
 (0)