Upgrade to React v16.0.0.

7 files changed, 67 insertions, 54 deletions

diff --git a/package.json b/package.json
index c446a5d5..b2e09c04 100644
--- a/package.json
+++ b/package.json
@@ -20,19 +20,21 @@
     "bootstrap": "^3.3.7",
     "bower": "^1.7.9",
     "classnames": "^2.2.5",
-    "flux": "^2.1.1",
+    "create-react-class": "^15.6.2",
+    "flux": "^3.1.3",
     "jquery": "^3.1.1",
     "keymirror": "^0.1.1",
     "object-assign": "^4.1.0",
-    "react": "^15.3.2",
-    "react-bootstrap": "^0.30.3",
-    "react-dom": "^15.3.2"
+    "prop-types": "^15.6.0",
+    "react": "^16.0.0",
+    "react-bootstrap": "^0.31.3",
+    "react-dom": "^16.0.0"
   },
   "devDependencies": {
-    "browserify": "^13.1.0",
-    "envify": "^3.4.1",
+    "browserify": "^14.4.0",
+    "envify": "^4.1.0",
     "reactify": "^1.1.1",
-    "uglify-js": "^2.7.3",
+    "uglify-js": "^3.1.2",
     "watchify": "^3.7.0"
   },
   "scripts": {
diff --git a/src/web/js/components/MainApp.react.js b/src/web/js/components/MainApp.react.js
index 8105d32f..32bb663e 100644
--- a/src/web/js/components/MainApp.react.js
+++ b/src/web/js/components/MainApp.react.js
@@ -1,13 +1,15 @@
 var React = require('react');
+var createReactClass = require('create-react-class');
 var Col = require('react-bootstrap/lib/Col');
 var Grid = require('react-bootstrap/lib/Grid');
+var PropTypes = require('prop-types');
 
 var Menu = require('./Menu.react');
 var MiddlePanel = require('./MiddlePanel.react');
 var RightPanel = require('./RightPanel.react');
 
 
-var MainApp = React.createClass({
+var MainApp = createReactClass({
     render: function() {
         return (<div>
                     <Grid fluid id="newspipe-container">
diff --git a/src/web/js/components/Menu.react.js b/src/web/js/components/Menu.react.js
index 925802a6..64672240 100644
--- a/src/web/js/components/Menu.react.js
+++ b/src/web/js/components/Menu.react.js
@@ -1,21 +1,23 @@
 var React = require('react');
+var createReactClass = require('create-react-class');
 var Col = require('react-bootstrap/lib/Col');
 var Badge = require('react-bootstrap/lib/Badge');
 var Button = require('react-bootstrap/lib/Button');
 var ButtonGroup = require('react-bootstrap/lib/ButtonGroup');
 var Glyphicon = require('react-bootstrap/lib/Glyphicon');
+var PropTypes = require('prop-types');
 
 var MenuStore = require('../stores/MenuStore');
 var MenuActions = require('../actions/MenuActions');
 var MiddlePanelActions = require('../actions/MiddlePanelActions');
 
-var FeedItem = React.createClass({
-    propTypes: {feed_id: React.PropTypes.number.isRequired,
-                title: React.PropTypes.string.isRequired,
-                unread: React.PropTypes.number.isRequired,
-                error_count: React.PropTypes.number.isRequired,
-                icon_url: React.PropTypes.string,
-                active: React.PropTypes.bool.isRequired,
+var FeedItem = createReactClass({
+    propTypes: {feed_id: PropTypes.number.isRequired,
+                title: PropTypes.string.isRequired,
+                unread: PropTypes.number.isRequired,
+                error_count: PropTypes.number.isRequired,
+                icon_url: PropTypes.string,
+                active: PropTypes.bool.isRequired,
     },
     render: function() {
         var icon = null;
@@ -48,10 +50,10 @@ var FeedItem = React.createClass({
     },
 });
 
-var Category = React.createClass({
-    propTypes: {category_id: React.PropTypes.number,
-                active_type: React.PropTypes.string,
-                active_id: React.PropTypes.number},
+var Category = createReactClass({
+    propTypes: {category_id: PropTypes.number,
+                active_type: PropTypes.string,
+                active_id: PropTypes.number},
     render: function() {
         var classes = "nav-cat";
         if((this.props.active_type == 'category_id'
@@ -76,15 +78,15 @@ var Category = React.createClass({
     },
 });
 
-var CategoryGroup = React.createClass({
-    propTypes: {cat_id: React.PropTypes.number.isRequired,
-                filter: React.PropTypes.string.isRequired,
-                active_type: React.PropTypes.string,
-                active_id: React.PropTypes.number,
-                name: React.PropTypes.string.isRequired,
-                feeds: React.PropTypes.array.isRequired,
-                unread: React.PropTypes.number.isRequired,
-                folded: React.PropTypes.bool,
+var CategoryGroup = createReactClass({
+    propTypes: {cat_id: PropTypes.number.isRequired,
+                filter: PropTypes.string.isRequired,
+                active_type: PropTypes.string,
+                active_id: PropTypes.number,
+                name: PropTypes.string.isRequired,
+                feeds: PropTypes.array.isRequired,
+                unread: PropTypes.number.isRequired,
+                folded: PropTypes.bool,
     },
     getInitialState: function() {
         return {folded: false};
@@ -148,9 +150,9 @@ var CategoryGroup = React.createClass({
     },
 });
 
-var MenuFilter = React.createClass({
-    propTypes: {feed_in_error: React.PropTypes.bool,
-                filter: React.PropTypes.string.isRequired},
+var MenuFilter = createReactClass({
+    propTypes: {feed_in_error: PropTypes.bool,
+                filter: PropTypes.string.isRequired},
     getInitialState: function() {
         return {allFolded: false};
     },
@@ -219,7 +221,7 @@ var MenuFilter = React.createClass({
     },
 });
 
-var Menu = React.createClass({
+var Menu = createReactClass({
     getInitialState: function() {
         return {filter: 'unread', categories: {}, feeds: {},
                 all_folded: false, active_type: null, active_id: null};
diff --git a/src/web/js/components/MiddlePanel.react.js b/src/web/js/components/MiddlePanel.react.js
index 2a8ab96e..fc7c763a 100644
--- a/src/web/js/components/MiddlePanel.react.js
+++ b/src/web/js/components/MiddlePanel.react.js
@@ -1,9 +1,11 @@
 var React = require('react');
+var createReactClass = require('create-react-class');
 
 var Row = require('react-bootstrap/lib/Row');
 var Button = require('react-bootstrap/lib/Button');
 var ButtonGroup = require('react-bootstrap/lib/ButtonGroup');
 var Glyphicon = require('react-bootstrap/lib/Glyphicon');
+var PropTypes = require('prop-types');
 
 var MiddlePanelStore = require('../stores/MiddlePanelStore');
 var MiddlePanelActions = require('../actions/MiddlePanelActions');
@@ -11,16 +13,16 @@ var RightPanelActions = require('../actions/RightPanelActions');
 
 var JarrTime = require('./time.react');
 
-var TableLine = React.createClass({
-    propTypes: {article_id: React.PropTypes.number.isRequired,
-                feed_title: React.PropTypes.string.isRequired,
-                icon_url: React.PropTypes.string,
-                title: React.PropTypes.string.isRequired,
-                rel_date: React.PropTypes.string.isRequired,
-                date: React.PropTypes.string.isRequired,
-                read: React.PropTypes.bool.isRequired,
-                selected: React.PropTypes.bool.isRequired,
-                liked: React.PropTypes.bool.isRequired,
+var TableLine = createReactClass({
+    propTypes: {article_id: PropTypes.number.isRequired,
+                feed_title: PropTypes.string.isRequired,
+                icon_url: PropTypes.string,
+                title: PropTypes.string.isRequired,
+                rel_date: PropTypes.string.isRequired,
+                date: PropTypes.string.isRequired,
+                read: PropTypes.bool.isRequired,
+                selected: PropTypes.bool.isRequired,
+                liked: PropTypes.bool.isRequired,
     },
     getInitialState: function() {
         return {read: this.props.read, liked: this.props.liked,
@@ -86,7 +88,7 @@ var TableLine = React.createClass({
     },
 });
 
-var MiddlePanelSearchRow = React.createClass({
+var MiddlePanelSearchRow = createReactClass({
     getInitialState: function() {
         return {query: MiddlePanelStore._datas.query,
                 search_title: MiddlePanelStore._datas.search_title,
@@ -143,7 +145,7 @@ var MiddlePanelSearchRow = React.createClass({
     },
 });
 
-var MiddlePanelFilter = React.createClass({
+var MiddlePanelFilter = createReactClass({
     getInitialState: function() {
         return {filter: MiddlePanelStore._datas.filter,
                 display_search: MiddlePanelStore._datas.display_search};
@@ -219,7 +221,7 @@ var MiddlePanelFilter = React.createClass({
     },
 });
 
-var MiddlePanel = React.createClass({
+var MiddlePanel = createReactClass({
     getInitialState: function() {
         return {filter: MiddlePanelStore._datas.filter, articles: []};
     },
diff --git a/src/web/js/components/Navbar.react.js b/src/web/js/components/Navbar.react.js
index ca2ff27b..83f3c72c 100644
--- a/src/web/js/components/Navbar.react.js
+++ b/src/web/js/components/Navbar.react.js
@@ -1,4 +1,5 @@
 var React = require('react');
+var createReactClass = require('create-react-class');
 var Glyphicon = require('react-bootstrap/lib/Glyphicon');
 var Nav = require('react-bootstrap/lib/Nav');
 var NavItem = require('react-bootstrap/lib/NavItem');
@@ -11,7 +12,7 @@ var Input = require('react-bootstrap/lib/Input');
 
 var MenuStore = require('../stores/MenuStore');
 
-JarrNavBar = React.createClass({
+JarrNavBar = createReactClass({
     getInitialState: function() {
         return {is_admin: MenuStore._datas.is_admin,
                 crawling_method: MenuStore._datas.crawling_method,
diff --git a/src/web/js/components/RightPanel.react.js b/src/web/js/components/RightPanel.react.js
index 60ef426e..6384cdfe 100644
--- a/src/web/js/components/RightPanel.react.js
+++ b/src/web/js/components/RightPanel.react.js
@@ -1,9 +1,11 @@
 var React = require('react');
+var createReactClass = require('create-react-class');
 var Col = require('react-bootstrap/lib/Col');
 var Glyphicon = require('react-bootstrap/lib/Glyphicon');
 var Button = require('react-bootstrap/lib/Button');
 var ButtonGroup = require('react-bootstrap/lib/ButtonGroup');
 var Modal = require('react-bootstrap/lib/Modal');
+var PropTypes = require('prop-types');
 
 var RightPanelActions = require('../actions/RightPanelActions');
 var RightPanelStore = require('../stores/RightPanelStore');
@@ -11,7 +13,7 @@ var MenuStore = require('../stores/MenuStore');
 var JarrTime = require('./time.react');
 
 var PanelMixin = {
-    propTypes: {obj: React.PropTypes.object.isRequired},
+    propTypes: {obj: PropTypes.object.isRequired},
     getInitialState: function() {
         return {edit_mode: false, obj: this.props.obj, showModal: false};
     },
@@ -164,7 +166,7 @@ var PanelMixin = {
     },
 };
 
-var Article = React.createClass({
+var Article = createReactClass({
     mixins: [PanelMixin],
     isEditable: function() {return false;},
     isRemovable: function() {return true;},
@@ -183,7 +185,7 @@ var Article = React.createClass({
     }
 });
 
-var Feed = React.createClass({
+var Feed = createReactClass({
     mixins: [PanelMixin],
     isEditable: function() {return true;},
     isRemovable: function() {return true;},
@@ -354,7 +356,7 @@ var Feed = React.createClass({
     },
 });
 
-var Category = React.createClass({
+var Category = createReactClass({
     mixins: [PanelMixin],
     isEditable: function() {
         if(this.props.obj.id != 0) {return true;}
@@ -372,7 +374,7 @@ var Category = React.createClass({
     },
 });
 
-var RightPanel = React.createClass({
+var RightPanel = createReactClass({
     getInitialState: function() {
         return {category: null, feed: null, article: null, current: null};
     },
diff --git a/src/web/js/components/time.react.js b/src/web/js/components/time.react.js
index c293e638..07e1fbdf 100644
--- a/src/web/js/components/time.react.js
+++ b/src/web/js/components/time.react.js
@@ -1,8 +1,10 @@
 var React = require('react');
+var createReactClass = require('create-react-class');
+var PropTypes = require('prop-types');
 
-var JarrTime = React.createClass({
-    propTypes: {stamp: React.PropTypes.string.isRequired,
-                text: React.PropTypes.string.isRequired},
+var JarrTime = createReactClass({
+    propTypes: {stamp: PropTypes.string.isRequired,
+                text: PropTypes.string.isRequired},
     render: function() {
         return (<time dateTime={this.props.text} title={this.props.text}>
                     {this.props.stamp}