@ -1,10 +1,3 @@
import React from 'react' ;
import { Provider } from 'react-redux' ;
import { browserHistory , Route , Router } from 'react-router' ;
import { push , replace , syncHistoryWithStore } from 'react-router-redux' ;
import { RouteRegistry } from '../../base/navigator' ;
import { appInit } from '../actions' ; import { appInit } from '../actions' ;
import { AbstractApp } from './AbstractApp' ; import { AbstractApp } from './AbstractApp' ;
@ -21,26 +14,6 @@ export class App extends AbstractApp {
* / * /
static propTypes = AbstractApp . propTypes static propTypes = AbstractApp . propTypes
/ * *
* Initializes a new App instance .
*
* @ param { Object } props - The read - only React Component props with which
* the new instance is to be initialized .
* /
constructor ( props ) {
super ( props ) ;
/ * *
* Create an enhanced history that syncs navigation events with the
* store .
* @ link https : //github.com/reactjs/react-router-redux#how-it-works
* /
this . history = syncHistoryWithStore ( browserHistory , props . store ) ;
// Bind event handlers so they are only bound once for every instance.
this . _routerCreateElement = this . _routerCreateElement . bind ( this ) ;
}
/ * * / * *
* Inits the app before component will mount . * Inits the app before component will mount .
* *
@ -52,26 +25,6 @@ export class App extends AbstractApp {
this . props . store . dispatch ( appInit ( ) ) ; this . props . store . dispatch ( appInit ( ) ) ;
} }
/ * *
* Implements React ' s { @ link Component # render ( ) } .
*
* @ inheritdoc
* @ returns { ReactElement }
* /
render ( ) {
return (
< Provider store = { this . props . store } >
< Router
createElement = { this . _routerCreateElement }
history = { this . history } >
{
this . _renderRoutes ( )
}
< / R o u t e r >
< / P r o v i d e r >
) ;
}
/ * * / * *
* Gets a Location object from the window with information about the current * Gets a Location object from the window with information about the current
* location of the document . * location of the document .
@ -86,6 +39,7 @@ export class App extends AbstractApp {
* Navigates to a specific Route ( via platform - specific means ) . * Navigates to a specific Route ( via platform - specific means ) .
* *
* @ param { Route } route - The Route to which to navigate . * @ param { Route } route - The Route to which to navigate .
* @ protected
* @ returns { void } * @ returns { void }
* / * /
_navigate ( route ) { _navigate ( route ) {
@ -100,81 +54,19 @@ export class App extends AbstractApp {
/:room/g , /:room/g ,
store . getState ( ) [ 'features/base/conference' ] . room ) ; store . getState ( ) [ 'features/base/conference' ] . room ) ;
return ( // Navigate to the specified Route.
store . dispatch ( const windowLocation = this . _getWindowLocation ( ) ;
( window . location . pathname === path ? replace : push ) (
path ) ) ) ; if ( windowLocation . pathname === path ) {
} // The browser is at the specified path already and what remains is
// to make this App instance aware of the route to be rendered at
/ * * // the current location.
* Invoked by react - router to notify this App that a Route is about to be super . _navigate ( route ) ;
* rendered . } else {
* // The browser must go to the specified location. Once the specified
* @ param { Route } route - The Route that is about to be rendered . // location becomes current, the App will be made aware of the route
* @ private // to be rendered at it.
* @ returns { void } windowLocation . pathname = path ;
* /
_onRouteEnter ( route , ... args ) {
// Notify the route that it is about to be entered.
const onEnter = route . onEnter ;
if ( typeof onEnter === 'function' ) {
onEnter ( ... args ) ;
} }
// XXX The following is mandatory. Otherwise, moving back & forward
// through the browser's history could leave this App on the Conference
// page without a room name.
// Our Router configuration (at the time of this writing) is such that
// each Route corresponds to a single URL. Hence, entering into a Route
// is like opening a URL.
this . _openURL ( window . location . toString ( ) ) ;
}
/ * *
* Renders a specific Route ( for the purposes of the Router of this App ) .
*
* @ param { Object } route - The Route to render .
* @ returns { ReactElement }
* @ private
* /
_renderRoute ( route ) {
const onEnter = ( ... args ) => {
this . _onRouteEnter ( route , ... args ) ;
} ;
return (
< Route
component = { route . component }
key = { route . component }
onEnter = { onEnter }
path = { route . path } / >
) ;
}
/ * *
* Renders the Routes of the Router of this App .
*
* @ returns { Array . < ReactElement > }
* @ private
* /
_renderRoutes ( ) {
return RouteRegistry . getRoutes ( ) . map ( this . _renderRoute , this ) ;
}
/ * *
* Create a ReactElement from the specified component and props on behalf of
* the associated Router .
*
* @ param { Component } component - The component from which the ReactElement
* is to be created .
* @ param { Object } props - The read - only React Component props with which
* the ReactElement is to be initialized .
* @ private
* @ returns { ReactElement }
* /
_routerCreateElement ( component , props ) {
return this . _createElement ( component , props ) ;
} }
} }
Lyubomir Marinov
8 years ago