Fabric Status Component for React using Semantic UI

FabricStatusComponent.js

'use strict';

import React from 'react';
import $ from 'jquery';
import { Icon, Segment, Statistic, Dimmer, Loader } from 'semantic-ui-react';

require('styles/kidec/FabricStatus.css');

class FabricStatusComponent extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
              visible: true,
              height:0,
              currentBlockHash: null,
              previousBlockHash: null,
              intervalId: null,
              lastUpdate: null,
              blockchainConnection: undefined,
              refreshRate: this.props.refresh || 5000,
              loading: true
         }
    }

    fetchData = function() {
      this.setState({ visible: true })
        $.ajax({
          url: this.props.api_url || 'http://localhost:7050/chain',
          method: 'GET',
          success: (success) => {
          	this.setState({loading: false})
            // pass the data we grab from the endpoint to the state
            success.lastUpdate = new Date().toString();
            success.blockchainConnection = true

            this.setState(success);
          },
          error: () => {
            // console.error('Error fetching data:', err)
            this.setState({blockchainConnection: false});
          }
        });
    }

    handleDismiss = () => {
      this.setState({ visible: false })
    }

    niceHash () {
        return  this.state.currentBlockHash.substr(0,5) + '...' + this.state.currentBlockHash.substr(-7)
    }

    componentWillMount() {
        this.setState(
        	{ intervalId:
        		setInterval( this.fetchData.bind(this), this.state.refreshRate )
        } );
    }

    componentWillUnmount() {
        clearInterval( this.state.intervalId );
    }

    render() {
        var fragment
        if (this.state.blockchainConnection || this.state.loading) {
          fragment = (
            	<Statistic inverted value={this.state.height} size='tiny' label="Block#" />
          )
        } else {
          if (this.state.visible && !this.state.loading) {
            fragment = (
              <Segment inverted compact className="commError">
                <Icon name='warning sign'/>
                <span>Connection to the BC lost</span>
              </Segment>
              )
          }
        }

        return (
            <Dimmer.Dimmable inverted className='fabricstatus-component' as={Segment} dimmed={this.state.loading}>
          		<Dimmer active={this.state.loading}>
		            <Loader>Loading</Loader>
		          </Dimmer>

           		{fragment}
           </Dimmer.Dimmable>
        );
    }
}

FabricStatusComponent.displayName = 'KidecFabricStatusComponent';

// Uncomment properties you need
// FabricStatusComponent.propTypes = {};
// FabricStatusComponent.defaultProps = {};

export default FabricStatusComponent;