text: // npm packages
  import React from 'react';
  import {Link} from 'react-router-dom';
  import {connect} from 'react-redux';
  import PropTypes from 'prop-types';
  import {push} from 'react-router-redux';
  
  // our packages
  import {registerAction} from '../../store/actions';
  
  const mapStateToProps = state => ({
    redirectToLogin: state.auth.redirectToLogin,
  });
  
  const mapDispatchToProps = dispatch => ({
    navToLogin: () => dispatch(push('/login')),
    onRegisterClick: params => dispatch(registerAction(params)),
  });
  
  
  export const Register = ({
    onRegisterClick, navToLogin, redirectToLogin,
  }) => {
    let usernameInput;
    let passwordInput;
    let passwordInputRepeat;
  
    const handleClick = (e) => {
      e.preventDefault();
  
      onRegisterClick({
        login: usernameInput.value,
        password: passwordInput.value,
        passwordRepeat: passwordInputRepeat.value,
      });
    };
  
    if (redirectToLogin) {
      // TODO: figure out a better way to do nav
      setImmediate(() => navToLogin());
    }
  
    return (
      <div className="jumbotron">
        <h2>Experts portal:</h2>
        <p>Please register. Or <Link to="/login">login</Link></p>
  
        <form>
          <div className="form-group">
            <label htmlFor="inputUsername">Username:</label>
            <input
              type="text"
              className="form-control"
              id="inputUsername"
              placeholder="Username"
              ref={(i) => { usernameInput = i; }}
            />
          </div>
          <div className="form-group">
            <label htmlFor="inputPassword">Password</label>
            <input
              type="password"
              className="form-control"
              id="inputPassword"
              placeholder="Password"
              ref={(i) => { passwordInput = i; }}
            />
          </div>
          <div className="form-group">
            <label htmlFor="inputPasswordRepeat">Password</label>
            <input
              type="password"
              className="form-control"
              id="inputPasswordRepeat"
              placeholder="RepeatPassword"
              ref={(i) => { passwordInputRepeat = i; }}
            />
          </div>
          <button type="submit" className="btn btn-default" onClick={handleClick}>Register</button>
        </form>
      </div>
    );
  };
  Register.propTypes = {
    onRegisterClick: PropTypes.func.isRequired,
    navToLogin: PropTypes.func.isRequired,
    redirectToLogin: PropTypes.bool,
  };
  Register.defaultProps = {
    redirectToLogin: false,
  };
  
  export default connect(mapStateToProps, mapDispatchToProps)(Register);
  