Skip to content

Commit 0de6979

Browse files
deekshithvarma256deekshithvarma256
committed
Add block range limit configuration and validation from UI
Signed-off-by: deekshith256 <[email protected]>
1 parent d93e3c8 commit 0de6979

File tree

3 files changed

+214
-80
lines changed

3 files changed

+214
-80
lines changed

‎client/src/components/Lists/Blocks.js

Lines changed: 134 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import BlockView from '../View/BlockView';
1515
import TransactionView from '../View/TransactionView';
1616
import MultiSelect from '../Styled/MultiSelect';
1717
import DatePicker from '../Styled/DatePicker';
18+
import SearchIcon from "@material-ui/icons/Search";
1819
import {
1920
blockListSearchType,
2021
blockRangeSearchType,
@@ -25,6 +26,12 @@ import {
2526
txnListType
2627
} from '../types';
2728
import { FormHelperText, TablePagination, TextField } from '@mui/material';
29+
import {
30+
MenuItem,
31+
Select
32+
} from "@material-ui/core";
33+
import { reg, rowsPerPageOptions, rangeLimitOptions, defaultRangeLimit, E001, E002, E003, E004, E005 } from "./constants";
34+
import { Info } from "@material-ui/icons";
2835

2936
/* istanbul ignore next */
3037
const styles = theme => {
@@ -36,6 +43,21 @@ const styles = theme => {
3643
overflow: 'visible !important'
3744
}
3845
},
46+
htinputs: {
47+
display: "flex",
48+
marginBottom: "15px",
49+
position: "relative"
50+
},
51+
errorText: {
52+
width: "100%",
53+
position: "absolute",
54+
left: "0px",
55+
bottom: "-20px",
56+
cursor: 'default'
57+
},
58+
startBlock: {
59+
marginRight: "5px"
60+
},
3961
partialHash: {
4062
textAlign: 'center',
4163
position: 'relative !important',
@@ -103,7 +125,8 @@ const styles = theme => {
103125
blockRangeRow: {
104126
marginBottom: '10px !important',
105127
marginLeft: '10px !important',
106-
justifyContent: 'space-around',
128+
minWidth: "25vw",
129+
// justifyContent: 'space-around',
107130
'& > div': {
108131
marginRight: '10px'
109132
},
@@ -121,6 +144,10 @@ const styles = theme => {
121144
width: '40% !important'
122145
}
123146
},
147+
iconButton: {
148+
color: "#21295c",
149+
alignSelf: "center"
150+
}
124151
};
125152
};
126153
const tablePaginationStyle = {
@@ -133,11 +160,7 @@ const tablePaginationStyle = {
133160
alignItems: 'baseline'
134161
}
135162
};
136-
const rowsPerPageOptions = [5, 10, 25, 50, 100];
137-
const reg = new RegExp('^[0-9]{0,9}$');
138163
let timer;
139-
const E001 = 'Please enter valid Block Height';
140-
const E002 = 'Second number should be greater than first number';
141164
export class Blocks extends Component {
142165
constructor(props) {
143166
super(props);
@@ -162,6 +185,7 @@ export class Blocks extends Component {
162185
endBlock: '',
163186
rangeErr: '',
164187
brs: false,
188+
rangeLimit: defaultRangeLimit
165189
};
166190
}
167191

@@ -193,7 +217,7 @@ export class Blocks extends Component {
193217
this.searchBlockList(this.props.currentChannel);
194218
}
195219
if (
196-
prevState.page != this.state.page ||
220+
(!this.state.brs && prevState.page != this.state.page) ||
197221
prevState.rowsPerPage != this.state.rowsPerPage ||
198222
this.state.searchClick
199223
) {
@@ -204,11 +228,6 @@ export class Blocks extends Component {
204228
if(prevProps.blockRangeLoaded!=this.props.blockRangeLoaded){
205229
if(this.props.blockRangeLoaded){
206230
if (typeof this.props.blockRangeSearch === 'string') {this.setState({ rangeErr: this.props.blockRangeSearch})}
207-
else {
208-
if(this.state.rangeErr && this.state.rangeErr!==E001 && this.state.rangeErr!=E002){
209-
this.setState({ rangeErr: '' })
210-
}
211-
}
212231
} else {
213232
if(this.state.rangeErr)
214233
this.setState({ rangeErr: '' })
@@ -319,8 +338,16 @@ export class Blocks extends Component {
319338
});
320339
return;
321340
}
341+
if (this.state.endBlock - this.state.startBlock >= this.state.rangeLimit) {
342+
if (this.state.rangeLimit < 100) {
343+
this.setState({ rangeErr: E004(this.state.rangeLimit) });
344+
} else {
345+
this.setState({ rangeErr: E003 });
346+
}
347+
return;
348+
}
322349
this.searchBlockRange();
323-
this.setState({ search: true, brs: true });
350+
this.setState({ search: true, brs: true, page: 0 });
324351
};
325352
handleClearSearch = () => {
326353
if (this.interval !== undefined) {
@@ -538,11 +565,26 @@ export class Blocks extends Component {
538565
];
539566

540567
render() {
541-
const blockList = this.state.brs ?
542-
(typeof this.props.blockRangeSearch!=='string' && this.props.blockRangeLoaded ? this.props.blockRangeSearch : [])
543-
: this.props.blockListSearch
544-
const noOfPages = this.props.blockListSearchTotalPages;
545-
const { transaction, txnList, classes } = this.props;
568+
const reversedBlockRangeList =
569+
typeof this.props.blockRangeSearch !== "string" &&
570+
this.props.blockRangeLoaded
571+
? this.props.blockRangeSearch
572+
.slice()
573+
.sort()
574+
.reverse()
575+
: [];
576+
const blockList = this.state.brs
577+
? reversedBlockRangeList.slice(
578+
this.state.page * this.state.rowsPerPage,
579+
(this.state.page + 1) * this.state.rowsPerPage
580+
)
581+
: this.props.blockListSearch;
582+
const noOfPages = this.state.brs
583+
? typeof this.props.blockRangeSearch !== "string" &&
584+
this.props.blockRangeLoaded &&
585+
Math.ceil(this.props.blockRangeSearch.length / this.state.rowsPerPage)
586+
: this.props.blockListSearchTotalPages;
587+
const { transaction, txnList, classes } = this.props;
546588
const { blockHash, dialogOpen, dialogOpenBlockHash } = this.state;
547589
return (
548590
<div>
@@ -658,48 +700,85 @@ export class Blocks extends Component {
658700
</div>
659701
<form onSubmit={this.handleRangeSubmit}>
660702
<div className={`${classes.filter} row searchRow`}>
661-
<span className={classes.text}>Block Height:</span>
662-
<div
663-
className={`${classes.filterElement} col-md-3 ${classes.blockRangeRow}`}
703+
<span className={classes.text}>
704+
No of Blocks
705+
<sup title={E005} style={{ padding: "3px" }}>
706+
<Info style={{ fontSize: "medium" }} />
707+
</sup>
708+
</span>
709+
<Select
710+
id='rangeLimitDropdown'
711+
className='rangeLimitDropdown'
712+
value={this.state.rangeLimit}
713+
onChange={e => this.setState({ rangeLimit: e.target.value })}
714+
displayEmpty
715+
inputProps={{ "aria-label": "Without label" }}
716+
disableUnderline
664717
>
665-
<TextField
666-
type="text"
667-
name="startBlock"
668-
value={this.state.startBlock}
669-
onChange={e => this.handleRangeChange(e)}
670-
variant="standard"
671-
InputLabelProps={{ shrink: true }}
672-
label="From"
673-
error={Boolean(this.state.rangeErr)}
674-
size="small"
675-
/>
676-
<TextField
677-
type="text"
678-
name="endBlock"
679-
value={this.state.endBlock}
680-
onChange={e => this.handleRangeChange(e)}
681-
variant="standard"
682-
InputLabelProps={{ shrink: true }}
683-
label="To"
684-
error={Boolean(this.state.rangeErr)}
685-
size="small"
686-
/>
687-
</div>
718+
{rangeLimitOptions.map(opt => (
719+
<MenuItem
720+
key={opt}
721+
value={opt}
722+
>
723+
{opt}
724+
</MenuItem>
725+
))}
726+
</Select>
727+
688728
<div
689-
className={classes.iconButton}
690-
type="submit"
691-
onClick={e => this.handleRangeSubmit(e)}
729+
className={`${classes.filterElement} ${classes.blockRangeRow}`}
730+
style={{ width: "50vw" }}
692731
>
693-
<SearchIcon />
732+
<div style={{ whiteSpace: "no-wrap", alignSelf: "center" }}>
733+
Block No:
734+
</div>
735+
<div className={classes.htinputs}>
736+
<TextField
737+
type="text"
738+
name="startBlock"
739+
className={classes.startBlock}
740+
id='startBlock'
741+
style={{ marginRight: "5px" }}
742+
value={this.state.startBlock}
743+
onChange={e => this.handleRangeChange(e)}
744+
variant="standard"
745+
InputLabelProps={{ shrink: true }}
746+
label="From"
747+
error={Boolean(this.state.rangeErr)}
748+
size="small"
749+
/>
750+
<TextField
751+
type="text"
752+
name="endBlock"
753+
id='endBlock'
754+
value={this.state.endBlock}
755+
onChange={e => this.handleRangeChange(e)}
756+
variant="standard"
757+
InputLabelProps={{ shrink: true }}
758+
label="To"
759+
error={Boolean(this.state.rangeErr)}
760+
size="small"
761+
/>
762+
<div className={`${classes.errorText}`}>
763+
{
764+
<FormHelperText title={this.state.rangeErr}
765+
style={{ color: "rgb(211, 47, 47)", whiteSpace: "nowrap", overflow:'hidden', textOverflow:'ellipsis' }}
766+
>
767+
{this.state.rangeErr}
768+
</FormHelperText>
769+
}
770+
</div>
771+
</div>
772+
<div
773+
id='blockRangeSearchIcon'
774+
className={classes.iconButton}
775+
type="submit"
776+
onClick={e => this.handleRangeSubmit(e)}
777+
>
778+
<SearchIcon />
779+
</div>
694780
</div>
695781
</div>
696-
<div className={`${classes.filter} row searchRow`}>
697-
{this.state.rangeErr && (
698-
<FormHelperText style={{marginLeft: '120px', color: 'rgb(211, 47, 47)'}}>
699-
{this.state.rangeErr}
700-
</FormHelperText>
701-
)}
702-
</div>
703782
</form>
704783
<ReactTable
705784
data={blockList || []}
@@ -725,7 +804,7 @@ export class Blocks extends Component {
725804
style={{ height: '750px' }}
726805
showPaginationBottom={false}
727806
/>
728-
{(blockList?.length > 0 && !this.state.brs) && (
807+
{blockList?.length > 0 && (
729808
<TablePagination
730809
page={this.state.page}
731810
sx={tablePaginationStyle}

0 commit comments

Comments
 (0)