meses-messaging/src/ui/components/MessagingPopup/MessageList/MessageListBody/index.jsx

Meses messaging SDK in JavaScript

import React from 'react'
import moment from 'moment'
import styles from './styles.css'
import Divider from './Divider'
import MessageEntry from './MessageEntry'

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

  componentDidMount() {
    let { loadMoreMessage } = this.props

    this.container.addEventListener('scroll', function() {
      if (this.container.scrollTop == 0) loadMoreMessage()
    }.bind(this))
  }

  componentWillUpdate(nextProps, nextState) {
    this.scrollBottom = (this.container.scrollTop == this.container.scrollHeight - this.container.offsetHeight)
    this.tmpScrollTop = this.container.scrollHeight
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevProps.messageList.length == 0)
      this.container.scrollTop = this.container.scrollHeight
    else if (this.props.messageList.length > prevProps.messageList.length)
      this.container.scrollTop = this.container.scrollHeight - this.tmpScrollTop
    
    if (this.scrollBottom)
      this.container.scrollTop = this.container.scrollHeight
  }

  render() {
    let { messageList, messageBuffer, connectedUsername, hasMoreMessage } = this.props
    let entries = []

    let prevDate = null
    const oneYearMillis = 365 * 24 * 60 * 60 * 1000
    const dateFormat = function(time, format) {
      let dateTime = moment(time)
      return (dateTime.isValid()) ? dateTime.format(format) : '-'
    }

    messageList.concat(messageBuffer).forEach((x, i) => {
      const timeDiff = new Date().getTime() - x.messageId
      const format = timeDiff >= oneYearMillis ? 'MM/DD/YYYY' : 'ddd, MMM Do'
      const date = dateFormat(x.messageId, format)
      if (date !== prevDate) {
        entries.push(<Divider key={ date } content={ date } />)
        prevDate = date
      }

      entries.push(
        <MessageEntry
          key={ x.messageId }
          time={ x.messageId }
          message={ x.message }
          alignRight={ x.creatorName == connectedUsername }
          sender={ x.displayName ? x.displayName : x.creatorName } />
      )
    })

    let hasMoreDiv = (<div className={ styles.moreMessage }>Retrieving more messages</div>)

    return (
      <div className={ styles.messageListBody } ref={ x => this.container = x } >
        { hasMoreMessage ? hasMoreDiv : '' }
        { entries }
      </div>
    )
  }
}

export default MessageListBody