BOOYAH BABY FIRST BACKBONE VIEW REMOVED REACT FTW

src/js/app/index.js

@@ -6,7 +6,6 @@ var util = require('../util');
 var intl = require('../intl');
 var LocaleStore = require('../stores/LocaleStore');
 var LocaleActions = require('../actions/LocaleActions');
-var Dialog = require('../react_views/TestView.jsx').Dialog;
 
 /**
  * Globals
@@ -217,10 +216,11 @@ var initDemo = function(sandbox) {
     ];
   }
   if (params.hasOwnProperty('STARTREACT')) {
+    /*
     React.render(
-      React.createElement(Dialog, {}),
+      React.createElement(CommandView, {}),
       document.getElementById(params['STARTREACT'])
-    );
+      );*/
   }
   if (commands) {
     sandbox.mainVis.customEvents.on('gitEngineReady', function() {

src/js/models/commandModel.js

@@ -201,20 +201,13 @@ var Command = Backbone.Model.extend({
   },
 
   addWarning: function(msg) {
+    console.log('this is the warning', msg);
     this.get('warnings').push(msg);
     // change numWarnings so the change event fires. This is bizarre -- Backbone can't
     // detect if an array changes, so adding an element does nothing
     this.set('numWarnings', this.get('numWarnings') ? this.get('numWarnings') + 1 : 1);
   },
 
-  getFormattedWarnings: function() {
-    if (!this.get('warnings').length) {
-      return '';
-    }
-    var i = '<i class="icon-exclamation-sign"></i>';
-    return '<p>' + i + this.get('warnings').join('</p><p>' + i) + '</p>';
-  },
-
   parseOrCatch: function() {
     this.expandShortcuts(this.get('rawStr'));
     try {
@@ -253,7 +246,7 @@ var Command = Backbone.Model.extend({
   },
 
   formatError: function() {
-    this.set('result', this.get('error').toResult());
+    this.set('result', this.get('error').getMsg());
   },
 
   expandShortcuts: function(str) {

src/js/react_views/CommandView.jsx

@@ -0,0 +1,114 @@
+var React = require('react');
+
+var reactUtil = require('../util/reactUtil');
+var keyMirror = require('react/lib/keyMirror');
+
+var STATUSES = keyMirror({
+  inqueue: null,
+  processing: null,
+  finished: null
+});
+
+var CommandView = React.createClass({
+
+  propTypes: {
+    // the backbone command model
+    command: React.PropTypes.object.isRequired
+  },
+
+  componentDidMount: function() {
+    this.props.command.on('change', this.updateStateFromModel, this);
+    this.updateStateFromModel();
+  },
+
+  componentWillUnmount: function() {
+    this.props.command.off('change', this.updateStateFromModel, this);
+  },
+
+  updateStateFromModel: function() {
+    var commandJSON = this.props.command.toJSON();
+    this.setState({
+      status: commandJSON.status,
+      rawStr: commandJSON.rawStr,
+      warnings: commandJSON.warnings,
+      result: commandJSON.result
+    });
+  },
+
+  getInitialState: function() {
+    return {
+      status: STATUSES.inqueue,
+      rawStr: 'git commit',
+      warnings: [],
+      result: ''
+    };
+  },
+
+  render: function() {
+    var commandClass = reactUtil.joinClasses([
+      this.state.status,
+      'commandLine',
+      'transitionBackground'
+    ]);
+
+    return (
+      <div className="reactCommandView">
+        <p className={commandClass}>
+          <span className="prompt">{'$'}</span>
+          {' ' + this.state.rawStr}
+          <span className="icons transitionAllSlow">
+            <i className="icon-exclamation-sign"></i>
+            <i className="icon-check-empty"></i>
+            <i className="icon-retweet"></i>
+            <i className="icon-check"></i>
+          </span>
+        </p>
+        {this.renderResult()}
+        <div className="commandLineWarnings">
+          {this.renderFormattedWarnings()}
+        </div>
+      </div>
+    );
+  },
+
+  renderResult: function() {
+    if (!this.state.result) {
+      return null;
+    }
+    // We are going to get a ton of raw markup here
+    // so lets split into paragraphs ourselves
+    var paragraphs = this.state.result.split("\n");
+    var result = [];
+    for (var i = 0; i < paragraphs.length; i++) {
+      result.push(
+        <p
+          key={'paragraph_' + i}
+          dangerouslySetInnerHTML={{
+            __html: paragraphs[i]
+          }}
+        />
+      );
+    }
+    return (
+      <div className={'commandLineResult'}>
+        {result}
+      </div>
+    );
+  },
+
+  renderFormattedWarnings: function() {
+    var warnings = this.state.warnings;
+    var result = [];
+    for (var i = 0; i < warnings.length; i++) {
+      result.push(
+        <p key={'warning_' + i}>
+          <i class="icon-exclamation-sign"></i>
+          {warnings[i]}
+        </p>
+      );
+    }
+    return result;
+  }
+});
+
+module.exports = CommandView;

src/js/react_views/TestView.jsx

@@ -1,71 +0,0 @@
-var React = require('react');
-
-var reactUtil = require('../util/reactUtil');
-var keyMirror = require('react/lib/keyMirror');
-
-var STATUSES = keyMirror({
-  IN_QUEUE: null,
-  PROCESSING: null,
-  FINISHED: null
-});
-
-var STATUS_TO_CLASS = {};
-STATUS_TO_CLASS[STATUSES.IN_QUEUE] = 'inqueue';
-STATUS_TO_CLASS[STATUSES.PROCESSING] = 'processing';
-STATUS_TO_CLASS[STATUSES.FINISHED] = 'finished';
-
-var CommandView = React.createClass({
-
-  getInitialState: function() {
-    return {
-      status: STATUSES.IN_QUEUE,
-      rawStr: 'git commit',
-      resultType: '',
-      result: '',
-      formattedWarnings: ''
-    };
-  },
-
-  render: function() {
-    var commandClass = reactUtil.joinClasses([
-      STATUS_TO_CLASS[this.state.status],
-      'commandLine',
-      'transitionBackground'
-    ]);
-
-    // TODO add 0px 5px margin to icons
-
-    return (
-      <div className="reactCommandView">
-        <p className={commandClass}>
-          <span className="prompt">{'$'}</span>
-          {' ' + this.state.rawStr}
-          <span className="icons transitionAllSlow">
-            <i className="icon-exclamation-sign"></i>
-            <i className="icon-check-empty"></i>
-            <i className="icon-retweet"></i>
-            <i className="icon-check"></i>
-          </span>
-        </p>
-
-        <div className={'commandLineResult ' + this.state.resultType}>
-          {this.state.result}
-        </div>
-
-        <div className="commandLineWarnings">
-          {this.state.formattedWarnings}
-        </div>
-      </div>
-    );
-  }
-});
-
-var Dialog = React.createClass({
-  render: function() {
-    return (
-      <CommandView />
-    );
-  }
-});
-
-exports.Dialog = Dialog;

src/js/util/errors.js

@@ -12,13 +12,6 @@ var MyError = Backbone.Model.extend({
 
   getMsg: function() {
     return this.get('msg') || 'Unknown Error';
-  },
-
-  toResult: function() {
-    if (!this.get('msg').length) {
-      return '';
-    }
-    return '<p>' + this.get('msg').replace(/\n/g, '</p><p>') + '</p>';
   }
 });
 

src/js/views/commandViews.js

@@ -1,10 +1,12 @@
 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;
@@ -203,75 +205,6 @@ var CommandPromptView = Backbone.View.extend({
   }
 });
 
-// This is the view for all commands -- it will represent
-// their status (inqueue, processing, finished, error),
-// their value ("git commit --amend"),
-// and the result (either errors or warnings or whatever)
-var CommandView = Backbone.View.extend({
-  tagName: 'div',
-  model: Command,
-  template: _.template($('#command-template').html()),
-
-  events: {
-    'click': 'clicked'
-  },
-
-  clicked: function(e) {
-  },
-
-  initialize: function() {
-    this.model.bind('change', this.wasChanged, this);
-    this.model.bind('destroy', this.remove, this);
-  },
-
-  wasChanged: function(model, changeEvent) {
-    // for changes that are just comestic, we actually only want to toggle classes
-    // with jquery rather than brutally delete a html. doing so allows us
-    // to nicely fade things
-    var changes = changeEvent.changes || {};
-    var changeKeys = Object.keys(changes);
-    if (_.difference(changeKeys, ['status']).length === 0) {
-      this.updateStatus();
-    } else {
-      this.render();
-    }
-  },
-
-  updateStatus: function() {
-    var statuses = ['inqueue', 'processing', 'finished'];
-    var toggleMap = {};
-    _.each(statuses, function(status) {
-      toggleMap[status] = false;
-    });
-    toggleMap[this.model.get('status')] = true;
-
-    var query = this.$('p.commandLine');
-
-    _.each(toggleMap, function(value, key) {
-      query.toggleClass(key, value);
-    });
-  },
-
-  render: function() {
-    var json = _.extend(
-      {
-        resultType: '',
-        result: '',
-        formattedWarnings: this.model.getFormattedWarnings()
-      },
-      this.model.toJSON()
-    );
-
-    this.$el.html(this.template(json));
-    return this;
-  },
-
-  remove: function() {
-    $(this.el).hide();
-  }
-});
-
-
 var CommandLineHistoryView = Backbone.View.extend({
   initialize: function(options) {
     this.collection = options.collection;
@@ -331,10 +264,13 @@ var CommandLineHistoryView = Backbone.View.extend({
   },
 
   addOne: function(command) {
-    var view = new CommandView({
+    var div = document.createElement('div');
-      model: command
+    div.id = command.cid;
-    });
+    React.render(
-    this.$('#commandDisplay').append(view.render().el);
+      React.createElement(CommandView, {command: command}),
+      div
+    );
+    this.$('#commandDisplay').append(div);
     this.scrollDown();
   },
 

src/template.index.html

@@ -101,27 +101,6 @@
   <!-- Templates from here on out. Someone seriously needs to fix template
        management for node.js apps. I know there is the text plugin
        for requireJS but that's lame. For now, they are all listed here... -->
-  <script type="text/html" id="command-template">
-       <p class="commandLine transitionBackground <%= status %>">
-        <span class="prompt">$</span>
-        <%= rawStr %>
-        <span class="icons transitionAllSlow">
-          <i class="icon-exclamation-sign"></i>
-          <i class="icon-check-empty"></i>
-          <i class="icon-retweet"></i>
-          <i class="icon-check"></i>
-        </span>
-      </p>
-
-      <div class="commandLineResult <%= resultType %>">
-        <%= result %>
-      </div>
-
-      <div class="commandLineWarnings">
-        <%= formattedWarnings %>
-      </div>
-  </script>
-
   <script type="text/html" id="helper-bar-template">
     <% for(var i = 0; i < items.length; i++) { %>
       <% if (items[i].text) { %>