content: import React from 'react';
  import { connect } from 'react-redux';
  import _ from 'lodash';
  
  import { bindActionCreators } from 'redux';
  import * as hqActionCreators from '../actions/hqActionCreators';
  import * as urlActionCreators from '../actions/urlActionCreators';
  
  import {
    TELEHASH_STATE_ERROR, TELEHASH_STATE_CONNECTED, TELEHASH_STATE_CONNECTING, TELEHASH_STATE_DISCONNECTED,
  } from '../constants';
  
  import { List, ListItem, FontIcon, LinearProgress } from 'material-ui';
  import Section from '../components/Section';
  import LoginForm from '../components/forms/LoginForm';
  import HQConnectForm from '../components/forms/HQConnectForm';
  
  let HQConnect = React.createClass({
    handleCodeSubmit({ code }) {
      this.props.hqActions.attemptConnect({
        hostname: this.props.hq,
        code: code
      });
    },
  
    render() {
      let { hq, telehash } = this.props;
  
      return (
        <div>
          <h1>Connect to HQ {hq}</h1>
  
          {telehash.state === TELEHASH_STATE_DISCONNECTED &&
            <Section>
              <HQConnectForm onSubmit={this.handleCodeSubmit} />
            </Section>
          }
  
          {telehash.state === TELEHASH_STATE_CONNECTING &&
            <Section>
              <h2>Connecting to hq...</h2>
            </Section>
          }
  
          {telehash.state === TELEHASH_STATE_CONNECTED &&
            <Section>
              <h2>Connected to hq, redirecting</h2>
            </Section>
          }
        </div>
      );
    }
  });
  
  function mapStateToProps(state, props) {
    return {
      telehash: state.telehash
    };
  }
  
  function mapDispatchToProps(dispatch) {
    return {
      hqActions: bindActionCreators(hqActionCreators, dispatch),
      urlActions: bindActionCreators(urlActionCreators, dispatch),
    };
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(HQConnect);
  