instantjob-recruiter-client/src/components/recipients.es6.jsx

a set of tools for creating an instantjob recruiter react client

import React, {Component} from 'react'
import {connect} from 'react-redux'
import {List, AutoSizer} from 'react-virtualized'
import moment from '../common/moment'
import {color} from '../common/constants'
import store from '../common/store'
import auto_bind from '../common/auto_bind'
import {get_recipients} from '../selectors/messages'
import {set_current_recipient} from '../actions/users'
import {create_message} from '../actions/messages'

const recipient_height = 90

class RecipientsStatic extends Component {
  constructor(props) {
    super(props)
    auto_bind(this)
  }

  render_recipient({key, index, style}) {
    return (
      <div key={key} style={style}>
        <Recipient recipient={this.props.recipients[index]} />
      </div>
    )
  }

  render() {
    return (
      <AutoSizer>
        {({height, width}) => (
          <List
            height={height}
            width={width}
            rowCount={this.props.recipients.length}
            rowHeight={recipient_height}
            rowRenderer={this.render_recipient}
            />
        )}
      </AutoSizer>
    )
  }
}

class Recipient extends Component {
  render() {
    return (
      <div
        className="link"
        style={{height: recipient_height, alignItems: 'stretch', display: 'flex', flexDirection: 'column', padding: 5, borderBottom: `solid 1px ${color('black', 'pale')}`}}
        onClick={() => store.dispatch(set_current_recipient(this.props.recipient.id))}
      >
        <div style={{display: 'flex', flexShrink: 0, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between'}}>
          <div style={{display: 'flex', alignItems: 'center', textAlign: 'center', overflow: 'hidden'}}>
            <div style={{color: color('black', 'normal', 0.8), fontSize: 15}}>{this.props.recipient.full_name}</div>
          </div>
          <div style={{display: 'flex', flexDirection: 'row-reverse', alignItems: 'center', justifyContent: 'space-between', flex: 1, marginLeft: 5}}>
            <div style={{fontSize: 10}}>
              {this.props.recipient.last_message.created_at ? (
                moment(this.props.recipient.last_message.created_at).fromNow(true)
              ) : ''}
            </div>
            <div style={{display: 'flex', justifyContent: 'center'}}>
              {this.props.recipient.unread_messages > 0 ? (
                <span style={{backgroundColor: color('primary', 'light'), color: 'white', borderRadius: 10, height: 20, minWidth: 20, textAlign: 'center', paddingLeft: 3, paddingRight: 3}}>
                  {this.props.recipient.unread_messages}
                </span>
              ) : null}
            </div>
          </div>
        </div>
        <div style={{color: color('black', 'bright'), fontSize: 12, marginTop: 5, overflow: 'hidden', textOverflow: 'ellipsis'}}>
          {this.props.recipient.last_message.content}
        </div>
      </div>
    )
  }
}

const Recipients = connect(
  (state) => {
    return {
      recipients: get_recipients(state)
    }
  }
)(RecipientsStatic)

export default Recipients