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

Meses messaging SDK in JavaScript

import React from 'react'
import styles from './styles.css'
import ConversationEntry from './ConversationEntry'

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

  componentDidMount() {
    let { loadMoreConversation, lastScrollTop } = this.props

    this.container.scrollTop = lastScrollTop
    this.container.addEventListener('scroll', function() {
      if (this.container.scrollTop == this.container.scrollHeight - this.container.offsetHeight) 
        loadMoreConversation()
    }.bind(this))
  }
  
  render() {
    let { conversationList } = this.props

    let conversationEntries = conversationList.map(x => {
      return (
        <ConversationEntry 
          key={x.conversationName}
          name={x.conversationName} 
          title={x.title ? x.title : x.conversationName}
          lastMessage={x.lastMessageText}
          time={x.lastMessageTime}
          unreadCount={x.unreadCount}
          onClick={this._handleConversationEntryOnClick.bind(this)}/>
      )
    })
    return (
      <div 
        className={ styles.conversationListBody } 
        ref={ x => this.container = x}>
        { conversationEntries }
      </div>
    )
  }

  _handleConversationEntryOnClick(conversationName) {
    let { conversationEntryOnClick } = this.props

    conversationEntryOnClick(conversationName, this.container.scrollTop)
  }
}

export default ConversationListBody