From ae2790839af44ab691e24087c5d218cff57941ed Mon Sep 17 00:00:00 2001 From: Mikhail Korobov Date: Wed, 25 May 2016 21:08:39 +0500 Subject: [PATCH] upgrade JS packages: React 15.x, react-router 2.4.1, reflux 0.4.1 --- .../js/components/ConnectionMonitor.jsx | 3 +- arachnado/static/js/components/CrawlForm.jsx | 2 +- arachnado/static/js/components/JobList.jsx | 12 ++++---- .../static/js/components/JobTransfers.jsx | 2 +- .../static/js/components/KeyValueTable.jsx | 2 +- .../static/js/components/ProcessStats.jsx | 3 +- arachnado/static/js/main.jsx | 30 ++++++++----------- arachnado/static/js/pages/JobPage.jsx | 4 +-- arachnado/static/js/pages/SitesPage.jsx | 11 ++++--- arachnado/static/js/stores/ConnectionStore.js | 1 - package.json | 15 +++++----- webpack.config.js | 1 - 12 files changed, 41 insertions(+), 45 deletions(-) diff --git a/arachnado/static/js/components/ConnectionMonitor.jsx b/arachnado/static/js/components/ConnectionMonitor.jsx index fdb814d..1a8111b 100644 --- a/arachnado/static/js/components/ConnectionMonitor.jsx +++ b/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(, document.getElementById(elemId)); + ReactDOM.render(, document.getElementById(elemId)); } diff --git a/arachnado/static/js/components/CrawlForm.jsx b/arachnado/static/js/components/CrawlForm.jsx index 4f75b42..10f4845 100644 --- a/arachnado/static/js/components/CrawlForm.jsx +++ b/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) { diff --git a/arachnado/static/js/components/JobList.jsx b/arachnado/static/js/components/JobList.jsx index 1051724..9c64196 100644 --- a/arachnado/static/js/components/JobList.jsx +++ b/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 = [ , @@ -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); diff --git a/arachnado/static/js/components/JobTransfers.jsx b/arachnado/static/js/components/JobTransfers.jsx index a6eb4e8..0272971 100644 --- a/arachnado/static/js/components/JobTransfers.jsx +++ b/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"); diff --git a/arachnado/static/js/components/KeyValueTable.jsx b/arachnado/static/js/components/KeyValueTable.jsx index cad972c..9dcce8d 100644 --- a/arachnado/static/js/components/KeyValueTable.jsx +++ b/arachnado/static/js/components/KeyValueTable.jsx @@ -8,7 +8,7 @@ export var KeyValueTable = React.createClass({ var header = ; } else { - var header = NameValue; + var header = NameValue; } return diff --git a/arachnado/static/js/components/ProcessStats.jsx b/arachnado/static/js/components/ProcessStats.jsx index 49c3aa4..0f9fd96 100644 --- a/arachnado/static/js/components/ProcessStats.jsx +++ b/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(, document.getElementById(elemId)); + ReactDOM.render(, document.getElementById(elemId)); } diff --git a/arachnado/static/js/main.jsx b/arachnado/static/js/main.jsx index 3662a03..d7b9eac 100644 --- a/arachnado/static/js/main.jsx +++ b/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 ( - - ); + return this.props.children; } }); -var routes = ( - - - - - - -); - -Router.run(routes, Router.HashLocation, (Root) => { - React.render(, document.getElementById("arachnado-root")); -}); +ReactDOM.render(( + + + + + + + + +), document.getElementById("arachnado-root")); diff --git a/arachnado/static/js/pages/JobPage.jsx b/arachnado/static/js/pages/JobPage.jsx index 0dea6b9..396a50c 100644 --- a/arachnado/static/js/pages/JobPage.jsx +++ b/arachnado/static/js/pages/JobPage.jsx @@ -53,7 +53,7 @@ var NoJobPage = React.createClass({

Job is not found

This job is either not available or never existed.

- +   Back to Full Job List @@ -79,7 +79,7 @@ export var JobPage = React.createClass({
- +  All Jobs    diff --git a/arachnado/static/js/pages/SitesPage.jsx b/arachnado/static/js/pages/SitesPage.jsx index e0c42fb..1c8f605 100644 --- a/arachnado/static/js/pages/SitesPage.jsx +++ b/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); }); diff --git a/arachnado/static/js/stores/ConnectionStore.js b/arachnado/static/js/stores/ConnectionStore.js index 1bd91fc..484d168 100644 --- a/arachnado/static/js/stores/ConnectionStore.js +++ b/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') }); - diff --git a/package.json b/package.json index 336c792..3d97489 100644 --- a/package.json +++ b/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" } } diff --git a/webpack.config.js b/webpack.config.js index 57eb34b..3a75ebd 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -12,7 +12,6 @@ module.exports = { 'vendor': [ 'react', - 'react/addons', 'react-bootstrap', 'react-router', 'reflux',