diff --git a/package.json b/package.json index 0946b25c..539367dc 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ }, "dependencies": { "backbone": "^1.4.0", + "fbjs": "^1.0.0", "flux": "^3.1.3", "jquery": "^3.4.0", "markdown": "^0.5.0", diff --git a/src/js/level/index.js b/src/js/level/index.js index 4bac1b5b..43540760 100644 --- a/src/js/level/index.js +++ b/src/js/level/index.js @@ -1,11 +1,12 @@ var Q = require('q'); +var React = require('react'); +var ReactDOM = require('react-dom'); var util = require('../util'); var Main = require('../app'); var intl = require('../intl'); var log = require('../log'); -var React = require('react'); var Errors = require('../util/errors'); var Sandbox = require('../sandbox/').Sandbox; var GlobalStateActions = require('../actions/GlobalStateActions'); @@ -139,7 +140,7 @@ var Level = Sandbox.extend({ parent: this } ); - React.render( + ReactDOM.render( this.levelToolbar, document.getElementById('levelToolbarMount') ); @@ -543,7 +544,7 @@ var Level = Sandbox.extend({ }, die: function() { - React.unmountComponentAtNode( + ReactDOM.unmountComponentAtNode( document.getElementById('levelToolbarMount') ); diff --git a/src/js/react_views/CommandHistoryView.jsx b/src/js/react_views/CommandHistoryView.jsx index eda82fce..a5f1240b 100644 --- a/src/js/react_views/CommandHistoryView.jsx +++ b/src/js/react_views/CommandHistoryView.jsx @@ -13,7 +13,7 @@ var _subscribeEvents = [ class CommandHistoryView extends React.Component { - componentDidMount() { + componentDidMount() { for (var i = 0; i < _subscribeEvents.length; i++) { this.props.commandCollection.on( _subscribeEvents[i], @@ -24,7 +24,7 @@ class CommandHistoryView extends React.Component { this.props.commandCollection.on('change', this.scrollDown, this); Main.getEvents().on('commandScrollDown', this.scrollDown, this); - Main.getEvents().on('clearOldCommands', this.clearOldCommands, this); + Main.getEvents().on('clearOldCommands', () => this.clearOldCommands(), this); } componentWillUnmount() { diff --git a/src/js/react_views/CommandView.jsx b/src/js/react_views/CommandView.jsx index df7b1f64..d887af3c 100644 --- a/src/js/react_views/CommandView.jsx +++ b/src/js/react_views/CommandView.jsx @@ -1,8 +1,9 @@ var React = require('react'); +var ReactDOM = require('react-dom'); var PropTypes = require('prop-types'); var reactUtil = require('../util/reactUtil'); -var keyMirror = require('react/lib/keyMirror'); +var keyMirror = require('fbjs/lib/keyMirror'); var STATUSES = keyMirror({ inqueue: null, @@ -24,16 +25,7 @@ class CommandView extends React.Component{ } onModelDestroy() { - if (!this.isMounted()) { - return; - } - if (!this.getDOMNode) { - // WTF -- only happens in casperjs tests weirdly - console.error('this.getDOMNode not a function?'); - return; - } - - React.unmountComponentAtNode(this.getDOMNode().parentNode); + ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).parentNode); } updateStateFromModel() { diff --git a/src/js/react_views/LevelToolbarView.jsx b/src/js/react_views/LevelToolbarView.jsx index e3dfe77f..b498df63 100644 --- a/src/js/react_views/LevelToolbarView.jsx +++ b/src/js/react_views/LevelToolbarView.jsx @@ -14,12 +14,17 @@ class LevelToolbarView extends React.Component { }; } + componentWillUnmount() { + this._isMounted = false; + } componentDidMount() { + this._isMounted = true; this.setState({ - isHidden: this.props.parent.getIsGoalExpanded() + isHidden: this.props.parent.getIsGoalExpanded(), + isGoalExpanded: this.props.parent.getIsGoalExpanded() }); this.props.parent.on('goalToggled', function() { - if (!this.isMounted()) { + if (!this._isMounted) { return; }