blob: 317dff3c0ede9ec4c4b215e904e79c37b36d0cba [file] [log] [blame]
// Copyright 2015 The Vanadium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style
// license that can be found in the LICENSE file.
var _ = require('lodash');
var genColor = require('color-generator');
var moment = require('moment');
var React = require('react');
var Channel = require('./channel');
var h = require('./react_h');
// Navigation bar.
var NavBar = React.createClass({
render: function() {
return h('div.navbar', [
h('span.title', document.title)
]);
}
});
var userColors = {};
// Shows a single message.
var Message = React.createClass({
render: function() {
var m = this.props.message;
userColors[m.sender] = (
userColors[m.sender] || genColor(0.5, 0.75).hexString());
return h('div.message', [
h('span.timestamp', [
moment(m.timestamp.toISOString()).format('MMM D [at] h:mma')
]),
h('span.sender', {
style: {color: userColors[m.sender]},
}, m.sender),
h('span.text', m.text)
]);
}
});
// Shows received messages.
var Messages = React.createClass({
componentDidUpdate: function() {
var el = this.getDOMNode();
el.scrollTop = el.scrollHeight;
},
render: function() {
return h('div.messages', _.map(this.props.messages, function(v, i) {
return new Message({key: i, message: v});
}));
}
});
// Shows a list of channel members.
var Members = React.createClass({
render: function() {
return h('div.members', [
h('span.title', 'Members'),
h('ul', _.map(this.props.members, function(member) {
return h('li', {key: member}, [
// http://graphemica.com/%E2%97%8F
h('span.status-active', {key: 'status'}, '\u25CF'),
h('span', {key: 'member'}, member)
]);
}))
]);
}
});
// Message entry box.
var Compose = React.createClass({
getInput: function() {
return this.getDOMNode().querySelector('input');
},
componentDidMount: function() {
this.getInput().focus();
},
render: function() {
var that = this;
return h('div.compose', h('form', {
onSubmit: function() {
try {
var input = that.getInput();
that.props.broadcastMessage(input.value);
// TODO(sadovsky): Maybe wait to reset input until the message is
// received by the sender?
input.value = '';
} catch (e) {
// TODO(sadovsky): For some reason, "throw e" doesn't work.
console.error(e);
} finally {
return false;
}
}
}, [
h('input', {type: 'text', size: 128, placeholder: 'Enter message'}),
// Invisible button used by the tests to submit the form.
h('button', {type: 'submit', hidden: true})
]));
}
});
// The splash screen is part of the page HTML, not rendered through React. This
// helper function removes it.
function removeSplash() {
// Remove splash screen.
var splash = document.querySelector('#splash');
if (splash) splash.remove();
}
var Page = React.createClass({
getInitialState: function() {
return {
chan: null,
members: null,
messages: null
};
},
componentWillReceiveProps: function(nextProps) {
var that = this;
var rt = nextProps.rt;
if (!rt) return;
var chan = null;
// Note: Even if we somehow fail to call chan.leave(), our server will get
// removed from the mounttable after one minute (due to ttl).
window.addEventListener('beforeunload', function() {
if (chan) chan.leave();
});
chan = new Channel(rt);
chan.on('ready', removeSplash);
chan.on('members', function(members) {
that.setState({members: members});
}).on('message', function(message) {
that.setState({messages: that.state.messages.concat([message])});
});
this.setState({
chan: chan,
members: [],
messages: []
});
// Join the channel.
chan.join();
},
render: function() {
var that = this;
if (this.props.err) {
removeSplash();
return h('div', [
h('span.alert-error', '' + this.props.err),
h('div.instructions', [
'Follow ',
h('a', {href: 'README.html'}, 'these instructions'),
' to install and run Vanadium Chat.'
])
]);
} else if (!this.props.rt) {
return h('span.alert-info', 'Loading...');
}
return h('div.page', [
new NavBar(),
h('div.messages-members', [
new Messages({messages: this.state.messages}),
new Members({members: this.state.members})
]),
new Compose({
broadcastMessage: function(messageText) {
that.state.chan.broadcastMessage(messageText, function(err) {
if (err) throw err;
});
}
})
]);
}
});
////////////////////////////////////////
// Exports
module.exports = {
Page: Page,
};