import React, { Component } from 'react'; import store from '../store/Store'; import { connect } from 'react-redux'; import { actions } from '../actions/Index'; import Messages from '../components/Messages'; import ChatUtils from '../utils/ChatUtils';

@connect((state) => {

return {
  messages: state.messages,
  conversation: state.conversation,
}

})

export default class MessagesContainer extends Component {

constructor(props) {
  super(props);
}

componentDidMount() {
  let room = document.getElementById('denshobato-message-panel');
  store.dispatch(actions.messages.fetch(room.dataset.room));
};

componentWillReceiveProps(nextProps) {
  if (nextProps.messages.length != this.props.messages.messages.length) {
    ChatUtils.scrollChat();
  }
}

render() {
  const { messages, conversation } = this.props;
  return (
    <div>
      {do {
        if (!messages.loaded) {
          <div className="loading">
            <p>LOADING MESSAGES...</p>
          </div>;
        } else {
          <Messages messages={messages.messages} conversation={conversation} showAll={messages.showAll}/>;
        }
      }}
    </div>
  );
}

}