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

Meses messaging SDK in JavaScript

import React from 'react'
import styles from './styles.css'
import ConversationList from './ConversationList'
import MessageList from './MessageList'

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

  render() {
    let { className, messageListVisible, lastConversationScrollTop } = this.props
    let { title, connectedUser, hasMoreMessage, hasMoreConversation } = this.props
    let { conversationList, messageList, messageBuffer } = this.props

    let { conversationEntryOnClick, loadMoreConversation } = this.props
    let { backButtonOnClick, sendButtonOnClick, loadMoreMessage } = this.props
    
    let content = messageListVisible ?
      <MessageList 
        title={ title } 
        messageList={ messageList } 
        messageBuffer={ messageBuffer }
        hasMoreMessage={ hasMoreMessage }
        connectedUsername={ connectedUser.username }
        backButtonOnClick={ backButtonOnClick }
        sendButtonOnClick={ sendButtonOnClick }
        loadMoreMessage={ loadMoreMessage }
      /> :
      <ConversationList 
        connectedUser={ connectedUser }
        conversationList={ conversationList } 
        hasMoreConversation={ hasMoreConversation }
        loadMoreConversation={ loadMoreConversation }
        lastScrollTop={ lastConversationScrollTop }
        conversationEntryOnClick={ conversationEntryOnClick }
      />
    
    return (
      <div className={ styles.container + ' ' + className }>{ content }</div>
    )
  }
}

export default MessagingPopup