upgrade JS packages: React 15.x, react-router 2.4.1, reflux 0.4.1

arachnado/static/js/components/ConnectionMonitor.jsx

@@ -3,6 +3,7 @@ A widget which shows if a server is idle/crawling or if we're not connected.
 */
 
 var React = require('react');
+var ReactDOM = require("react-dom");
 var Reflux = require('reflux');
 var { Label } = require('react-bootstrap');
 var ConnectionStore = require("../stores/ConnectionStore");
@@ -38,5 +39,5 @@ var ConnectionMonitor = React.createClass({
 });
 
 export function install(elemId) {
-    React.render(<ConnectionMonitor />, document.getElementById(elemId));
+    ReactDOM.render(<ConnectionMonitor />, document.getElementById(elemId));
 }

arachnado/static/js/components/CrawlForm.jsx

@@ -55,7 +55,7 @@ export var CrawlForm = React.createClass({
     },
 
     onChange: function (ev) {
-        this.setState({value: this.refs.domainInput.getDOMNode().value});
+        this.setState({value: this.refs.domainInput.value});
     },
 
     onSubmit: function (ev) {

arachnado/static/js/components/JobList.jsx

@@ -4,7 +4,7 @@ var React = require("react");
 var Reflux = require("reflux");
 var filesize = require("filesize");
 var prettyMs = require('pretty-ms');
-var { Link, Navigation } = require('react-router');
+var { History, withRouter } = require('react-router');
 
 var { Table, Glyphicon, Button } = require("react-bootstrap");
 var JobStore = require("../stores/JobStore");
@@ -212,13 +212,14 @@ function _getRowInfo(job, curTime){
 }
 
 
-var JobRow = React.createClass({
-    mixins: [Navigation],
+var JobRow = withRouter(React.createClass({
     render: function () {
         var job = this.props.job;
         var info = _getRowInfo(job, this.props.serverTime);
         var style = {cursor: "pointer"};
-        var cb = () => { this.transitionTo("job", {id: job.id}) };
+        var cb = () => {
+            this.props.router.push(`/job/${job.id}`);
+        };
 
         var columns = [
             <td key='col-buttons'><JobControlIcons job={job}/></td>,
@@ -247,11 +248,10 @@ var JobRow = React.createClass({
         }
         return this.props.job.seed;
     },
-});
+}));
 
 
 var JobRowVerbose = React.createClass({
-    mixins: [Navigation],
     render: function () {
         var job = this.props.job;
         var info = _getRowInfo(job, this.props.serverTime);

arachnado/static/js/components/JobTransfers.jsx

@@ -1,7 +1,7 @@
 /*
 Widgets for job downloads info.
 */
-var React = require("react/addons");
+var React = require("react");
 //var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
 var Reflux = require("reflux");
 var filesize = require("filesize");

arachnado/static/js/components/KeyValueTable.jsx

@@ -8,7 +8,7 @@ export var KeyValueTable = React.createClass({
             var header = <thead></thead>;
         }
         else {
-            var header = <thead><th>Name</th><th className="col-md-3">Value</th></thead>;
+            var header = <thead><tr><th>Name</th><th className="col-md-3">Value</th></tr></thead>;
         }
 
         return <Table condensed style={{tableLayout: 'fixed'}}>

arachnado/static/js/components/ProcessStats.jsx

@@ -3,6 +3,7 @@
 var filesize = require("filesize");
 var prettyMs = require("pretty-ms");
 var React = require("react");
+var ReactDOM = require("react-dom");
 var Reflux = require("reflux");
 var { Table } = require("react-bootstrap");
 
@@ -55,5 +56,5 @@ export var ProcessStatsTable = React.createClass({
 
 
 export function installHeader(elemId) {
-    React.render(<HeaderProcessStats />, document.getElementById(elemId));
+    ReactDOM.render(<HeaderProcessStats />, document.getElementById(elemId));
 }

arachnado/static/js/main.jsx

@@ -1,8 +1,8 @@
 /* Main entry point */
 
 var React = require("react");
-var Router = require('react-router');
-var { Route, RouteHandler, Link, DefaultRoute, NotFoundRoute } = Router;
+var ReactDOM = require("react-dom");
+var { Router, Route, IndexRoute, hashHistory } = require('react-router');
 
 var { IndexPage } = require("./pages/IndexPage.jsx");
 var { JobPage } = require("./pages/JobPage.jsx");
@@ -23,21 +23,17 @@ var NotFound = React.createClass({
 var App = React.createClass({
   render () {
       // TODO: move most stuff from base.html here
-      return (
-          <RouteHandler/>
-      );
+      return this.props.children;
   }
 });
 
-var routes = (
-    <Route path="/" handler={App}>
-        <DefaultRoute handler={IndexPage} name="index" />
-        <Route path="job/:id" handler={JobPage} name="job" />
-        <Route path="sites" handler={SitesPage} name="sites" />
-        <NotFoundRoute handler={NotFound} />
-    </Route>
-);
-
-Router.run(routes, Router.HashLocation, (Root) => {
-    React.render(<Root/>, document.getElementById("arachnado-root"));
-});
+ReactDOM.render((
+    <Router history={hashHistory}>
+        <Route path="/" component={App}>
+            <IndexRoute component={IndexPage} />
+            <Route path="job/:id" component={JobPage} />
+            <Route path="sites" component={SitesPage} />
+            <Route path="*" component={NotFound} />
+        </Route>
+    </Router>
+), document.getElementById("arachnado-root"));

arachnado/static/js/pages/JobPage.jsx

@@ -53,7 +53,7 @@ var NoJobPage = React.createClass({
             <div>
                 <h2>Job is not found</h2>
                 <p>This job is either not available or never existed.</p>
-                <Link to="index">
+                <Link to="/">
                     <Glyphicon glyph="menu-left"/>&nbsp;
                     Back to Full Job List
                 </Link>
@@ -79,7 +79,7 @@ export var JobPage = React.createClass({
             <div className="row">
                 <div className="row">
                     <div className="col-lg-12">
-                        <Link to="index" className="btn">
+                        <Link to="/" className="btn">
                             <Glyphicon glyph="menu-left"/>&nbsp;All Jobs
                         </Link>&nbsp;&nbsp;
                         <JobControlButtons job={job}/>

arachnado/static/js/pages/SitesPage.jsx

@@ -3,8 +3,7 @@ var React = require("react");
 var Reflux = require("reflux");
 var moment = require('moment');
 var debounce = require("debounce");
-var { Link } = require('react-router');
-var { Input, Panel, Table, Button, ButtonGroup, ButtonToolbar, Glyphicon, ButtonToolbar, Modal } = require("react-bootstrap");
+var { Table, Button, Glyphicon, Modal } = require("react-bootstrap");
 var { KeyValueList } = require("../components/KeyValueList");
 var { keyValueListToDict } = require('../utils/SitesAPI');
 var JobStore = require("../stores/JobStore");
@@ -169,13 +168,13 @@ var SiteRow = React.createClass({
         this.sendState();
     },
     onNotesChange(e) {
-        var value = this.refs.notes.getDOMNode().value;
+        var value = this.refs.notes.value;
         this.state.site.notes = value;
         this.setState(this.state);
         this.sendState();
     },
     onScheduleChange() {
-        var value = this.refs.schedule.getDOMNode().value;
+        var value = this.refs.schedule.value;
         this.state.site.schedule = value;
         this.setState(this.state);
         this.sendState();
@@ -212,8 +211,8 @@ var AddSite = React.createClass({
 
     addSites() {
         var urlRegex = /[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,6}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi;
-        var urls = this.refs.newSites.getDOMNode().value.match(urlRegex);
-        if(urls !== null) {
+        var urls = this.refs.newSites.value.match(urlRegex);
+        if (urls !== null) {
             urls.forEach((url) => {
                 SitesStore.Actions.create(url);
             });

arachnado/static/js/stores/ConnectionStore.js

@@ -44,4 +44,3 @@ export var store = Reflux.createStore({
 var socket = FancyWebSocket.instance(window.WS_SERVER_ADDRESS);
 socket.on("open", () => { Actions.update('online') });
 socket.on("close", () => { Actions.update('offline') });
-

package.json

@@ -26,13 +26,14 @@
   },
   "dependencies": {
     "debounce": "^1.0.0",
-    "eventemitter3": "^1.1.1",
-    "filesize": "^3.1.2",
+    "eventemitter3": "^1.2.0",
+    "filesize": "^3.3.0",
     "pretty-ms": "^1.2.0",
-    "react": "^0.13.3",
-    "react-bootstrap": "^0.23.4",
-    "react-router": "^0.13.3",
-    "reflux": "^0.2.8",
-    "moment": "^2.10.6"
+    "react": "^15.0.1",
+    "react-dom": "^15.0.1",
+    "react-bootstrap": "^0.29.4",
+    "react-router": "^2.4.1",
+    "reflux": "^0.4.1",
+    "moment": "^2.13.0"
   }
 }

webpack.config.js

@@ -12,7 +12,6 @@ module.exports = {
 
         'vendor': [
             'react',
-            'react/addons',
             'react-bootstrap',
             'react-router',
             'reflux',