import React, { Component } from 'react';
import { connect } from 'react-redux';
import MessageInput from './MessageInput';
import MessageList from './MessageList';

export class Message extends Component {
  render() {
    const { dispatch, userMessage, isUserSignedIn } = this.props;

    return (
      <div>
        <MessageList dispatch={ dispatch } />
        { isUserSignedIn &&
            <MessageInput
              userMessage={ userMessage }
              dispatch={ dispatch }
            />
        }
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    userMessage: state.userMessage,
    isUserSignedIn: state.auth.isUserSignedIn
  }
};

export default connect(
  mapStateToProps
)(Message);

@@ -262,16 +262,26 @@
 SignedIn
+, messages
  %7D = thi
@@ -335,16 +335,26 @@
 sageList
+%0A         
  dispatc
@@ -367,16 +367,56 @@
 spatch %7D
+%0A          messages=%7B messages %7D%0A       
  /%3E%0A    
@@ -724,16 +724,46 @@
 SignedIn
+,%0A    messages: state.messages
 %0A  %7D%0A%7D;%0A

send messages state to MessageList