more UI improvements

src/components/Validators/ValidatorReport.tsx

@@ -2,11 +2,14 @@ import React from "react";
 import { Form, Table, Button, Spinner} from "react-bootstrap";
 import axios from "axios";
 import Pagination from 'react-bootstrap/Pagination'
+import moment from 'moment'
 
 import { alternativeBackendApis } from "../../config"
 
 import { ValidatorApiResponse } from "../../types";
 
+const reportDateFormat = 'DD-MM-yyyy';
+
 interface IProps {
 }
 
@@ -36,8 +39,8 @@ class ValidatorReport extends React.Component<IProps, IState> {
     this.searchClicked = this.searchClicked.bind(this);
   }
 
-  componentDidUpdate(prevProps: IProps, prevState: IState) {
-    let { address, blockStart, blockEnd, page, search } = this.state;
+  componentDidUpdate = (prevProps: IProps, prevState: IState) => {
+    const { address, blockStart, blockEnd, page, search } = this.state;
 
     if(search) {
       console.log(`Fetching transactions`);
@@ -47,37 +50,37 @@ class ValidatorReport extends React.Component<IProps, IState> {
     }
   }
 
-  accountTxFilterChanged(address: string) {
+  accountTxFilterChanged = (address: string) => {
     if(this.state.address !== address) {
       this.setState({...this.state, address: address });
     }
   }
 
-  startBlockFilterChanged(blockStart: number) {
+  startBlockFilterChanged = (blockStart: number) => {
     if(this.state.blockStart !== blockStart) {
       this.setState({...this.state, blockStart: blockStart });
     }
   }
 
-  endBlockFilterChanged(blockEnd: number) {
+  endBlockFilterChanged = (blockEnd: number) => {
     if(this.state.blockEnd !== blockEnd) {
       this.setState({...this.state, blockEnd: blockEnd });
     }
   }
 
-  totalPages(): number {
+  totalPages = (): number => {
     const pageSize = this.state.apiResponse?.pageSize ?? 50
     const result =  1 + (this.state.apiResponse?.totalCount ?? 1) / pageSize
     return Math.floor(result)
   }
   
-  changePage(page: number) {
+  changePage = (page: number) => {
     if(this.state.page !== page) {
       this.setState({...this.state, page: page, search: true, loading: true });
     }
   }
 
-  searchClicked() {
+  searchClicked = () => {
     if(!this.state.search) {
       this.setState({...this.state, page: 1, search: true, loading: true });
     }
@@ -106,14 +109,21 @@ class ValidatorReport extends React.Component<IProps, IState> {
             <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>
+        </Form>
         <>
         { !apiResponse ? (loading ? <Spinner animation="border" /> : <div/>) :
           (apiResponse.report && apiResponse.report.length == 0) ? <h4>No records found</h4> :
           <>
+            <div className="box" style={{textAlign: "left", fontSize: "1rem", fontFamily: "courier"}}>
+            {
+              `Validator Date: ${moment(apiResponse?.startTime).format(reportDateFormat)} - ${moment(apiResponse?.endTime).format(reportDateFormat)}\n
+              Description: I was an active validator from era/block ${apiResponse?.startEra}/${apiResponse?.startBlock} 
+              to era/block ${apiResponse?.endEra}/${apiResponse?.endBlock}\n
+              with stash account ${address}. 
+              (I was active in all the eras in this range and found a total of ${this.state.apiResponse?.totalBlocks} blocks)`
+            }
+            </div>
             <Pagination>
               {[...Array(this.totalPages()).keys()].map(i => 
                 <Pagination.Item key={i+1} active={i+1 === page} onClick={() => this.changePage(i+1)}>