render() {
let room = this.props.room;
/*
In history, messages are returned in the order of the most recent message first.
This allows us to add to add the most recent messages to the chat box first; since they are most important to catching the user up on context.
However as we get new messages, they might be out of order so we keep this sorted.
*/
const sorted_messages = _.sortBy(room.messages, (u) => u.pk);
const rendered_messages = _.map(sorted_messages, (message, index) => {
return <SimpleMessage key={message.pk} message={message} active={index == sorted_messages.length - 1} />;
});
Logger.debug(`length messages: ${room.messages.length}`);
Logger.debug(`length users: ${room.users.length}`);
return (
<div className="chat-room">
<h1 className="chat-room--title">{room.topic}</h1>
<div className="message-window">
{rendered_messages}
</div>
<UserList room={room}/>
<ChatForm />
</div>
);
}
.then((ws) => {
Logger.debug("Joined chat .... ");
this.socket = ws;
//this.system = this.socket.channel('system');
//this.system.join((data) => {
// todo: get roms via system channel
// remove _find_all
//});
});
static receive_unknown(event, payload, ref) {
let is_phx_event = event.startsWith('phx_');
if (!is_phx_event) {
Logger.debug(`Unknown Message: ${event} :: ${ref} :: `, payload);
}
}
receive_user_left(payload){
Logger.debug("left room --> ", payload);
this.model.users = this.model.users.filter((u) => u.username != payload.user.username);
}
receive_user_joined(payload){
Logger.debug("entered room -->", payload);
this.model.users.push(User.from(payload.user));
}
ws.onMessage((msg) => Logger.debug("Socket: Got message", msg));
ws.onOpen(() =>{
Logger.debug("Socket: The connection openned");
resolve(ws);
});