Updating JS node modules that are directly related to react (react, redux, react-router, etc.) (shakacode#414)

Author: tmobaird

client/app/bundles/comments/components/CommentBox/CommentBox.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import Immutable from 'immutable';
 import ActionCable from 'actioncable';
 import _ from 'lodash';
@@ -15,13 +16,13 @@ class CommentBox extends BaseComponent {
   static propTypes = {
     pollInterval: PropTypes.number.isRequired,
     actions: PropTypes.shape({
-      fetchComments: React.PropTypes.function,
+      fetchComments: PropTypes.function,
     }),
     data: PropTypes.shape({
-      isFetching: React.PropTypes.boolean,
-      isSaving: React.PropTypes.boolean,
-      submitCommentError: React.PropTypes.string,
-      $$comments: React.PropTypes.arrayOf(CommentPropTypes),
+      isFetching: PropTypes.boolean,
+      isSaving: PropTypes.boolean,
+      submitCommentError: PropTypes.string,
+      $$comments: PropTypes.arrayOf(CommentPropTypes),
     }).isRequired,
     intl: intlShape.isRequired,
   };

client/app/bundles/comments/components/CommentBox/CommentForm/CommentForm.jsx

@@ -1,7 +1,8 @@
 // NOTE: https://github.com/react-bootstrap/react-bootstrap/issues/1850 seesm to require string
 // refs and not the callback kind.
 /* eslint-disable react/no-find-dom-node, react/no-string-refs */
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import Col from 'react-bootstrap/lib/Col';
 import FormControl from 'react-bootstrap/lib/FormControl';

client/app/bundles/comments/components/CommentBox/CommentList/Comment/Comment.jsx

@@ -1,5 +1,6 @@
 import BaseComponent from 'libs/components/BaseComponent';
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 
 import marked from 'marked';
 import css from './Comment.scss';

client/app/bundles/comments/components/CommentBox/CommentList/CommentList.jsx

@@ -1,7 +1,8 @@
 import Alert from 'react-bootstrap/lib/Alert';
 import BaseComponent from 'libs/components/BaseComponent';
 import Immutable from 'immutable';
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
 import _ from 'lodash';
 

client/app/bundles/comments/components/CommentScreen/CommentScreen.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 
 import BaseComponent from 'libs/components/BaseComponent';
 

client/app/bundles/comments/components/NavigationBar/CommentsCount.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 
 const href = 'https://github.com/shakacode/react_on_rails/blob/master/README.md#multiple-react-' +
   'components-on-a-page-with-one-store';

client/app/bundles/comments/components/NavigationBar/NavigationBar.jsx

@@ -3,7 +3,8 @@
 
 import classNames from 'classnames';
 import _ from 'lodash';
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 
 import CommentsCount from './CommentsCount';
 import * as paths from '../../constants/paths';

client/app/bundles/comments/components/TestReactRouterRedirect/TestReactRouterRedirect.jsx

@@ -1,20 +1,29 @@
 import React from 'react';
+import { Redirect } from 'react-router-dom';
 
 import BaseComponent from 'libs/components/BaseComponent';
 
 export default class TestReactRouterRedirect extends BaseComponent {
-  static checkAuth(nextState, replace) {
+
+  static checkAuth() {
     // Hard code this to demonstrate the effect
     const notAuthorized = true;
-    if (notAuthorized) {
-      replace({ pathname: '/', state: { redirectFrom: nextState.location.pathname } });
-    }
+    return notAuthorized;
   }
 
   render() {
-    return (
-      <div>Nope.</div>
-    );
-  }
+    if (TestReactRouterRedirect.checkAuth()) {
+      return (
+        <Redirect
+          push
+          to={{
+            pathname: '/',
+            state: { redirectFrom: this.props.location.pathname },
+          }}
+        />
+      );
+    }
 
+    return <div>Nope.</div>;
+  }
 }

client/app/bundles/comments/containers/NavigationBarContainer.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
 import BaseComponent from 'libs/components/BaseComponent';

client/app/bundles/comments/containers/NonRouterCommentsContainer.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import BaseComponent from 'libs/components/BaseComponent';

client/app/bundles/comments/containers/RouterCommentsContainer.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { IntlProvider } from 'react-intl';

client/app/bundles/comments/layout/Layout.jsx

@@ -1,10 +1,11 @@
-import React, { PropTypes } from 'react';
-import { IndexLink, Link } from 'react-router';
-import BaseComponent from 'libs/components/BaseComponent';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { NavLink as Link } from 'react-router-dom';
 
 import './Layout.scss';
 
-export default class Layout extends BaseComponent {
+/* eslint-disable react/prefer-stateless-function */
+export default class Layout extends Component {
 
   static propTypes = {
     children: PropTypes.object.isRequired,
@@ -17,9 +18,9 @@ export default class Layout extends BaseComponent {
         <header>
           <ul>
             <li>
-              <IndexLink to="/" activeClassName="active">
+              <Link to="/" activeClassName="active">
                 Comments (Root URL)
-              </IndexLink>
+              </Link>
             </li>
             <li>
               <Link to="/react-router" activeClassName="active">

client/app/bundles/comments/routes/routes.jsx

@@ -1,23 +1,27 @@
 import React from 'react';
-import { Route, IndexRoute } from 'react-router';
+import { Route, Switch } from 'react-router-dom';
 import Layout from '../layout/Layout';
 import TestReactRouter from '../components/TestReactRouter/TestReactRouter';
 import TestReactRouterRedirect from '../components/TestReactRouterRedirect/TestReactRouterRedirect';
 import RouterCommentsContainer from '../containers/RouterCommentsContainer';
 
 export default (
-  <Route path="/" component={Layout}>
-    <IndexRoute
-      component={RouterCommentsContainer}
-    />
-    <Route
-      path="react-router"
-      component={TestReactRouter}
-    />
-    <Route
-      path="react-router/redirect"
-      component={TestReactRouterRedirect}
-      onEnter={TestReactRouterRedirect.checkAuth}
-    />
-  </Route>
+  <Layout>
+    <Switch>
+      <Route
+        path="/"
+        component={RouterCommentsContainer}
+        exact
+      />
+      <Route
+        path="/react-router"
+        component={TestReactRouter}
+        exact
+      />
+      <Route
+        path="/react-router/redirect"
+        component={TestReactRouterRedirect}
+      />
+    </Switch>
+  </Layout>
 );

client/app/bundles/comments/startup/ClientRouterApp.jsx

@@ -2,25 +2,17 @@
 import React from 'react';
 import { Provider } from 'react-redux';
 import ReactOnRails from 'react-on-rails';
-import { syncHistoryWithStore } from 'react-router-redux';
-import { Router, browserHistory } from 'react-router';
-
+import { BrowserRouter } from 'react-router-dom';
 import routes from '../routes/routes';
 
 export default (_props, _railsContext) => {
   const store = ReactOnRails.getStore('routerCommentsStore');
 
-  // Create an enhanced history that syncs navigation events with the store
-  const history = syncHistoryWithStore(
-    browserHistory,
-    store,
-  );
-
   return (
     <Provider store={store}>
-      <Router history={history}>
+      <BrowserRouter>
         {routes}
-      </Router>
+      </BrowserRouter>
     </Provider>
   );
 };

client/app/bundles/comments/startup/ServerRouterApp.jsx

@@ -1,37 +1,37 @@
 // Compare to ../ClientRouterApp.jsx
 import React from 'react';
 import { Provider } from 'react-redux';
-import { match, RouterContext } from 'react-router';
+import { StaticRouter } from 'react-router';
 import ReactOnRails from 'react-on-rails';
-
 import routes from '../routes/routes';
 
 export default (_props, railsContext) => {
   const store = ReactOnRails.getStore('routerCommentsStore');
 
   let error;
   let redirectLocation;
-  let routeProps;
   const { location } = railsContext;
 
-  // See https://github.com/reactjs/react-router/blob/master/docs/guides/ServerRendering.md
-  match({ routes, location }, (_error, _redirectLocation, _routeProps) => {
-    error = _error;
-    redirectLocation = _redirectLocation;
-    routeProps = _routeProps;
-  });
-
   // This tell react_on_rails to skip server rendering any HTML. Note, client rendering
   // will handle the redirect. What's key is that we don't try to render.
   // Critical to return the Object properties to match this { error, redirectLocation }
   if (error || redirectLocation) {
     return { error, redirectLocation };
   }
 
+  // Allows components to add properties to the object to store
+  // information about the render.
+  const context = {};
+
   // Important that you don't do this if you are redirecting or have an error.
   return (
     <Provider store={store}>
-      <RouterContext {...routeProps} />
+      <StaticRouter
+        location={location}
+        context={context}
+      >
+        {routes}
+      </StaticRouter>
     </Provider>
   );
 };

client/package.json

@@ -77,14 +77,16 @@
     "node-sass": "^4.5.2",
     "node-uuid": "^1.4.8",
     "postcss-loader": "^1.3.3",
-    "react": "^15.4.1",
-    "react-addons-css-transition-group": "^15.4.1",
-    "react-bootstrap": "^0.30.8",
-    "react-dom": "^15.4.1",
-    "react-intl": "^2.2.2",
+    "prop-types": "^15.5.10",
+    "react": "^15.6.1",
+    "react-addons-css-transition-group": "^15.6.0",
+    "react-bootstrap": "^0.31.2",
+    "react-dom": "^15.6.1",
+    "react-intl": "^2.3.0",
     "react-on-rails": "^8.0.6-rc.1",
-    "react-redux": "^4.4.6",
-    "react-router": "^3.0.0",
+    "react-redux": "^5.0.5",
+    "react-router": "^4.1.2",
+    "react-router-dom": "^4.1.2",
     "react-router-redux": "^4.0.7",
     "redux": "^3.6.0",
     "redux-thunk": "^2.2.0",