Upgrading to react-router 4

package.json

@@ -108,6 +108,7 @@
     "image-webpack-loader": "3.1.0",
     "imports-loader": "0.6.5",
     "json-loader": "0.5.4",
+    "loadable-components": "^0.3.0",
     "morgan": "1.7.0",
     "node-sass": "4.1.1",
     "normalizr": "3.0.2",
@@ -136,8 +137,9 @@
     "react-metrics": "1.2.1",
     "react-paginate": "4.1.0",
     "react-redux": "5.0.1",
-    "react-router": "3.0.0",
-    "react-router-bootstrap": "0.20.1",
+    "react-router": "^4",
+    "react-router-bootstrap": "^0.24.4",
+    "react-router-dom": "^4.2.2",
     "react-router-redux": "4.0.7",
     "react-router-scroll": "0.2.1",
     "react-scroll": "1.2.0",

src/client.js

@@ -2,28 +2,19 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import reactCookie from 'react-cookie';
-import Router from 'react-router/lib/Router';
-import match from 'react-router/lib/match';
-import browserHistory from 'react-router/lib/browserHistory';
-import applyRouterMiddleware from 'react-router/lib/applyRouterMiddleware';
-import useScroll from 'react-router-scroll';
-import { ReduxAsyncConnect } from 'redux-connect';
-import { syncHistoryWithStore } from 'react-router-redux';
 import { AppContainer } from 'react-hot-loader';
-import { ThemeProvider } from 'styled-components';
+import { loadComponents } from 'loadable-components';
 
 import debug from 'debug';
 
 import config from './config';
-import theme from './theme';
+
 import ApiClient from './helpers/ApiClient';
 import createStore from './redux/create';
-import routes from './routes';
 import Root from './containers/Root';
 
 const client = new ApiClient();
