diff --git a/js/app.js b/js/app.js index e2c7e1e6..586ec481 100644 --- a/js/app.js +++ b/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}`); diff --git a/js/components/app_base.js b/js/components/app_base.js index d6528d28..34a48f55 100644 --- a/js/components/app_base.js +++ b/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) { ); } }); -}; +} diff --git a/js/components/ascribe_routes/proxy_handler.js b/js/components/ascribe_routes/proxy_handler.js index 70bb53ee..92e0e6da 100644 --- a/js/components/ascribe_routes/proxy_handler.js +++ b/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) { ); } - }); - }; + }) + ); } diff --git a/js/components/error_not_found_page.js b/js/components/error_not_found_page.js index 046c07a0..d9622db5 100644 --- a/js/components/error_not_found_page.js +++ b/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', { diff --git a/js/components/whitelabel/wallet/wallet_app.js b/js/components/whitelabel/wallet/wallet_app.js index 9ca6cd16..e5eada8f 100644 --- a/js/components/whitelabel/wallet/wallet_app.js +++ b/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 = (
); } else { diff --git a/js/history.js b/js/history.js index 31ae4333..84342656 100644 --- a/js/history.js +++ b/js/history.js @@ -1,5 +1,3 @@ -'use strict'; - import useRouterHistory from 'react-router/es6/useRouterHistory'; import createBrowserHistory from 'history/lib/createBrowserHistory';