Signal.js

import React from 'react';

export default class Signal extends React.Component {

  static propTypes = {
    device: React.PropTypes.shape().isRequired,
    DeviceTypeEnum: React.PropTypes.shape().isRequired,
  };

  static ranges = {
    wifi: { min: -90, max: -20 },
    optical: { min: -28, max: -2 },
  };

  get range() {
    switch (this.props.device.identification.type) {
      case this.props.DeviceTypeEnum.Onu:
      case this.props.DeviceTypeEnum.Olt:
        return Signal.ranges.wifi;
      default:
        return null;
    }
  }

  get signalStrength() {
    const max = Math.abs(this.range.min - this.range.max);
    return ((this.props.device.overview.signal - this.range.min) / max) * 100;
  }

  canRender() {
    return this.range !== null;
  }

  renderSignal() {
    return (
      <div>
        {this.props.device.overview.signal} dBm &nbsp;&nbsp;
        <div
          style={{ maxWidth: '60px' }}
          className="statusBar appStatusBar appStatusBar--small appStatusBar--medium appStatusBar--high"
        >
          <div style={{ width: `${this.signalStrength}%` }} className="statusBar__inner" />
        </div>
      </div>
    );
  }

  renderEmpty() { // eslint-disable-line class-methods-use-this
    return (
      <div>&nbsp;</div>
    );
  }

  render() {
    if (this.canRender()) {
      return this.renderSignal();
    }
    return this.renderEmpty();
  }
}