Init

client/src/js/components/App.jsx

@@ -0,0 +1,18 @@
+var React = require('react');
+var TabList = require('./TabList.jsx');
+var MessageBox = require('./MessageBox.jsx');
+var UserList = require('./UserList.jsx');
+
+var App = React.createClass({
+	render: function() {
+		return (
+			<div>
+				<TabList />
+				<MessageBox />
+				<UserList />
+			</div>
+		);
+	}
+});
+
+module.exports = App;

client/src/js/components/MessageBox.jsx

@@ -0,0 +1,44 @@
+var React = require('react');
+var Reflux = require('reflux');
+var _ = require('lodash');
+var messageStore = require('../stores/message.js');
+var selectedTabStore = require('../stores/selectedTab.js');
+
+var MessageBox = React.createClass({
+	mixins: [
+		Reflux.connect(messageStore, 'messages'),
+		Reflux.connect(selectedTabStore, 'selectedTab')
+	],
+
+	getInitialState: function() {
+		return {
+			messages: messageStore.getState(),
+			selectedTab: selectedTabStore.getState()
+		};
+	},
+
+	componentWillUpdate: function() {
+		var el = this.getDOMNode();
+		this.autoScroll = el.scrollTop + el.offsetHeight === el.scrollHeight;
+	},
+
+	componentDidUpdate: function() {
+		if (this.autoScroll) {
+			var el = this.getDOMNode();
+			el.scrollTop = el.scrollHeight;
+		}
+	},
+
+	render: function() {
+		var tab = this.state.selectedTab.channel || this.state.selectedTab.server;
+		var messages = _.map(this.state.messages[tab], function(message) {
+			return <p>{message.from ? message.from + ': ' : null}{message.message}</p>;
+		});
+
+		return (
+			<div className="messagebox">{messages}</div>
+		);
+	}
+});
+
+module.exports = MessageBox;

client/src/js/components/TabList.jsx

@@ -0,0 +1,41 @@
+var React = require('react');
+var Reflux = require('reflux');
+var _ = require('lodash');
+
+var serverStore = require('../stores/server.js');
+var channelStore = require('../stores/channel.js');
+var selectedTabStore = require('../stores/selectedTab.js');
+var tabActions = require('../actions/tab.js');
+
+var TabList = React.createClass({
+	mixins: [
+		Reflux.connect(serverStore, 'servers'),
+		Reflux.connect(channelStore, 'channels'),
+		Reflux.connect(selectedTabStore, 'selectedTab')
+	],
+
+	getInitialState: function() {
+		return {
+			servers: serverStore.getState(),
+			channels: channelStore.getState(),
+			selectedTab: selectedTabStore.getState()
+		};
+	},
+
+	render: function() {
+		var self = this;
+		var tabs = _.map(this.state.channels, function(server, address) {
+			var channels = _.map(server, function(channel, name) {
+				return <p onClick={tabActions.select.bind(null, address, name)}>{name}</p>;
+			});
+			channels.unshift(<p onClick={tabActions.select.bind(null, address, null)}>{address}</p>);
+			return channels;
+		});
+
+		return (
+			<div className="tablist">{tabs}</div>
+		);
+	}
+});
+
+module.exports = TabList;

client/src/js/components/UserList.jsx

@@ -0,0 +1,36 @@
+var React = require('react');
+var Reflux = require('reflux');
+var _ = require('lodash');
+var channelStore = require('../stores/channel.js');
+var selectedTabStore = require('../stores/selectedTab.js');
+
+var UserList = React.createClass({
+	mixins: [
+		Reflux.connect(channelStore, 'channels'),
+		Reflux.connect(selectedTabStore, 'selectedTab')
+	],
+
+	getInitialState: function() {
+		return {
+			channels: channelStore.getState(),
+			selectedTab: selectedTabStore.getState()
+		};
+	},
+
+	render: function() {
+		var users = null;
+		var tab = this.state.selectedTab;
+		
+		if (tab.channel) {
+			users = _.map(this.state.channels[tab.server][tab.channel].users, function(user) {
+				return <p>{user}</p>;
+			});
+		}
+
+		return (
+			<div className="userlist">{users}</div>
+		);
+	}
+});
+
+module.exports = UserList;