Add blocks view pagination and block height search

Signed-off-by: deekshith256 <deekshithvarma256@gmail.com>
hyperledger-labs · May 29, 2023 · 2d6bb44 · 2d6bb44
1 parent e386317
commit 2d6bb44
Show file tree

Hide file tree

Showing 21 changed files with 679 additions and 249 deletions.
diff --git a/client/src/components/Header/HeaderView.js b/client/src/components/Header/HeaderView.js
@@ -42,7 +42,6 @@ import { authOperations } from '../../state/redux/auth';
 import {
 	currentChannelType,
 	channelsType,
-	getBlockListType,
 	getBlocksPerHourType,
 	getBlocksPerMinType,
 	getChaincodeListType,
@@ -54,7 +53,8 @@ import {
 	getTransactionByOrgType,
 	getTransactionPerHourType,
 	getTransactionPerMinType,
-	refreshType
+	refreshType,
+	getBlockListSearchType
 } from '../types';
 
 const {
@@ -70,7 +70,7 @@ const {
 } = chartOperations;
 
 const {
-	blockList,
+	blockListSearch,
 	chaincodeList,
 	channels,
 	peerList,
@@ -79,7 +79,9 @@ const {
 } = tableOperations;
 
 const { currentChannelSelector } = chartSelectors;
-const { channelsSelector, transactionListSearchPageParamSelector, transactionListSearchQuerySelector } = tableSelectors;
+const { channelsSelector, transactionListSearchPageParamSelector, 
+		transactionListSearchQuerySelector,
+		blockListSearchPageParamSelector, blockListSearchQuerySelector} = tableSelectors;
 /* istanbul ignore next */
 const styles = theme => {
 	const { type } = theme.palette;
@@ -449,7 +451,9 @@ export class HeaderView extends Component {
 
 	async syncData(currentChannel) {
 		const {
-			getBlockList,
+			getBlockListSearch,
+			blockListSearchPageParam,
+			blockListSearchQuery,
 			getBlocksPerHour,
 			getBlocksPerMin,
 			getChaincodeList,
@@ -468,7 +472,7 @@ export class HeaderView extends Component {
 		} = this.props;
 
 		await Promise.all([
-			getBlockList(currentChannel),
+			getBlockListSearch( currentChannel, blockListSearchQuery, blockListSearchPageParam),
 			getBlocksPerHour(currentChannel),
 			getBlocksPerMin(currentChannel),
 			getChaincodeList(currentChannel),
@@ -670,7 +674,7 @@ export class HeaderView extends Component {
 HeaderView.propTypes = {
 	currentChannel: currentChannelType.isRequired,
 	channels: channelsType.isRequired,
-	getBlockList: getBlockListType.isRequired,
+	getBlockListSearch: getBlockListSearchType.isRequired,
 	getBlocksPerHour: getBlocksPerHourType.isRequired,
 	getBlocksPerMin: getBlocksPerMinType.isRequired,
 	getChangeChannel: getChangeChannelType.isRequired,
@@ -694,11 +698,13 @@ const mapStateToProps = state => {
 		mode: modeSelector(state),
 		transactionListSearchPageParam: transactionListSearchPageParamSelector(state),
 		transactionListSearchQuery: transactionListSearchQuerySelector(state),
+		blockListSearchPageParam: blockListSearchPageParamSelector(state),
+		blockListSearchQuery: blockListSearchQuerySelector(state)
 	};
 };
 
 const mapDispatchToProps = {
-	getBlockList: blockList,
+	getBlockListSearch: blockListSearch, 
 	getBlocksPerHour: blockPerHour,
 	getBlocksPerMin: blockPerMin,
 	getChaincodeList: chaincodeList,

diff --git a/client/src/components/Header/HeaderView.spec.js b/client/src/components/Header/HeaderView.spec.js
@@ -42,7 +42,8 @@ const setup = prop => {
 		currentChannel:
 			'f3ed9c95452b184a4d5d66e25ba47f866ad6907a31f28f8067ca5596f64d8e0f',
 		notification: {},
-		getBlockList: jest.fn(),
+		getBlockListSearch: jest.fn(),
+		getTransactionListSearch: jest.fn(),
 		getBlocksPerHour: jest.fn(),
 		getBlocksPerMin: jest.fn(),
 		getChaincodeList: jest.fn(),