Added chat input history navigable by the arrow keys

client/src/js/actions/inputHistory.js

@@ -0,0 +1,10 @@
+var Reflux = require('reflux');
+
+var inputHistoryActions = Reflux.createActions([
+	'add',
+	'reset',
+	'increment',
+	'decrement'
+]);
+
+module.exports = inputHistoryActions;

client/src/js/command.js

@@ -1,5 +1,4 @@
 var channelStore = require('./stores/channel');
-var selectedTabStore = require('./stores/selectedTab');
 var channelActions = require('./actions/channel');
 var messageActions = require('./actions/message');
 var serverActions = require('./actions/server');

client/src/js/components/MessageInput.jsx

@@ -1,19 +1,24 @@
 var React = require('react');
 var Reflux = require('reflux');
 
+var inputHistoryStore = require('../stores/inputHistory');
 var selectedTabStore = require('../stores/selectedTab');
 var messageActions = require('../actions/message');
+var inputHistoryActions = require('../actions/inputHistory');
 var tabActions = require('../actions/tab');
 
 var MessageInput = React.createClass({
 	mixins: [
 		Reflux.connect(selectedTabStore, 'selectedTab'),
+		Reflux.connect(inputHistoryStore, 'history'),
 		Reflux.listenTo(tabActions.select, 'tabSelected')
 	],
 
 	getInitialState: function() {
 		return {
-			selectedTab: selectedTabStore.getState()
+			selectedTab: selectedTabStore.getState(),
+			history: inputHistoryStore.getState(),
+			value: ''
 		};
 	},
 
@@ -34,14 +39,34 @@ var MessageInput = React.createClass({
 			} else {
 				messageActions.send(e.target.value, tab.channel, tab.server);
 			}
-			e.target.value = '';
+
+			inputHistoryActions.add(e.target.value);
+			inputHistoryActions.reset();
+			this.setState({ value: '' });
+		} else if (e.which === 38) {
+			e.preventDefault();
+			inputHistoryActions.increment();
+		} else if (e.which === 40) {
+			inputHistoryActions.decrement();
+		} else if (e.key === 'Unidentified') {
+			inputHistoryActions.reset();
 		}
 	},
 
+	handleChange: function(e) {
+		this.setState({ value: e.target.value });
+	},
+
 	render: function() {
 		return (
 			<div className="message-input-wrap">
-				<input ref="input" className="message-input" type="text" onKeyDown={this.handleKey} />
+				<input 
+					ref="input" 
+					className="message-input" 
+					type="text" 
+					value={this.state.history || this.state.value}
+					onKeyDown={this.handleKey}
+					onChange={this.handleChange} />
 			</div>
 		);
 	}

client/src/js/stores/inputHistory.js

@@ -0,0 +1,53 @@
+var Reflux = require('reflux');
+var _ = require('lodash');
+
+var actions = require('../actions/inputHistory');
+
+var HISTORY_MAX_LENGTH = 128;
+
+var history = [];
+var index = -1;
+
+var inputHistoryStore = Reflux.createStore({
+	init: function() {
+		this.listenToMany(actions);
+	},
+
+	add: function(line) {
+		if (line.trim() && line !== history[0]) {
+			history.unshift(line);
+			if (history.length > HISTORY_MAX_LENGTH) {
+				history.pop();
+			}
+			this.trigger(history[index]);
+		}
+	},
+
+	reset: function() {
+		index = -1;
+		this.trigger(history[index]);
+	},
+
+	increment: function() {
+		if (index !== history.length - 1) {
+			index++;
+			this.trigger(history[index]);
+		}
+	},
+
+	decrement: function() {
+		if (index !== -1) {
+			index--;
+			this.trigger(history[index]);
+		}
+	},
+
+	getState: function() {
+		if (index !== -1) {
+			return history[index];
+		}
+		return null;
+	}
+});
+
+module.exports = inputHistoryStore;

client/src/js/stores/server.js

@@ -45,7 +45,10 @@ var serverStore = Reflux.createStore({
 	},
 
 	getNick: function(server) {
+		if (servers[server]) {
 			return servers[server].nick;
+		}
+		return null;
 	},
 
 	getName: function(server) {