chatbocx.jsx

var Message = React.createClass({
	render: function(){
		return (
				<span class={this.props.class_}>
					{this.props.children}
				</span>
			)
	}
});

var MessageForm = React.createClass({
	sendMessage: function(e){
		e.preventDefault();
		var message = React.findDOMNode(this.refs.message).value.trim();

		if(!message){
			return;
		}
		this.props.sendMessageNodeJS({message:message});
		React.findDOMNode(this.refs.message).value = "";
		return;
	},
	
	render: function(){
		return (
			<form class="MessageForm" onSubmit={this.sendMessage}>
				<input type="text" placeholder="Message" ref="message" />
			</form>
		)
	}

});

var MessagesList = React.createClass({
	render: function(){
		var owner = this.props.user_id;
		var class_ = "left_message";
		var  messages = []
		if (!!this.props.messages.length) {
			messages = this.props.messages.map(function(message){
				if(message.from_id = owner){
					class_ = "right_message";
				}
				return (
					<Message user_id={message.user_id} class_={class_}>
						{message.message}
					</Message>
					)
			});
		}

		return (
				<div class="messagesList">
					{messages}
				</div>
			)
	}
});


var ChatBox = React.createClass({
	getLastMessages: function(from_id, to_id){
		$.ajax({
			url: '/chat/get_last_messages/',
			data: {'from': from_id, 'to': to_id}
		})
		.done(function(data) {
			this.setState({messages:JSON.parse(data)});
		}.bind(this));
	},
	getInitialState: function(){
		var user_id = this.props.user;
		var to_id = this.props.to;
		return {messages: [], user_id: user_id, to_id:to_id};
	},

	handleMessage: function(from_id, to_id, message){
		this.setState(
			{
				messages: this.state.messages.push({"from_id": from_id, "to_id": to_id, "message": message})
			}
		);
	},
	componentDidMount: function(){
		this.getLastMessages(this.state.user_id, this.state.to_id);
		socket.on('message_received', this.handleMessage);
	},

	sendMessage: function(message){
		console.log(message);
	},
	
	render: function(){
		return (
				<div class="chatBox" from={this.props.user_id} to={this.props.to_id} >
					<MessagesList messages={this.state.messages} owner={this.state.user_id}/>
					<MessageForm sendMessageNodeJS={this.sendMessage}/>
				</div>
            )
	}
});





/*React.render(
	<ChatBox />,
	document.getElementById('content')
);*/