-const store = createStore(browserHistory, client, window.reduxData);
-const history = syncHistoryWithStore(browserHistory, store);
+const store = createStore(null, client, window.reduxData);
 
 try {
   Raven.config(config.sentryClient).install();
@@ -45,49 +36,31 @@ window.clearCookies = () => {
   reactCookie.remove('smartbanner-installed');
 };
 
-match(
-  { history, routes: routes(store) },
-  (error, redirectLocation, renderProps) => {
-    const component = (
-      <ThemeProvider theme={theme}>
-        <Router
-          {...renderProps}
-          render={props => (
-            <ReduxAsyncConnect
-              {...props}
-              helpers={{ client }}
-              render={applyRouterMiddleware(useScroll())}
-            />
-          )}
-        />
-      </ThemeProvider>
-    );
-
-    const mountNode = document.getElementById('app');
+const mountNode = document.getElementById('app');
 
-    debug('client', 'React Rendering');
+loadComponents().then(() => {
+  debug('client', 'React Rendering');
 
-    ReactDOM.render(
-      <AppContainer>
-        <Root component={component} store={store} />
-      </AppContainer>,
-      mountNode,
-      () => {
-        debug('client', 'React Rendered');
-      }
-    );
+  ReactDOM.render(
+    <AppContainer>
+      <Root store={store} />
+    </AppContainer>,
+    mountNode,
+    () => {
+      debug('client', 'React Rendered');
+    }
+  );
 
-    if (module.hot) {
-      module.hot.accept('./containers/Root', () => {
-        const NextRoot = require('./containers/Root'); // eslint-disable-line global-require
+  if (module.hot) {
+    module.hot.accept('./containers/Root', () => {
+      const NextRoot = require('./containers/Root'); // eslint-disable-line global-require
 
-        ReactDOM.render(
-          <AppContainer>
-            <NextRoot store={store} component={component} />
-          </AppContainer>,
-          document.getElementById('root')
-        );
-      });
-    }
+      ReactDOM.render(
+        <AppContainer>
+          <NextRoot store={store} />
+        </AppContainer>,
+        document.getElementById('root')
+      );
+    });
   }
-);
+});

src/components/Footer/PdfFooter/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import Link from 'react-router/lib/Link';
+import { Link } from 'react-router-dom';
 
-const PdfFooter = () => (
+const PdfFooter = () =>
   <footer>
     <div className="container">
       <div className="row">
@@ -13,7 +13,6 @@ const PdfFooter = () => (
         </div>
       </div>
     </div>
-  </footer>
-);
+  </footer>;
 
 export default PdfFooter;

src/components/Footer/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Link from 'react-router/lib/Link';
+import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';

src/components/GlobalNav/Surah/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import * as customPropTypes from 'customPropTypes';
 import { connect } from 'react-redux';
 import { replace } from 'react-router-redux';
-import Link from 'react-router/lib/Link';
+import { Link } from 'react-router-dom';
 import Drawer from 'quran-components/lib/Drawer';
 import SearchInput from 'components/SearchInput';
 import SurahsDropdown from 'components/SurahsDropdown';
@@ -107,7 +107,7 @@ class GlobalNavSurah extends Component {
 }
 
 function mapStateToProps(state, ownProps) {
-  const chapterId = parseInt(ownProps.params.chapterId, 10);
+  const chapterId = parseInt(ownProps.match.params.chapterId, 10);
   const chapter: Object = state.chapters.entities[chapterId];
   const verses: Object = state.verses.entities[chapterId];
   const versesArray = verses

src/components/GlobalNav/index.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import * as customPropTypes from 'customPropTypes';
 import { connect } from 'react-redux';
 import styled from 'styled-components';
-import Link from 'react-router/lib/Link';
+import { Link } from 'react-router-dom';
 import Navbar from 'react-bootstrap/lib/Navbar';
 import Nav from 'react-bootstrap/lib/Nav';
 
@@ -55,7 +55,11 @@ class GlobalNav extends Component {
   };
 
   isHome() {
-    return this.props.location.pathname === '/';
+    if (this.props.location) {
+      return this.props.location.pathname === '/';
+    }
+
+    return true;
   }
 
   renderRightControls() {

src/components/GlobalSidebar/index.js

@@ -1,7 +1,7 @@
 /* global document */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Link from 'react-router/lib/Link';
+import { Link } from 'react-router-dom';
 import Navbar from 'react-bootstrap/lib/Navbar';
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 

src/components/Home/ChapterItem/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import Link from 'react-router/lib/Link';
+import { Link } from 'react-router-dom';
 import { surahType } from 'customPropTypes';
 
 import { CHAPTERS_LIST_EVENTS } from '../../../events';

src/components/Home/JuzList/index.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import * as customPropTypes from 'customPropTypes';
 import styled from 'styled-components';
 import debug from 'helpers/debug';
-import RouterLink from 'react-router/lib/Link';
+import { Link as RouterLink } from 'react-router-dom';
 
 import { JUZ_LIST_EVENTS } from '../../../events';
 

src/components/Home/LastVisit/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import * as customPropTypes from 'customPropTypes';
 import debug from 'helpers/debug';
-import Link from 'react-router/lib/Link';
+import { Link } from 'react-router-dom';
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 import Title from 'components/Home/Title';
 

src/components/Home/QuickSurahs/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Link from 'react-router/lib/Link';
+import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';

src/components/IndexHeader/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Link from 'react-router/lib/Link';
+import { Link } from 'react-router-dom';
 import SearchInput from 'components/SearchInput';
 import Jumbotron from 'quran-components/lib/Jumbotron';
 import styled from 'styled-components';

src/components/Verse/index.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import * as customPropTypes from 'customPropTypes';
-import Link from 'react-router/lib/Link';
+import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import { connect } from 'react-redux';
 import Element from 'react-scroll/lib/components/Element';

src/containers/App/index.js

@@ -4,9 +4,9 @@ import styled from 'styled-components';
 import * as customPropTypes from 'customPropTypes';
 import { metrics } from 'react-metrics';
 import { connect } from 'react-redux';
-import { asyncConnect } from 'redux-connect';
 import Helmet from 'react-helmet';
 import Modal from 'react-bootstrap/lib/Modal';
+import { withRouter } from 'react-router';
 import Loadable from 'react-loadable';
 import ComponentLoader from 'components/ComponentLoader';
 import debug from 'helpers/debug';
@@ -16,7 +16,8 @@ import Footer from 'components/Footer';
 import NoScript from 'components/NoScript';
 import { removeMedia } from 'redux/actions/media';
 import Loader from 'quran-components/lib/Loader';
-import authConnect from './connect';
+
+import Routes from '../../routes';
 
 const ModalHeader = Modal.Header;
 const ModalTitle = Modal.Title;
@@ -82,7 +83,6 @@ class App extends Component {
 
   render() {
     const {
-      main,
       nav,
       footer,
       children,
@@ -116,7 +116,7 @@ class App extends Component {
             open={this.state.sidebarOpen}
             handleOpen={open => this.setState({ sidebarOpen: open })}
           />}
-        {children || main}
+        {children || <Routes store={this.context.store} />}
         <SmartBanner title="The Noble Quran - القرآن الكريم" button="Install" />
         {footer || <Footer />}
         {__CLIENT__ &&
@@ -136,8 +136,7 @@ class App extends Component {
   }
 }
 
-const metricsApp = metrics(metricsConfig)(App);
-const AsyncApp = asyncConnect([{ promise: authConnect }])(metricsApp);
+const MetricsApp = metrics(metricsConfig)(App);
 
 App.propTypes = {
   media: customPropTypes.media.isRequired,
@@ -151,9 +150,11 @@ App.propTypes = {
   loadingFootNote: PropTypes.bool
 };
 
-export default connect(
-  state => ({
-    media: state.media
-  }),
-  { removeMedia }
-)(AsyncApp);
+export default withRouter(
+  connect(
+    state => ({
+      media: state.media
+    }),
+    { removeMedia }
+  )(MetricsApp)
+);

src/containers/AyatulKursi/index.js

@@ -2,11 +2,10 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import * as customPropTypes from 'customPropTypes';
-import Link from 'react-router/lib/Link';
+import { Link } from 'react-router-dom';
 // redux
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import { asyncConnect } from 'redux-connect';
 import { push } from 'react-router-redux';
 
 import Helmet from 'react-helmet';
@@ -29,8 +28,6 @@ import * as BookmarkActions from 'redux/actions/bookmarks.js';
 import * as OptionsActions from 'redux/actions/options.js';
 import * as MediaActions from 'redux/actions/media.js';
 
-import { chaptersConnect, versesConnect } from 'containers/Surah/connect';
-
 const PageView = Loadable({
   loader: () =>
     import(/* webpackChunkName: "pageview" */ 'components/PageView'),
@@ -215,14 +212,6 @@ AyatulKursi.propTypes = {
   isPlaying: PropTypes.bool
 };
 
-const AsyncAyatulKursi = asyncConnect([
-  { promise: chaptersConnect },
-  {
-    promise: ({ store }) =>
-      versesConnect({ store, params: { chapterId: '2', range: '255' } })
-  }
-])(AyatulKursi);
-
 function mapStateToProps(state) {
   const chapterId = 2;
   const chapter = state.chapters.entities[chapterId];
@@ -258,4 +247,4 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(AsyncAyatulKursi);
+export default connect(mapStateToProps, mapDispatchToProps)(AyatulKursi);