github.com/muhammedhassanm/blockchain@v0.0.0-20200120143007-697261defd4d/build-blockchain-insurance-app-master/web/src/block-explorer/components/Container.js (about)

     1  /*global io*/
     2  'use strict';
     3  
     4  import React, { Props } from 'react';
     5  import PropTypes from 'prop-types';
     6  import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
     7  import naturalSort from 'javascript-natural-sort';
     8  import { Socket } from 'engine.io-client';
     9  
    10  import * as Api from '../api';
    11  import Block from './Block';
    12  import Loading from '../../shared/Loading';
    13  
    14  const MAX_BLOCK_COUNT = 5;
    15  const BLOCK_EXPLORER_HIDDEN = 'block-explorer:hidden';
    16  const storeItem = (key, value) => {
    17    localStorage.setItem(key, JSON.stringify(value));
    18  };
    19  const retrieveItem = (key, def) => {
    20    const item = localStorage.getItem(key);
    21    return item === null ? def : JSON.parse(item);
    22  };
    23  class Container extends React.Component {
    24  
    25    static get propTypes() {
    26      return {
    27        intl: intlShape.isRequired
    28      };
    29    }
    30  
    31    constructor(props) {
    32      super(props);
    33  
    34      this.state = {
    35        blocks: null,
    36        hidden: retrieveItem(BLOCK_EXPLORER_HIDDEN, true),
    37        hintHidden: true
    38      };
    39  
    40      this.toggleVisibility = this.toggleVisibility.bind(this);
    41      this.showHint = this.showHint.bind(this);
    42      this.hideHint = this.hideHint.bind(this);
    43  
    44      setTimeout(async () => {
    45        const socket = io('/insurance');  // Getting all events from the Insurance
    46        let blocks = await Api.getBlocksFromContractManagement(MAX_BLOCK_COUNT);
    47        socket.on('block', block => {
    48          console.log(block);
    49          this.setState({ blocks: [...this.state.blocks, block] });
    50        });
    51        blocks = Array.isArray(blocks) ? blocks : [];
    52        this.setState({ blocks });
    53      });
    54    }
    55  
    56    componentDidUpdate(prevProps, prevState) {
    57      storeItem(BLOCK_EXPLORER_HIDDEN, this.state.hidden);
    58    }
    59  
    60    toggleVisibility() {
    61      this.setState({ hidden: !this.state.hidden });
    62    }
    63  
    64    showHint() {
    65      this.setState({ hintHidden: false });
    66    }
    67  
    68    hideHint() {
    69      this.setState({ hintHidden: true });
    70    }
    71  
    72    setState(state) {
    73      const { blocks } = state;
    74      // Sort the blocks by id
    75      if (Array.isArray(state.blocks)) {
    76        state.blocks = state.blocks.sort((a, b) => naturalSort(a.id, b.id));
    77        if (blocks.length > MAX_BLOCK_COUNT) {
    78          // Top the amount of blocks to be displayed
    79          state.blocks = blocks.slice(-MAX_BLOCK_COUNT);
    80        }
    81      }
    82      return super.setState(...arguments);
    83    }
    84  
    85    render() {
    86      const { blocks, hidden, hintHidden } = this.state;
    87      const { intl } = this.props;
    88  
    89      const explorerMessage = hidden ? 'Show Explorer' : 'Close Explorer';
    90      const explorerIcon = hidden ? '/img/icons/maximize_24.svg' :
    91        '/img/icons/minimize_24.svg';
    92      const blocksDisplay = !hidden ?
    93        (<Loading hidden={Array.isArray(blocks)}
    94          text={intl.formatMessage({ id: 'Loading Blocks...' })}>
    95          <div>
    96            {Array.isArray(blocks) ?
    97              blocks.map(block => <Block key={block.id} data={block} />) :
    98              null}
    99          </div>
   100        </Loading>) :
   101        null;
   102      return (
   103        <div className='block-explorer'>
   104          <div className={`toggle-visibility-button${hidden ? ' hidden' : ''}`}>
   105            <div className={`hint ${hintHidden ? 'hidden' : ''}`}>
   106              {intl.formatMessage({ id: explorerMessage })}
   107            </div>
   108            <div onMouseLeave={this.hideHint} onMouseEnter={this.showHint}
   109              onClick={this.toggleVisibility}>
   110              <img src={explorerIcon} />
   111            </div>
   112          </div>
   113          <div className={`contents${hidden ? ' hidden' : ''}`}
   114            style={{ textAlign: 'center' }}>
   115            <div style={{
   116              display: 'inline-block', textAlign: 'initial', height: '100%'
   117            }}>
   118              <div style={{
   119                display: 'flex', flexDirection: 'column',
   120                height: '100%'
   121              }}>
   122                <div>
   123                  <h2 className='ibm-h2'
   124                    style={{ paddingTop: '10px', paddingLeft: '10px' }}>
   125                    <FormattedMessage id='Block Explorer' />
   126                  </h2>
   127                </div>
   128                <div style={{ flex: 'auto' }}>
   129                  <div style={{ height: '100%', width: '100%' }}>
   130                    {blocksDisplay}
   131                  </div>
   132                </div>
   133              </div>
   134            </div>
   135          </div>
   136        </div>
   137      );
   138    }
   139  
   140  }
   141  
   142  export default injectIntl(Container);