BOOM redid the command history view

src/js/app/index.js

@@ -1,6 +1,7 @@
 var _ = require('underscore');
 var Backbone = require('backbone');
 var React = require('react');
+var CommandHistoryView = require('../react_views/CommandHistoryView.jsx');
 
 var util = require('../util');
 var intl = require('../intl');
@@ -292,10 +293,13 @@ function CommandUI() {
     el: $('#commandLineBar')
   });
 
-  this.commandLineHistoryView = new CommandViews.CommandLineHistoryView({
+  React.render(
-    el: $('#commandLineHistory'),
+    React.createElement(
-    collection: this.commandCollection
+      CommandHistoryView,
-  });
+      { commandCollection: this.commandCollection }
+    ),
+    document.getElementById('commandDisplay')
+  );
 }
 
 exports.getEvents = function() {

src/js/models/commandModel.js

@@ -29,7 +29,7 @@ var Command = Backbone.Model.extend({
 
   },
 
-  initialize: function(options) {
+  initialize: function() {
     this.initDefaults();
     this.validateAtInit();
 

src/js/react_views/CommandHistoryView.jsx

@@ -0,0 +1,103 @@
+var CommandView = require('../react_views/CommandView.jsx');
+var Main = require('../app');
+var React = require('react');
+
+var reactUtil = require('../util/reactUtil');
+
+var _subscribeEvents = [
+  'add',
+  'reset',
+  'change',
+  'all'
+];
+
+var CommandHistoryView = React.createClass({
+
+  propTypes: {
+    // the backbone command model collection
+    commandCollection: React.PropTypes.object.isRequired
+  },
+
+  componentDidMount: function() {
+    for (var i = 0; i < _subscribeEvents.length; i++) {
+      this.props.commandCollection.on(
+        _subscribeEvents[i],
+        this.updateFromCollection,
+        this
+      );
+    }
+
+    this.props.commandCollection.on('change', this.scrollDown, this);
+    Main.getEvents().on('commandScrollDown', this.scrollDown, this);
+    Main.getEvents().on('clearOldCommands', this.clearOldCommands, this);
+  },
+
+  componentWillUnmount: function() {
+    for (var i = 0; i < _subscribeEvents.length; i++) {
+      this.props.commandCollection.off(
+        _subscribeEvents[i],
+        this.updateFromCollection,
+        this
+      );
+    }
+  },
+
+  updateFromCollection: function() {
+    this.forceUpdate();
+  },
+
+  render: function() {
+    var allCommands = [];
+    this.props.commandCollection.each(function(command) {
+      allCommands.push(
+        <CommandView command={command} key={command.cid} />
+      );
+    }, this);
+    return (
+      <div>
+        {allCommands}
+      </div>
+    );
+  },
+
+  scrollDown: function() {
+    var cD = this.getDOMNode();
+    var t = document.getElementById('terminal');
+
+    // firefox hack
+    var shouldScroll = (cD.clientHeight > t.clientHeight) ||
+      (window.innerHeight < cD.clientHeight);
+
+    // ugh sometimes i wish i had toggle class
+    var hasScroll = t.className.match(/shouldScroll/g);
+    if (shouldScroll && !hasScroll) {
+      t.className += ' scrolling';
+    } else if (!shouldScroll && hasScroll) {
+      t.className = t.className.replace(/shouldScroll/g, '');
+    }
+
+    if (shouldScroll) {
+      t.scrollTop = t.scrollHeight;
+    }
+  },
+
+  clearOldCommands: function() {
+    // go through and get rid of every command that is "processed" or done
+    var toDestroy = [];
+
+    this.props.commandCollection.each(function(command) {
+      if (command.get('status') !== 'inqueue' &&
+          command.get('status') !== 'processing') {
+        toDestroy.push(command);
+      }
+    }, this);
+    for (var i = 0; i < toDestroy.length; i++) {
+      toDestroy[i].destroy();
+    }
+    this.updateFromCollection();
+    this.scrollDown();
+  }
+
+});
+
+module.exports = CommandHistoryView;

src/js/views/commandViews.js

@@ -1,21 +1,15 @@
 var _ = require('underscore');
 var Backbone = require('backbone');
-var React = require('react');
 
 var Main = require('../app');
-var Command = require('../models/commandModel').Command;
 var CommandLineStore = require('../stores/CommandLineStore');
 var CommandLineActions = require('../actions/CommandLineActions');
-var CommandView = require('../react_views/CommandView.jsx');
-
-var Errors = require('../util/errors');
-var Warning = Errors.Warning;
 
 var log = require('../log');
 var keyboard = require('../util/keyboard');
 
 var CommandPromptView = Backbone.View.extend({
-  initialize: function(options) {
+  initialize: function() {
     Main.getEvents().on('commandSubmittedPassive', this.addToCommandHistory, this);
 
     this.index = -1;
@@ -205,81 +199,5 @@ var CommandPromptView = Backbone.View.extend({
   }
 });
 
-var CommandLineHistoryView = Backbone.View.extend({
-  initialize: function(options) {
-    this.collection = options.collection;
-    this.commandNum = 0;
-
-    this.collection.on('add', this.addOne, this);
-    this.collection.on('reset', this.addAll, this);
-    this.collection.on('all', this.render, this);
-
-    this.collection.on('change', this.scrollDown, this);
-    Main.getEvents().on('commandScrollDown', this.scrollDown, this);
-    Main.getEvents().on('clearOldCommands', this.clearOldCommands, this);
-  },
-
-  addWarning: function(msg) {
-    var err = new Warning({
-      msg: msg
-    });
-
-    var command = new Command({
-      error: err,
-      rawStr: 'Warning:'
-    });
-
-    this.collection.add(command);
-  },
-
-  clearOldCommands: function() {
-    // go through and get rid of every command that is "processed" or done
-    var toDestroy = [];
-
-    this.collection.each(function(command) {
-      if (command.get('status') !== 'inqueue' &&
-          command.get('status') !== 'processing') {
-        toDestroy.push(command);
-      }
-    }, this);
-
-    _.each(toDestroy, function(command) {
-      command.destroy();
-    }, this);
-    this.scrollDown();
-  },
-
-  scrollDown: function() {
-    // if commandDisplay is ever bigger than #terminal, we need to
-    // add overflow-y to terminal and scroll down
-    var cD = $('#commandDisplay')[0];
-    var t = $('#terminal')[0];
-
-    // firefox hack
-    var shouldScroll = (cD.clientHeight > t.clientHeight) ||
-      ($(window).height() < cD.clientHeight);
-    $(t).toggleClass('scrolling', shouldScroll);
-    if (shouldScroll) {
-      t.scrollTop = t.scrollHeight;
-    }
-  },
-
-  addOne: function(command) {
-    var div = document.createElement('div');
-    div.id = 'command_' + this.commandNum++;
-    React.render(
-      React.createElement(CommandView, {command: command}),
-      div
-    );
-    this.$('#commandDisplay').append(div);
-    this.scrollDown();
-  },
-
-  addAll: function() {
-    this.collection.each(this.addOne);
-  }
-});
-
 exports.CommandPromptView = CommandPromptView;
-exports.CommandLineHistoryView = CommandLineHistoryView;