tools/src/components/Resistor/result.js

import React, { Component } from 'react';
import {
  Row,
  Col,
  ListGroup,
  ListGroupItem
} from 'reactstrap';
import Resistor from './resistor';

class Result extends Component {
  state = {};

  constructor(props) {
    super(props);

    this.state = {
      series: this.props.series,
      factors: this.props.factors,
      powerSource: this.props.powerSource,
      powerLed: this.props.powerLed,
      ledConsumption: this.props.ledConsumption,
      colors: this.props.colors,

      perfectMatch: null,

      // First resistor before the perfect value
      underR: null,
      underRColors: [
        'red',
        'red'
      ],
      underRRingTwo: {
        color: 'red'
      },
      underRFactor: null,

      // First resistor after the perfect value
      overR: null,
      overRRingOne: {
        color: 'red'
      },
      overRRingTwo: {
        color: 'red'
      },
      overRFactor: null,
        };
  }

  componentDidMount = () => {
    const perfectMatch = Math.round( 1000 * ((this.state.powerSource - this.state.powerLed ) / ( this.props.ledConsumption/1000))) / 1000;
    let overR = null;
    let underR = null;
    let underRFactor = null;
    let overRFactor = null;
    let underRColors = [];
    let overRColors = [];

    if ( perfectMatch > 0 )
    {
      for( let iFactor = 0 ; iFactor < this.state.factors.length ; iFactor += 1 ) {
        const factorDetails = this.state.factors[iFactor];
        const factor = factorDetails.factor;
        for( let iSerie = 0 ; iSerie < this.state.series.e24.length ; iSerie += 1 ) {
          const currentR = this.state.series.e24[iSerie] * factor;

          if ( currentR >= perfectMatch ) {
            overR = currentR;
            overRFactor = factorDetails;
            break;
          }

          underR = currentR;
        }
        underRFactor = factorDetails;

        if ( overR)
        {
          break;
        }
      }

      if ( overR === perfectMatch ){
        underR = null;
        overR = null;
        underRFactor = null;
        overRFactor = null;
      }
    }

    // Extract colors from resistors
    if ( underR ) {
      for ( let i = 0 ; i < 2 ; i += 1) {
        for ( let j = 0 ; j < this.state.colors.length ; j += 1) {
          if ( this.state.colors[j].value === Number(underR.toString()[i]) ) {
            underRColors[i] = this.state.colors[j].color;
            break;
          }
        }
      }
    }
    if ( overR ) {
      for ( let i = 0 ; i < 2 ; i += 1) {
        for ( let j = 0 ; j < this.state.colors.length ; j += 1) {
          if ( this.state.colors[j].value === Number(overR.toString()[i]) ) {
            overRColors[i] = this.state.colors[j].color;
            break;
          }
        }
      }
    }

    this.setState({
      perfectMatch,
      overR,
      overRFactor,
      underR,
      underRFactor,
      underRColors,
      overRColors
    });
  }

  render() {
    return (
      <Row>
        <Col xs="12" md="12">
          Vous devez mettre une résistance de <strong>{this.state.perfectMatch}&#8486;</strong>.
        </Col>
        { this.state.overR ?
          (
            <Col xs="12">
              Cette résistance n&#39;existant pas dans la série e24 vous pouvez opter pour l&#39;une des résistances suivante :
              <ListGroup>
                {this.state.underR ?
                  (
                    <ListGroupItem>
                      <Row>
                        <Col xs="12">
                          <strong>{this.state.underR}&#8486;</strong>
                          {' '}
                          ({this.state.underR / this.state.underRFactor.factor} {this.state.underRFactor.factorLabel}&#8486;)
                        </Col>
                        <Col xs="12">
                          <Resistor ringone={this.state.underRColors[0]} ringtwo={this.state.underRColors[1]} factor={this.state.underRFactor.color} precision='#cd9932' />
                        </Col>
                      </Row>
                    </ListGroupItem>
                  )
                  : (null)
                }
                {this.state.overR ?
                  (
                    <ListGroupItem>
                      <Row>
                        <Col xs="12">
                          <strong>{this.state.overR}&#8486;</strong>
                          {' '}
                          ({this.state.overR / this.state.overRFactor.factor} {this.state.overRFactor.factorLabel}&#8486;)
                        </Col>
                        <Col xs="12">
                          <Resistor ringone={this.state.overRColors[0]} ringtwo={this.state.overRColors[1]} factor={this.state.overRFactor.color} precision='#cd9932' />
                        </Col>
                      </Row>
                    </ListGroupItem>
                  )
                  : (null)
                }
              </ListGroup>
            </Col>
          ) : (null)
        }
      </Row>
    )
  }
}

export default Result