{"size": 3680, "ext": "js", "max_stars_repo_path": "my-home/frontend/src/containers/NewDevicePage/NewDevicePage.js", "max_stars_repo_name": "Alliander/decentralized-auth", "max_stars_repo_stars_event_min_datetime": "2018-06-30T16:21:20.000Z", "max_stars_repo_stars_event_max_datetime": "2021-03-14T23:36:30.000Z", "max_issues_repo_path": "my-home/frontend/src/containers/NewDevicePage/NewDevicePage.js", "max_issues_repo_name": "Alliander/decentralized-auth", "max_issues_repo_issues_event_min_datetime": "2020-07-07T19:25:01.000Z", "max_issues_repo_issues_event_max_datetime": "2021-05-10T08:51:43.000Z", "max_forks_repo_path": "my-home/frontend/src/containers/NewDevicePage/NewDevicePage.js", "max_forks_repo_name": "Alliander/decentralized-auth", "max_forks_repo_forks_event_min_datetime": "2018-09-14T01:04:08.000Z", "max_forks_repo_forks_event_max_datetime": "2021-01-02T23:44:32.000Z"}
{"max_stars_count": 7, "max_issues_count": 8, "max_forks_count": 4, "avg_line_length": 28.0916030534, "max_line_length": 103, "alphanum_fraction": 0.5391304348}
import React, { Component } from 'react';
import CircularProgress from 'material-ui/CircularProgress';
import PropTypes from 'prop-types';
import { history as historyPropTypes } from 'history-prop-types';
import { Row, Col } from 'react-flexbox-grid';
import RaisedButton from 'material-ui/RaisedButton';
import { connect } from 'react-redux';
import { addDevice } from '../../actions';

class NewDevicePage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      iotaAddress: 'FODEYEQHYCWYTDEDWZLPCLRDIU9RFKU9AFQSEOR9RSGEPDGQBGMYXIQCENBDGYFFS9AJK9GJJZJGEUEW9',
      secret: '',
    };

    // Prevent ECMAscript not binding this (which we need for setState)
    // See https://stackoverflow.com/a/43644649/2609980
    this.onAddressChange = this.onAddressChange.bind(this);
    this.onSecretChange = this.onSecretChange.bind(this);
  }

  componentDidMount() {
    this._isMounted = true; // eslint-disable-line no-underscore-dangle
  }

  componentWillReceiveProps(nextProps) {
    // When device is received move to new page
    if (this.props.isFetching && !nextProps.isFetching) {
      this.props.history.push('/my-devices');
      window.location.reload();
    }
  }

  componentWillUnmount() {
    this._isMounted = false; // eslint-disable-line no-underscore-dangle
  }

  onAddressChange(event) {
    this.setState({ iotaAddress: event.target.value });
  }

  onSecretChange(event) {
    this.setState({ secret: event.target.value });
  }

  render() {
    const { dispatch } = this.props;
    const { iotaAddress, secret } = this.state;
    return this.props.isFetching ?
      (
        <div style={{ padding: '20px' }} id="my-devices-page">
          <Row>
            <Col xs={8}>
              <h2>Pairing with device...</h2>
            </Col>
          </Row>
          <Row>
            <Col xs={8}>
              <CircularProgress />
            </Col>
          </Row>
          <Row>
            <Col xs={8}>
              <span>
                Pairing device via the IOTA Tangle.
                Please wait.
                Sending messages back and forth can take up to three minutes!
              </span>
            </Col>
          </Row>

        </div>
      )
      : (
        <div style={{ padding: '20px' }} id="my-devices-page">
          <Row>
            <Col xs={8}>
              <h2>Add New Device</h2>
            </Col>
          </Row>
          <Row>
            <Col xs={8}>
              Raspberry Pi&#39;s IOTA address: &nbsp;
              <input
                tabIndex="-3"
                type="text"
                value={iotaAddress}
                onChange={this.onAddressChange}
              />
            </Col>
            <Col xs={4} style={{ textAlign: 'right' }}>
              <RaisedButton
                tabIndex="-2"
                onClick={() => dispatch(addDevice(iotaAddress, secret))}
                label="Claim Raspberry Pi"
                primary
                style={{}}
              />
            </Col>
          </Row>
          <Row>
            <Col xs={8}>
              Secret on device: &nbsp;
              <input
                tabIndex="-1"
                type="text"
                value={secret}
                onChange={this.onSecretChange}
              />
            </Col>
          </Row>
        </div>
      );
  }
}

NewDevicePage.propTypes = {
  history: PropTypes.shape(historyPropTypes),
  isFetching: PropTypes.bool.isRequired,
  dispatch: PropTypes.func.isRequired,
};

function mapStateToProps(state) {
  const { device: { isFetching } } = state;
  return { isFetching };
}

export default connect(mapStateToProps)(NewDevicePage);
