Validator report page now has a simple pagination control

src/components/Validators/ValidatorReport.tsx

@@ -1,11 +1,12 @@
 import React from "react";
-import { Form, Table} from "react-bootstrap";
+import { Form, Table, Button} from "react-bootstrap";
 import axios from "axios";
 import Pagination from 'react-bootstrap/Pagination'
 
 import { alternativeBackendApis } from "../../config"
 
 import { ValidatorApiResponse } from "../../types";
+import { Left } from "react-bootstrap/lib/Media";
 
 interface IProps {
 }
@@ -15,7 +16,8 @@ interface IState {
     blockStart: number
     blockEnd: number
     page: number,
-    apiResponse: ValidatorApiResponse;
+    search: boolean,
+    apiResponse?: ValidatorApiResponse;
 }
 
 class ValidatorReport extends React.Component<IProps, IState> {
@@ -27,20 +29,20 @@ class ValidatorReport extends React.Component<IProps, IState> {
       blockStart: 0,
       blockEnd: 0,
       page: 1,
-      apiResponse: {} as ValidatorApiResponse
+      search: false
     };
     this.accountTxFilterChanged = this.accountTxFilterChanged.bind(this);
+    this.searchClicked = this.searchClicked.bind(this);
   }
 
   componentDidUpdate(prevProps: IProps, prevState: IState) {
-    let { address, blockStart, blockEnd, page } = this.state;
-
-    if(blockStart !== prevState.blockStart || blockEnd != prevState.blockEnd) {
+    let { address, blockStart, blockEnd, page, search } = this.state;
 
+    if(search) {
       console.log(`Fetching transactions`);
       const backend = `${alternativeBackendApis}/validator-report?addr=${address}&start_block=${blockStart}&end_block=${blockEnd}&page=${page}`;
 
-      axios.get(backend).then((response) => {this.setState({...this.state, apiResponse: response.data})});
+      axios.get(backend).then((response) => {this.setState({...this.state, apiResponse: response.data, search: false})});
     }
   }
 
@@ -70,41 +72,55 @@ class ValidatorReport extends React.Component<IProps, IState> {
   
   changePage(page: number) {
     if(this.state.page !== page) {
-      this.setState({...this.state, page: page });
+      this.setState({...this.state, page: page, search: true });
     }
   }
 
+  searchClicked() {
+    if(!this.state.search) {
+      this.setState({...this.state, page: 1, search: true });
+    }
+  }
 
   render() {
 
     const { address, blockStart, blockEnd, apiResponse, page } = this.state;
 
     return (
-      <div className="box">
+      <div className="box" style={{textAlign: "left"}}>
         <h3>Validator Report</h3>
         <Form>
           <Form.Group className="mb-3">
+            <Form.Label>Wallet address</Form.Label>
             <Form.Control type="address" placeholder="Wallet account" onChange={(e) => this.accountTxFilterChanged(e.target.value)} value={address}/>
             <Form.Text className="text-muted">
               48 character string starting with 5
             </Form.Text>
+          </Form.Group>
+          <Form.Group className="mb-3">
+            <Form.Label>Start Block</Form.Label>
             <Form.Control type="blockStart" placeholder="Start Block" onChange={(e) => this.startBlockFilterChanged(+e.target.value)} value={blockStart}/>
+          </Form.Group>
+          <Form.Group className="mb-3">
+            <Form.Label>End Block</Form.Label>
             <Form.Control type="blockEnd" placeholder="End Block" onChange={(e) => this.endBlockFilterChanged(+e.target.value)} value={blockEnd}/>
           </Form.Group>
         </Form>
+        <div className="box" style={{textAlign: "left"}}>
+          <Button variant="outline-light" onClick={this.searchClicked}>Search</Button>
+        </div>
         <>
-        { (!apiResponse || !apiResponse.report) ? <h4>No records found</h4> :
+        { !apiResponse ? <div/> :
+          (apiResponse.report && apiResponse.report.length == 0) ? <h4>No records found</h4> :
           <>
-            { (this.totalPages() <= 1) ? <div/> :
             <Pagination>
-              {[...Array(this.totalPages())].map((i) => {
-                <Pagination.Item key={i} active={i === page} onClick={() => this.changePage(i)}>
-                  {i}
+              {[...Array(this.totalPages()).keys()].map(i => 
+                <Pagination.Item key={i+1} active={i+1 === page} onClick={() => this.changePage(i+1)}>
+                  {i + 1}
                 </Pagination.Item>
-                })
+                )
               }
             </Pagination>
-            }
             
           <Table striped bordered hover size="sm">
             <thead>

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es2015",
     "lib": [
       "dom",
       "dom.iterable",