github.com/shyftnetwork/go-empyrean@v1.8.3-0.20191127201940-fbfca9338f04/shyftBlockExplorerUI/src/components/table/accounts/accountRows.js (about)

     1  import React, { Component } from 'react';
     2  import AccountsTable from './accountsTable';
     3  import classes from './accounts.css';
     4  import axios from "axios/index";
     5  import ErrorMessage from './errorMessage';
     6  import {API_URL} from "../../../constants/apiURL";
     7  
     8  class AccountTable extends Component {
     9      constructor(props) {
    10          super(props);
    11          this.state = {
    12              data: [],
    13              emptyDataSet: true
    14          };
    15      }
    16  
    17      async componentDidMount() {
    18          try {
    19              const response = await axios.get(`${API_URL}/get_all_accounts`);
    20              if(response.data === "\n") {
    21                  this.setState({emptyDataSet: true})                                   
    22              } else {
    23                  this.setState({emptyDataSet: false})                  
    24              }      
    25              await this.setState({data: response.data});
    26          } catch (err) {
    27              console.log(err);
    28          }
    29      }
    30  
    31      render() {
    32          let startNum = 1;
    33          let table;    
    34          if(this.state.emptyDataSet === false && this.state.data.length > 0  ) {
    35          const sorted = [...this.state.data];
    36          sorted.sort((a, b) => Number(a.Balance) > Number(b.Balance)); 
    37          table = sorted.reverse().map((data, i) => {
    38              const conversion = Number(data.Balance) / 10000000000000000000;
    39              const total = sorted
    40                  .map(num => Number(num.Balance) / 10000000000000000000)
    41                  .reduce((acc, cur) => acc + cur ,0);
    42              const percentage = ( (conversion / total) *100);
    43              return <AccountsTable
    44                  key={`${data.addr}${i}`}
    45                  Rank={startNum++}
    46                  Percentage={percentage.toFixed(2)}
    47                  Addr={data.Addr}
    48                  Balance={conversion}
    49                  AccountNonce={data.AccountNonce}
    50                  detailAccountHandler={this.props.detailAccountHandler}
    51              />
    52          });
    53      }
    54            
    55          let combinedClasses = ['responsive-table', classes.table];
    56          return (      
    57              <div>     
    58                  {
    59                     this.state.emptyDataSet === false && this.state.data.length > 0  ?  
    60                          <table className={combinedClasses.join(' ')}>
    61                              <thead>
    62                                  <tr>
    63                                      <th scope="col" className={classes.thItem}>Rank</th>
    64                                      <th scope="col" className={classes.thItem}>Address</th>
    65                                      <th scope="col" className={classes.thItem}>Balance</th>
    66                                      <th scope="col" className={classes.thItem}>Percentage</th>
    67                                      <th scope="col" className={classes.thItem}>TxCount</th>
    68                                  </tr>
    69                              </thead>
    70                              { table } 
    71                          </table>
    72                      : <ErrorMessage />
    73                  } 
    74              </div>
    75          );
    76      }
    77  }
    78  export default AccountTable;