migrating old version react to last version

package.json

@@ -34,9 +34,12 @@
   "dependencies": {
     "backbone": "^1.4.0",
     "flux": "^3.1.3",
+    "jquery": "^3.4.0",
     "markdown": "^0.5.0",
+    "prop-types": "^15.7.2",
     "q": "^1.5.1",
     "react": "^16.8.6",
+    "react-dom": "^16.8.6",
     "underscore": "~1.4.3"
   }
 }

src/js/app/index.js

@@ -1,6 +1,7 @@
 var Backbone = require('backbone');
 var EventEmitter = require('events').EventEmitter;
 var React = require('react');
+var ReactDOM = require('react-dom');
 
 var util = require('../util');
 var intl = require('../intl');
@@ -251,7 +252,7 @@ var initDemo = function(sandbox) {
   }
   if (params.hasOwnProperty('STARTREACT')) {
     /*
-    React.render(
+    ReactDOM.render(
       React.createElement(CommandView, {}),
       document.getElementById(params['STARTREACT'])
       );*/
@@ -315,11 +316,11 @@ function CommandUI() {
     el: $('#commandLineBar')
   });
 
-  React.render(
+  ReactDOM.render(
     React.createElement(MainHelperBarView),
     document.getElementById('helperBarMount')
   );
-  React.render(
+  ReactDOM.render(
     React.createElement(
       CommandHistoryView,
       { commandCollection: this.commandCollection }

src/js/react_views/CommandHistoryView.jsx

@@ -1,6 +1,8 @@
+var React = require('react');
+var PropTypes = require('prop-types');
+
 var CommandView = require('../react_views/CommandView.jsx');
 var Main = require('../app');
-var React = require('react');
 
 var _subscribeEvents = [
   'add',
@@ -9,14 +11,9 @@ var _subscribeEvents = [
   'all'
 ];
 
-var CommandHistoryView = React.createClass({
+class CommandHistoryView extends React.Component {
 
-  propTypes: {
-    // the backbone command model collection
-    commandCollection: React.PropTypes.object.isRequired
-  },
-
-  componentDidMount: function() {
+   componentDidMount() {
     for (var i = 0; i < _subscribeEvents.length; i++) {
       this.props.commandCollection.on(
         _subscribeEvents[i],
@@ -28,9 +25,9 @@ var CommandHistoryView = React.createClass({
     this.props.commandCollection.on('change', this.scrollDown, this);
     Main.getEvents().on('commandScrollDown', this.scrollDown, this);
     Main.getEvents().on('clearOldCommands', this.clearOldCommands, this);
-  },
+  }
 
-  componentWillUnmount: function() {
+  componentWillUnmount() {
     for (var i = 0; i < _subscribeEvents.length; i++) {
       this.props.commandCollection.off(
         _subscribeEvents[i],
@@ -38,13 +35,13 @@ var CommandHistoryView = React.createClass({
         this
       );
     }
-  },
+  }
 
-  updateFromCollection: function() {
+  updateFromCollection() {
     this.forceUpdate();
-  },
+  }
 
-  render: function() {
+  render() {
     var allCommands = [];
     this.props.commandCollection.each(function(command, index) {
       allCommands.push(
@@ -60,9 +57,9 @@ var CommandHistoryView = React.createClass({
         {allCommands}
       </div>
     );
-  },
+  }
 
-  scrollDown: function() {
+  scrollDown() {
     var cD = document.getElementById('commandDisplay');
     var t = document.getElementById('terminal');
 
@@ -81,9 +78,9 @@ var CommandHistoryView = React.createClass({
     if (shouldScroll) {
       t.scrollTop = t.scrollHeight;
     }
-  },
+  }
 
-  clearOldCommands: function() {
+  clearOldCommands() {
     // go through and get rid of every command that is "processed" or done
     var toDestroy = [];
 
@@ -100,6 +97,11 @@ var CommandHistoryView = React.createClass({
     this.scrollDown();
   }
 
-});
+}
+
+CommandHistoryView.propTypes = {
+  // the backbone command model collection
+  commandCollection: PropTypes.object.isRequired
+};
 
 module.exports = CommandHistoryView;

src/js/react_views/CommandView.jsx

@@ -1,4 +1,5 @@
 var React = require('react');
+var PropTypes = require('prop-types');
 
 var reactUtil = require('../util/reactUtil');
 var keyMirror = require('react/lib/keyMirror');
@@ -9,26 +10,20 @@ var STATUSES = keyMirror({
   finished: null
 });
 
-var CommandView = React.createClass({
+class CommandView extends React.Component{
 
-  propTypes: {
-    // the backbone command model
-    command: React.PropTypes.object.isRequired,
-    id: React.PropTypes.string,
-  },
-
-  componentDidMount: function() {
+  componentDidMount() {
     this.props.command.on('change', this.updateStateFromModel, this);
     this.props.command.on('destroy', this.onModelDestroy, this);
     this.updateStateFromModel();
-  },
+  }
 
-  componentWillUnmount: function() {
+  componentWillUnmount() {
     this.props.command.off('change', this.updateStateFromModel, this);
     this.props.command.off('destroy', this.onModelDestroy, this);
-  },
+  }
 
-  onModelDestroy: function() {
+  onModelDestroy() {
     if (!this.isMounted()) {
       return;
     }
@@ -39,9 +34,9 @@ var CommandView = React.createClass({
     }
 
     React.unmountComponentAtNode(this.getDOMNode().parentNode);
-  },
+  }
 
-  updateStateFromModel: function() {
+  updateStateFromModel() {
     var commandJSON = this.props.command.toJSON();
     this.setState({
       status: commandJSON.status,
@@ -49,18 +44,19 @@ var CommandView = React.createClass({
       warnings: commandJSON.warnings,
       result: commandJSON.result
     });
-  },
+  }
 
-  getInitialState: function() {
-    return {
+  constructor(props, context) {
+    super(props, context);
+    this.state = {
       status: STATUSES.inqueue,
       rawStr: 'git commit',
       warnings: [],
       result: ''
     };
-  },
+  }
 
-  render: function() {
+  render() {
     var commandClass = reactUtil.joinClasses([
       this.state.status,
       'commandLine',
@@ -89,9 +85,9 @@ var CommandView = React.createClass({
         </div>
       </div>
     );
-  },
+  }
 
-  renderResult: function() {
+  renderResult() {
     if (!this.state.result) {
       return null;
     }
@@ -126,9 +122,9 @@ var CommandView = React.createClass({
         {result}
       </div>
     );
-  },
+  }
 
-  renderFormattedWarnings: function() {
+  renderFormattedWarnings() {
     var warnings = this.state.warnings;
     var result = [];
     for (var i = 0; i < warnings.length; i++) {
@@ -141,6 +137,12 @@ var CommandView = React.createClass({
     }
     return result;
   }
-});
+};
+
+CommandView.propTypes = {
+  // the backbone command model
+  command: PropTypes.object.isRequired,
+  id: PropTypes.string,
+};
 
 module.exports = CommandView;

src/js/react_views/CommandsHelperBarView.jsx

@@ -1,31 +1,27 @@
+var React = require('react');
+var PropTypes = require('prop-types');
 var HelperBarView = require('../react_views/HelperBarView.jsx');
 var Main = require('../app');
-var React = require('react');
 
 var log = require('../log');
 
-var CommandsHelperBarView = React.createClass({
+class CommandsHelperBarView extends React.Component {
 
-  propTypes: {
-    shown: React.PropTypes.bool.isRequired,
-    onExit: React.PropTypes.func.isRequired
-  },
-
-  render: function() {
+  render() {
     return (
       <HelperBarView
         items={this.getItems()}
         shown={this.props.shown}
       />
     );
-  },
+  }
 
-  fireCommand: function(command) {
+  fireCommand(command) {
     log.viewInteracted('commandHelperBar');
     Main.getEventBaton().trigger('commandSubmitted', command);
-  },
+  }
 
-  getItems: function() {
+  getItems() {
     return [{
       text: 'Levels',
       onClick: function() {
@@ -64,6 +60,11 @@ var CommandsHelperBarView = React.createClass({
     }];
   }
 
-});
+};
+
+CommandsHelperBarView.propTypes = {
+  shown: PropTypes.bool.isRequired,
+  onExit: PropTypes.func.isRequired
+};
 
 module.exports = CommandsHelperBarView;

src/js/react_views/HelperBarView.jsx

@@ -1,16 +1,11 @@
 var React = require('react');
+var PropTypes = require('prop-types');
 
 var reactUtil = require('../util/reactUtil');
 
-var HelperBarView = React.createClass({
+class HelperBarView extends React.Component {
 
-  propTypes: {
-    className: React.PropTypes.string,
-    shown: React.PropTypes.bool.isRequired,
-    items: React.PropTypes.array.isRequired
-  },
-
-  render: function() {
+  render() {
     var topClassName = reactUtil.joinClasses([
       'helperBar',
       'transitionAll',
@@ -32,9 +27,9 @@ var HelperBarView = React.createClass({
         }.bind(this))}
       </div>
     );
-  },
+  }
 
-  renderItem: function(item, index) {
+  renderItem(item, index) {
     var testID = item.icon || item.testID ||
       item.text.toLowerCase();
     if (item.newPageLink) {
@@ -63,6 +58,13 @@ var HelperBarView = React.createClass({
     );
   }
 
-});
+};
+
+HelperBarView.propTypes = {
+  className: PropTypes.string,
+  shown: PropTypes.bool.isRequired,
+  items: PropTypes.array.isRequired
+};
+
 
 module.exports = HelperBarView;

src/js/react_views/IntlHelperBarView.jsx

@@ -1,32 +1,29 @@
+var PropTypes = require('prop-types');
+
 var HelperBarView = require('../react_views/HelperBarView.jsx');
 var Main = require('../app');
 var React = require('react');
 
 var log = require('../log');
 
-var IntlHelperBarView = React.createClass({
+class IntlHelperBarView extends React.Component{
 
-  propTypes: {
-    shown: React.PropTypes.bool.isRequired,
-    onExit: React.PropTypes.func.isRequired
-  },
-
-  render: function() {
+  render() {
     return (
       <HelperBarView
         items={this.getItems()}
         shown={this.props.shown}
       />
     );
-  },
+  }
 
-  fireCommand: function(command) {
+  fireCommand(command) {
     log.viewInteracted('intlSelect');
     Main.getEventBaton().trigger('commandSubmitted', command);
     this.props.onExit();
-  },
+  }
 
-  getItems: function() {
+  getItems() {
     return [{
       text: 'Git Branching',
       testID: 'english',
@@ -107,6 +104,11 @@ var IntlHelperBarView = React.createClass({
     }];
   }
 
-});
+};
+
+IntlHelperBarView.propTypes = {
+  shown: PropTypes.bool.isRequired,
+  onExit: PropTypes.func.isRequired
+}
 
 module.exports = IntlHelperBarView;

src/js/react_views/LevelToolbarView.jsx

@@ -1,26 +1,20 @@
 var React = require('react');
-var PropTypes = React.PropTypes;
+var PropTypes = require('prop-types');
 
 var intl = require('../intl');
 var reactUtil = require('../util/reactUtil');
 
-var LevelToolbarView = React.createClass({
+class LevelToolbarView extends React.Component {
 
-  propTypes: {
-    name: PropTypes.string.isRequired,
-    onGoalClick: PropTypes.func.isRequired,
-    onObjectiveClick: PropTypes.func.isRequired,
-    parent: PropTypes.object.isRequired
-  },
-
-  getInitialState: function() {
-    return {
+  constructor(props, context) {
+    super(props, context);
+    this.state = {
       isHidden: true,
       isGoalExpanded: this.props.parent.getIsGoalExpanded()
     };
-  },
+  }
 
-  componentDidMount: function() {
+  componentDidMount() {
     this.setState({
       isHidden: this.props.parent.getIsGoalExpanded()
     });
@@ -33,9 +27,9 @@ var LevelToolbarView = React.createClass({
         isGoalExpanded: this.props.parent.getIsGoalExpanded()
       });
     }.bind(this));
-  },
+  }
 
-  render: function() {
+  render() {
     return (
       <div className={reactUtil.joinClasses([
           'toolbar',
@@ -78,6 +72,13 @@ var LevelToolbarView = React.createClass({
     );
   }
 
-});
+};
+
+LevelToolbarView.propTypes = {
+  name: PropTypes.string.isRequired,
+  onGoalClick: PropTypes.func.isRequired,
+  onObjectiveClick: PropTypes.func.isRequired,
+  parent: PropTypes.object.isRequired
+}
 
 module.exports = LevelToolbarView;

src/js/react_views/MainHelperBarView.jsx

@@ -14,15 +14,16 @@ var BARS = keyMirror({
   COMMANDS: null
 });
 
-var MainHelperBarView = React.createClass({
+class MainHelperBarView extends React.Component {
 
-  getInitialState: function() {
-    return {
+  constructor(props, context) {
+    super(props, context);
+    this.state = {
       shownBar: BARS.SELF
     };
-  },
+  }
 
-  render: function() {
+  render() {
     return (
       <div>
         <HelperBarView
@@ -40,15 +41,15 @@ var MainHelperBarView = React.createClass({
         />
       </div>
     );
-  },
+  }
 
-  showSelf: function() {
+  showSelf() {
     this.setState({
       shownBar: BARS.SELF
     });
-  },
+  }
 
-  getItems: function() {
+  getItems() {
     return [{
       icon: 'question-sign',
       onClick: function() {
@@ -74,6 +75,6 @@ var MainHelperBarView = React.createClass({
     }];
   }
 
-});
+};
 
 module.exports = MainHelperBarView;

src/js/visuals/animation/index.js

@@ -55,7 +55,7 @@ var AnimationQueue = Backbone.Model.extend({
   },
 
   add: function(animation) {
-    if (!animation instanceof Animation) {
+    if (!(animation instanceof Animation)) {
       throw new Error("Need animation not something else");
     }