Replace usage of history with router passed down through context

js/app.js

@@ -10,11 +10,14 @@ import Router from 'react-router/es6/Router';
 import AppResolver from './app_resolver';
 import history from './history';
 
+import AppConstants from './constants/application_constants';
+
 import { getDefaultSubdomainSettings, getSubdomainSettings } from './utils/constants_utils';
 import { initLogging } from './utils/error_utils';
 import { getSubdomain } from './utils/general_utils';
 import requests from './utils/requests';
 
+
 // FIXME: rename these event actions
 import EventActions from './actions/event_actions';
 
@@ -51,7 +54,19 @@ const AppGateway = {
 
         // `history.listen` is called on every route change, which is perfect for routeDidChange
         // events.
-        history.listen(EventActions.routeDidChange);
+        // For history <= 3.0, history.listen will synchronously invoke the callback once
+        // immediately after registration.
+        history.listen((location) => {
+            const { locationQueue } = history;
+            locationQueue.unshift(location);
+
+            // Limit the number of locations to keep in memory to avoid too much memory usage
+            if (locationQueue.length > AppConstants.locationThreshold) {
+                locationQueue.length = AppConstants.locationThreshold;
+            }
+
+            EventActions.routeDidChange(location);
+        });
 
         // Adds a client specific class to the body for whitelabel styling
         window.document.body.classList.add(`client--${settings.subdomain}`);

js/components/app_base.js

@@ -1,7 +1,6 @@
 'use strict';
 
 import React from 'react';
-import classNames from 'classnames';
 
 import UserActions from '../actions/user_actions';
 import UserStore from '../stores/user_store';
@@ -11,8 +10,6 @@ import WhitelabelStore from '../stores/whitelabel_store';
 
 import GlobalNotification from './global_notification';
 
-import AppConstants from '../constants/application_constants';
-
 import { mergeOptions } from '../utils/general_utils';
 
 
@@ -22,8 +19,6 @@ export default function AppBase(App) {
 
         propTypes: {
             children: React.PropTypes.element.isRequired,
-            //FIXME: test if this is actually passed down now
-            history: React.PropTypes.object.isRequired,
             location: React.PropTypes.object.isRequired,
             routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired
         },
@@ -41,18 +36,6 @@ export default function AppBase(App) {
 
             UserActions.fetchCurrentUser();
             WhitelabelActions.fetchWhitelabel();
-
-            this.history.locationQueue.push(this.props.location);
-        },
-
-        componentWillReceiveProps(nextProps) {
-            const { locationQueue } = this.history;
-            locationQueue.unshift(nextProps.location);
-
-            // Limit the number of locations to keep in memory to avoid too much memory usage
-            if (locationQueue.length > AppConstants.locationThreshold) {
-                locationQueue.length = AppConstants.locationThreshold;
-            }
         },
 
         componentWillUnmount() {
@@ -85,4 +68,4 @@ export default function AppBase(App) {
             );
         }
     });
-};
+}

js/components/ascribe_routes/proxy_handler.js

@@ -1,7 +1,6 @@
 'use strict';
 
 import React from 'react';
-import history from '../../history';
 
 import UserStore from '../../stores/user_store';
 
@@ -24,7 +23,7 @@ export function AuthRedirect({ to, when }) {
         throw new Error(`"when" must be one of: [${whenValues}] got "${when}" instead`);
     }
 
