meses-messaging/src/ui/components/MessagingPopup/ConversationList/ConversationListBody/ConversationEntry/index.jsx

Meses messaging SDK in JavaScript

import React from 'react'
import styles from './styles.css'
import UnreadCountLabel from './UnreadCountLabel'
import TimeLabel from './TimeLabel'

class ConversationEntry extends React.Component {
  constructor() {
    super()
  }

  render() {
    let { name, title, lastMessage, time, unreadCount, onClick } = this.props

    const currentMillis = new Date().getTime()
    const oneDayMillis = 24 * 60 * 60 * 1000
    const format =
      (currentMillis - time <= oneDayMillis) ? 'LT' : // 00:00 AM
      (currentMillis - time <= 7 * oneDayMillis) ? 'ddd M/D' : 'YYYY/M/D'

    return (
      <div className={ styles.entry } onClick={ onClick.bind(this, name) }>
        <div className={ styles.entryHeading }> { title } </div>
        <div className={ styles.entryBody }> { lastMessage } </div>
        { unreadCount && unreadCount > 0 ? <UnreadCountLabel unreadCount={unreadCount} /> : '' }
        { time ? <TimeLabel time={time} format={format} /> : '' }
      </div>
    )
  }
}

export default ConversationEntry