content: import React from 'react';
  import {connect} from 'cerebral-view-react';
  import {classNames} from 'react-dom-stylesheet';
  import {User} from './../../../common/User';
  import {Button, Icon} from './../../../common/UserInterface';
  
  import {hasFriends} from './../../Friends/computed';
  import Conversations from './Conversations';
  import History from './History';
  import ComposerForm from './forms/ComposerForm';
  
  export default connect({
    currentChat: 'chat.currentChat',
    hasFriends: hasFriends()
  }, class Chat extends React.Component {
  
    static displayName = 'Chat'
  
    static propTypes = {
      signals: React.PropTypes.object.isRequired,
      currentChat: React.PropTypes.object,
      hasFriends: React.PropTypes.bool.isRequired
    }
  
    render () {
      const {hasFriends, currentChat} = this.props;
  
      const rootClasses = classNames('chat', {
        empty: !hasFriends
      });
  
      return (
        <div className={rootClasses}>
          <aside className='sidebar'
                 tabIndex={-1}
                 role='complementary'
                 aria-expanded={true}>
            {hasFriends ?
              <Conversations/>
              :
              null}
          </aside>
          {currentChat.id ?
            <section className='conversation'
                     aria-labelledby='conversation-title'>
              <header>
                <h2 id={'conversation-title'}>
                  <User model={currentChat}
                        showStatus={false}/>
                </h2>
                <Button label={{id: 'callFriend', args: {nickname: currentChat.nickname}}}
                        centerRipple={true}>
                  <Icon iconName='phone'/>
                </Button>
              </header>
              <History/>
              <ComposerForm onSubmit={this._handleSubmit}/>
            </section>
            :
            <div className='empty-conversation'/>
          }
  
        </div>
      );
    }
  
    _handleSubmit = (event, formData) => {
      this.props.signals.chat.sendMessage({
        id: this.props.friend.id,
        message: formData.message
      });
    }
  });
  