instantjob-recruiter-client/src/components/user_card.jsx

a set of tools for creating an instantjob recruiter react client

import React, {Component} from 'react'
import {browserHistory} from 'react-router'
import styled from 'styled-components'
import {MdMail, MdPhone, MdCheckBox, MdCheckBoxOutlineBlank} from 'react-icons/lib/md'
import ProfileImage from 'components/profile_image'
import {card_width} from 'common/constants'
import {color, link} from 'common/styles'
import moment from 'common/moment'

const on_click = (id) => () => browserHistory.push(`/users/${id}`)

const UserCard = (props) => {
  let {selectable, selected, simple, clickable, id, last_name, first_name, email, phone_number, distance, postal_code, last_connection} = props
  return (
    <Card onClick={clickable ? on_click(id) : null}>
      {selectable ? (
        <div style={{display: 'flex', alignItems: 'center', paddingRight: 5}}>
          {selected ? (
            <MdCheckBox />
          ) : (
            <MdCheckBoxOutlineBlank />
          )}
        </div>
      ) : null}
      <div style={{flexShrink: 0, flexGrow: 0, display: "flex", alignItems: "center"}}>
        <ProfileImage {...props} large />
      </div>
      <div style={{flex: 1, marginLeft: 10, display: 'flex', flexDirection: "column", alignItems: "stretch"}}>
        <div style={{flex: 1.3, fontSize: 16, position: 'relative', ...styles.truncate}}>
          <span>{`${last_name} ${first_name}`.trim()}</span>
        </div>
        <div style={{flex: 1, fontSize: 10, display: 'flex'}}>
          <div style={{...styles.truncate}}>
            <MdMail /> <span>{email}</span>
          </div>
          {phone_number ? (
            <div style={{flexShrink: 0, width: 100, marginLeft: 10, ...styles.truncate}}>
              <MdPhone /> <span>{phone_number}</span>
            </div>
          ) : null}
        </div>
      </div>
      {simple ? null : (
        <div style={{flexShrink: 0, flexGrow: 0, width: 120, display: "flex", flexDirection: "column", alignItems: "flex-end"}}>
          <div style={{flex: 1.3}}>
            {distance ? `${(distance / 1000).toFixed(1)} km` : postal_code}
          </div>
          <div style={{flex: 1, fontSize: 10}}>
            {last_connection ? moment(last_connection).calendar() : 'Aucune connexion'}
          </div>
        </div>
      )}
    </Card>
  )
}

const styles = {
  truncate: {
    whiteSpace: "nowrap",
    overflow: "hidden",
    textOverflow: "ellipsis",
  }
}

export default UserCard

const Card = styled.div`
  width: ${card_width}px;
  height: 60px;
  padding: 5px 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  ${({onClick}) => onClick ? link : ""}
`