content: import React from 'react';
  import {TOX_FRIEND_REQUEST_TYPE_INCOMING} from './../../../../../shared/tox';
  import {Address} from './../../../../common/User';
  import {
    Button,
    Icon,
    Table,
    TableBody,
    TableHeader,
    TableHeaderColumn,
    TableRow,
    TableRowColumn,
    Text,
    Toolbar
  } from './../../../../common/UserInterface';
  
  export default class PendingFriendRequestsTable extends React.Component {
  
    static displayName = 'PendingFriendRequestsTable'
  
    static propTypes = {
      friends: React.PropTypes.array.isRequired,
      onAccept: React.PropTypes.func.isRequired,
      onCancel: React.PropTypes.func.isRequired
    }
  
    render () {
      const {friends} = this.props;
  
      let friendElements = friends.map((model, index) => {
        let isIncoming = model.requestType === TOX_FRIEND_REQUEST_TYPE_INCOMING;
  
        return (
          <TableRow key={index}
                    className={isIncoming ? 'incoming' : 'outgoing'}>
            <TableRowColumn>
              <Icon className='request-type'
                    iconName={isIncoming ? 'incoming' : 'outgoing'}/>
            </TableRowColumn>
            <TableRowColumn>
              <Address address={model.address}/>
            </TableRowColumn>
            <TableRowColumn>
              {model.requestMessage}
            </TableRowColumn>
            <TableRowColumn>
              <Toolbar>
                {isIncoming ?
                  <Button label={{id: 'accept'}}
                          tabIndex={0}
                          centerRipple={true}
                          onMouseUp={(event) => this._handleAccept(event, model.id)}
                          onKeyboardEnter={(event) => this._handleAccept(event, model.id)}
                          onKeyboardPress={(event) => this._handleAccept(event, model.id)}>
                    <Icon iconName='confirm'/>
                  </Button>
                  : null}
                <Button label={{id: 'cancel'}}
                        tabIndex={0}
                        centerRipple={true}
                        onMouseUp={(event) => this._handleCancel(event, model.id)}
                        onKeyboardEnter={(event) => this._handleCancel(event, model.id)}
                        onKeyboardPress={(event) => this._handleCancel(event, model.id)}>
                  <Icon iconName='cancel'/>
                </Button>
              </Toolbar>
            </TableRowColumn>
          </TableRow>
        );
      });
  
      return (
        <Table>
          <TableHeader>
            <TableRow>
              <TableHeaderColumn className='request-type'>
                <Text l10n={{id: 'requestType'}}/>
              </TableHeaderColumn>
              <TableHeaderColumn className='friend-address'>
                <Text l10n={{id: 'address'}}/>
              </TableHeaderColumn>
              <TableHeaderColumn className='request-message'>
                <Text l10n={{id: 'requestMessage'}}/>
              </TableHeaderColumn>
              <TableHeaderColumn>
                <Text l10n={{id: 'options'}}/>
              </TableHeaderColumn>
            </TableRow>
          </TableHeader>
          <TableBody>
            {friendElements}
          </TableBody>
        </Table>
      );
    }
  
    _handleAccept = (event, id) => {
      event.preventDefault();
  
      this.props.onAccept(id);
    }
  
    _handleCancel = (event, id) => {
      event.preventDefault();
  
      this.props.onCancel(id);
    }
  }
  