-    return function(currentUser, query) {
+    return function redirectRoute(router, currentUser, query) {
         const { redirectAuthenticated, redirect } = query;
 
         // The user of this handler specifies with `when`, what kind of status
@@ -38,14 +37,14 @@ export function AuthRedirect({ to, when }) {
 
         // and redirect if `true`.
         if (exprToValidate) {
-            window.setTimeout(() => history.replace({ query, pathname: to }));
+            window.setTimeout(() => router.replace({ query, pathname: to }));
             return true;
 
             // Otherwise there can also be the case that the backend
             // wants to redirect the user to a specific route when the user is logged out already
         } else if (!exprToValidate && when === 'loggedIn' && redirect) {
             delete query.redirect;
-            window.setTimeout(() => history.replace({ query, pathname: `/${redirect}` }));
+            window.setTimeout(() => router.replace({ query, pathname: `/${redirect}` }));
             return true;
 
         } else if (!exprToValidate && when === 'loggedOut' && redirectAuthenticated) {
@@ -75,8 +74,8 @@ export function AuthRedirect({ to, when }) {
  * @param {[function]} redirectFn A function that conditionally redirects
  */
 export function ProxyHandler(...redirectFunctions) {
-    return (Component) => {
-        return React.createClass({
+    return (Component) => (
+        React.createClass({
             displayName: 'ProxyHandler',
 
             propTypes: {
@@ -94,8 +93,7 @@ export function ProxyHandler(...redirectFunctions) {
             },
 
             childContextTypes: {
-                route: object,
-                router: object
+                route: object
             },
 
             getChildContext() {
@@ -121,7 +119,7 @@ export function ProxyHandler(...redirectFunctions) {
                         // it should return `true` and therefore
                         // stop/avoid the execution of all functions
                         // that follow
-                        if (redirectFunctions[i](currentUser, query)) {
+                        if (redirectFunctions[i](this.context.router, currentUser, query)) {
                             break;
                         }
                     }
@@ -133,6 +131,6 @@ export function ProxyHandler(...redirectFunctions) {
                     <Component {...this.props} />
                 );
             }
-        });
-    };
+        })
+    );
 }

js/components/error_not_found_page.js

@@ -1,25 +1,15 @@
-'use strict';
-
 import React from 'react';
-import { History } from 'react-router';
+
+import history from '../history';
 
 import { getLangText } from '../utils/lang_utils';
 
 
-let ErrorNotFoundPage = React.createClass({
+const ErrorNotFoundPage = React.createClass({
     propTypes: {
         message: React.PropTypes.string,
-
-        // Provided from AscribeApp
-        currentUser: React.PropTypes.object,
-        whitelabel: React.PropTypes.object,
-
-        // Provided from router
-        location: React.PropTypes.object
     },
 
-    mixins: [History],
-
     getDefaultProps() {
         return {
             message: getLangText("Oops, the page you are looking for doesn't exist.")
@@ -28,7 +18,7 @@ let ErrorNotFoundPage = React.createClass({
 
     componentDidMount() {
         // The previous page, if any, is the second item in the locationQueue
-        const { locationQueue: [ , previousPage ] } = this.history;
+        const { locationQueue: [, previousPage] } = history;
 
         if (previousPage) {
             console.logGlobal('Page not found', {

js/components/whitelabel/wallet/wallet_app.js

@@ -14,7 +14,6 @@ let WalletApp = React.createClass({
     propTypes: {
         activeRoute: React.PropTypes.object.isRequired,
         children: React.PropTypes.element.isRequired,
-        history: React.PropTypes.object.isRequired,
         routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
 
         // Provided from AppBase
@@ -22,15 +21,20 @@ let WalletApp = React.createClass({
         whitelabel: React.PropTypes.object
     },
 
+    contextTypes: {
+        router: React.PropTypes.object
+    },
+
     render() {
-        const { activeRoute, children, currentUser, history, routes, whitelabel } = this.props;
+        const { activeRoute, children, currentUser, routes, whitelabel } = this.props;
+        const { router } = this.context;
         const subdomain = getSubdomain();
         const path = activeRoute && activeRoute.path;
         const Footer = activeRoute && activeRoute.footer;
 
         let header = null;
         // if the path of the current activeRoute is not defined, then this is the IndexRoute
-        if ((!path || history.isActive('/login') || history.isActive('/signup') || history.isActive('/contract_notifications'))
+        if ((!path || router.isActive('/login') || router.isActive('/signup') || router.isActive('/contract_notifications'))
             && (['cyland', 'ikonotv', 'lumenus', '23vivi', 'polline', 'artcity', 'demo', 'liquidgallery']).includes(subdomain)) {
             header = (<div className="hero"/>);
         } else {

js/history.js

@@ -1,5 +1,3 @@
-'use strict';
-
 import useRouterHistory from 'react-router/es6/useRouterHistory';
 import createBrowserHistory from 'history/lib/createBrowserHistory';