feat(App): refactor App and split it into BaseApp and App

BaseApp does all the heavy-lifting related to creating the redux store,
navigation, and so on.

App currently handles URL props and actually triggering navigation based on
them.

react/features/app/actions.js

@@ -15,7 +15,6 @@ import { loadConfig } from '../base/lib-jitsi-meet';
 import { parseURIString, toURLString } from '../base/util';
 import { setFatalError } from '../overlay';
 
-import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from './actionTypes';
 import { getDefaultURL } from './functions';
 
 const logger = require('jitsi-meet-logger').getLogger(__filename);
@@ -138,49 +137,6 @@ function _appNavigateToOptionalLocation(
     return _appNavigateToMandatoryLocation(dispatch, getState, location);
 }
 
-/**
- * Signals that a specific App will mount (in the terms of React).
- *
- * @param {App} app - The App which will mount.
- * @returns {{
- *     type: APP_WILL_MOUNT,
- *     app: App
- * }}
- */
-export function appWillMount(app: Object) {
-    return (dispatch: Dispatch<*>) => {
-        dispatch({
-            type: APP_WILL_MOUNT,
-            app
-        });
-
-        // TODO There was a redux action creator appInit which I did not like
-        // because we already had the redux action creator appWillMount and,
-        // respectively, the redux action APP_WILL_MOUNT. So I set out to remove
-        // appInit and managed to move everything it was doing but the
-        // following. Which is not extremely bad because we haven't moved the
-        // API module into its own feature yet so we're bound to work on that in
-        // the future.
-        typeof APP === 'object' && APP.API.init();
-    };
-}
-
-/**
- * Signals that a specific App will unmount (in the terms of React).
- *
- * @param {App} app - The App which will unmount.
- * @returns {{
- *     type: APP_WILL_UNMOUNT,
- *     app: App
- * }}
- */
-export function appWillUnmount(app: Object) {
-    return {
-        type: APP_WILL_UNMOUNT,
-        app
-    };
-}
-
 /**
  * Loads config.js from a specific host.
  *

react/features/app/components/AbstractApp.js

@@ -1,107 +1,44 @@
-/* global APP */
+// @flow
 
-import _ from 'lodash';
-import PropTypes from 'prop-types';
-import React, { Component, Fragment } from 'react';
-import { I18nextProvider } from 'react-i18next';
-import { Provider } from 'react-redux';
-import { compose, createStore } from 'redux';
-import Thunk from 'redux-thunk';
+import React, { Fragment } from 'react';
 
-import { i18next } from '../../base/i18n';
-import {
-    MiddlewareRegistry,
-    ReducerRegistry,
-    StateListenerRegistry
-} from '../../base/redux';
-import { SoundCollection } from '../../base/sounds';
-import { PersistenceRegistry } from '../../base/storage';
+import { BaseApp } from '../../base/app';
 import { toURLString } from '../../base/util';
 import { OverlayContainer } from '../../overlay';
 
-import { appNavigate, appWillMount, appWillUnmount } from '../actions';
+import { appNavigate } from '../actions';
 import { getDefaultURL } from '../functions';
 
 /**
- * Base (abstract) class for main App component.
- *
- * @abstract
+ * {@code AbstractApp} component's property types.
  */
-export class AbstractApp extends Component {
+export type Props = {
+
     /**
-     * {@code AbstractApp} component's property types.
-     *
-     * @static
+     * The default URL {@code AbstractApp} is to open when not in any
+     * conference/room.
      */
-    static propTypes = {
-        /**
-         * The default URL {@code AbstractApp} is to open when not in any
-         * conference/room.
-         */
-        defaultURL: PropTypes.string,
-
-        // XXX Refer to the implementation of loadURLObject: in
-        // ios/sdk/src/JitsiMeetView.m for further information.
-        timestamp: PropTypes.any,
-
-        /**
-         * The URL, if any, with which the app was launched.
-         */
-        url: PropTypes.oneOfType([
-            PropTypes.object,
-            PropTypes.string
-        ])
-    };
+    defaultURL: string,
 
     /**
-     * Initializes a new {@code AbstractApp} instance.
-     *
-     * @param {Object} props - The read-only React {@code Component} props with
-     * which the new instance is to be initialized.
+     * XXX Refer to the implementation of loadURLObject: in
+     * ios/sdk/src/JitsiMeetView.m for further information.
      */
-    constructor(props) {
-        super(props);
-
-        this.state = {
+    timestamp: any,
 
-            /**
-             * The state of the »possible« async initialization of the
-             * {@code AbstractApp}.
-             */
-            appAsyncInitialized: false,
-
-            /**
-             * The Route rendered by this {@code AbstractApp}.
-             *
-             * @type {Route}
-             */
-            route: {},
-
-            /**
-             * The redux store used by this {@code AbstractApp}.
-             *
-             * @type {Store}
-             */
-            store: undefined
-        };
+    /**
+     * The URL, if any, with which the app was launched.
+     */
+    url: Object | string
+};
 
-        /**
-         * Make the mobile {@code AbstractApp} wait until the
-         * {@code AsyncStorage} implementation of {@code Storage} initializes
-         * fully.
-         *
-         * @private
-         * @see {@link #_initStorage}
-         * @type {Promise}
-         */
-        this._init
-            = this._initStorage()
-                .catch(() => { /* AbstractApp should always initialize! */ })
-                .then(() =>
-                    this.setState({
-                        store: this._createStore()
-                    }));
-    }
+/**
+ * Base (abstract) class for main App component.
+ *
+ * @abstract
+ */
+export class AbstractApp extends BaseApp<Props, *> {
+    _init: Promise<*>;
 
     /**
      * Initializes the app.
@@ -109,20 +46,11 @@ export class AbstractApp extends Component {
      * @inheritdoc
      */
     componentWillMount() {
-        this._init.then(() => {
-            const { dispatch } = this.state.store;
-
-            dispatch(appWillMount(this));
+        super.componentWillMount();
 
-            // We set the initialized state here and not in the constructor to
-            // make sure that {@code componentWillMount} gets invoked before the
-            // app tries to render the actual app content.
-            this.setState({
-                appAsyncInitialized: true
-            });
-
-            // If a URL was explicitly specified to this React Component, then
-            // open it; otherwise, use a default.
+        this._init.then(() => {
+            // If a URL was explicitly specified to this React Component,
+            // then open it; otherwise, use a default.
             this._openURL(toURLString(this.props.url) || this._getDefaultURL());
         });
     }
@@ -136,7 +64,7 @@ export class AbstractApp extends Component {
      * that this instance will receive.
      * @returns {void}
      */
-    componentWillReceiveProps(nextProps) {
+    componentWillReceiveProps(nextProps: Props) {
         const { props } = this;
 
         this._init.then(() => {
@@ -154,15 +82,6 @@ export class AbstractApp extends Component {
         });
     }
 
-    /**
-     * De-initializes the app.
-     *
-     * @inheritdoc
-     */
-    componentWillUnmount() {
-        this.state.store.dispatch(appWillUnmount(this));
-    }
-
     /**
      * Gets a {@code Location} object from the window with information about the
      * current location of the document. Explicitly defined to allow extenders
@@ -180,131 +99,22 @@ export class AbstractApp extends Component {
     }
 
     /**
-     * Delays this {@code AbstractApp}'s startup until the {@code Storage}
-     * implementation of {@code localStorage} initializes. While the
-     * initialization is instantaneous on Web (with Web Storage API), it is
-     * asynchronous on mobile/react-native.
-     *
-     * @private
-     * @returns {Promise}
-     */
-    _initStorage() {
-        const localStorageInitializing = window.localStorage._initializing;
-
-        return (
-            typeof localStorageInitializing === 'undefined'
-                ? Promise.resolve()
-                : localStorageInitializing);
-    }
-
-    /**
-     * Implements React's {@link Component#render()}.
-     *
-     * @inheritdoc
-     * @returns {ReactElement}
-     */
-    render() {
-        const { appAsyncInitialized, route, store } = this.state;
-        const { component } = route;
-
-        if (appAsyncInitialized && component) {
-            return (
-                <I18nextProvider i18n = { i18next }>
-                    <Provider store = { store }>
-                        <Fragment>
-                            { this._createElement(component) }
-                            <SoundCollection />
-                            <OverlayContainer />
-                        </Fragment>
-                    </Provider>
-                </I18nextProvider>
-            );
-        }
-
-        return null;
-    }
-
-    /**
-     * Creates a {@link ReactElement} from the specified component, the
-     * specified props and the props of this {@code AbstractApp} which are
-     * suitable for propagation to the children of this {@code Component}.
+     * Creates an extra {@link ReactElement}s to be added (unconditionaly)
+     * alongside the main element.
      *
-     * @param {Component} component - The component from which the
-     * {@code ReactElement} is to be created.
-     * @param {Object} props - The read-only React {@code Component} props with
-     * which the {@code ReactElement} is to be initialized.
      * @returns {ReactElement}
+     * @abstract
      * @protected
      */
-    _createElement(component, props) {
-        /* eslint-disable no-unused-vars */
-
-        const {
-            // The following props were introduced to be consumed entirely by
-            // AbstractApp:
-            defaultURL,
-            timestamp,
-            url,
-
-            // The remaining props, if any, are considered suitable for
-            // propagation to the children of this Component.
-            ...thisProps
-        } = this.props;
-
-        /* eslint-enable no-unused-vars */
-
-        return React.createElement(component, {
-            ...thisProps,
-            ...props
-        });
+    _createExtraElement() {
+        return (
+            <Fragment>
+                <OverlayContainer />
+            </Fragment>
+        );
     }
 
-    /**
-     * Initializes a new redux store instance suitable for use by this
-     * {@code AbstractApp}.
-     *
-     * @private
-     * @returns {Store} - A new redux store instance suitable for use by this
-     * {@code AbstractApp}.
-     */
-    _createStore() {
-        // Create combined reducer from all reducers in ReducerRegistry.
-        const reducer = ReducerRegistry.combineReducers();
-
-        // Apply all registered middleware from the MiddlewareRegistry and
-        // additional 3rd party middleware:
-        // - Thunk - allows us to dispatch async actions easily. For more info
-        // @see https://github.com/gaearon/redux-thunk.
-        let middleware = MiddlewareRegistry.applyMiddleware(Thunk);
-
-        // Try to enable Redux DevTools Chrome extension in order to make it
-        // available for the purposes of facilitating development.
-        let devToolsExtension;
-
-        if (typeof window === 'object'
-                && (devToolsExtension = window.devToolsExtension)) {
-            middleware = compose(middleware, devToolsExtension());
-        }
-
-        const store
-            = createStore(
-                reducer,
-                PersistenceRegistry.getPersistedState(),
-                middleware);
-
-        // StateListenerRegistry
-        StateListenerRegistry.subscribe(store);
-
-        // This is temporary workaround to be able to dispatch actions from
-        // non-reactified parts of the code (conference.js for example).
-        // Don't use in the react code!!!
-        // FIXME: remove when the reactification is finished!
-        if (typeof APP !== 'undefined') {
-            APP.store = store;
-        }
-
-        return store;
-    }
+    _createMainElement: (React$Element<*>, Object) => ?React$Element<*>;
 
     /**
      * Gets the default URL to be opened when this {@code App} mounts.
@@ -317,32 +127,6 @@ export class AbstractApp extends Component {
         return getDefaultURL(this.state.store);
     }
 
-    /**
-     * Navigates to a specific Route.
-     *
-     * @param {Route} route - The Route to which to navigate.
-     * @returns {Promise}
-     */
-    _navigate(route) {
-        if (_.isEqual(route, this.state.route)) {
-            return Promise.resolve();
-        }
-
-        if (route.href) {
-            // This navigation requires loading a new URL in the browser.
-            window.location.href = route.href;
-
-            return Promise.resolve();
-        }
-
-        // XXX React's setState is asynchronous which means that the value of
-        // this.state.route above may not even be correct. If the check is
-        // performed before setState completes, the app may not navigate to the
-        // expected route. In order to mitigate the problem, _navigate was
-        // changed to return a Promise.
-        return new Promise(resolve => this.setState({ route }, resolve));
-    }
-
     /**
      * Navigates this {@code AbstractApp} to (i.e. opens) a specific URL.
      *

react/features/app/components/App.native.js

@@ -1,6 +1,5 @@
-/* global __DEV__ */
+// @flow
 
-import PropTypes from 'prop-types';
 import React from 'react';
 import { Linking } from 'react-native';
 
@@ -23,47 +22,53 @@ import '../../mobile/proximity';
 import '../../mobile/wake-lock';
 
 import { AbstractApp } from './AbstractApp';
+import type { Props as AbstractAppProps } from './AbstractApp';
+
+declare var __DEV__;
 
 /**
- * Root application component.
- *
- * @extends AbstractApp
+ * App component's property types.
  */
-export class App extends AbstractApp {
+type Props = AbstractAppProps & {
+
     /**
-     * App component's property types.
-     *
-     * @static
+     * Whether the add people feature is enabled or not.
      */
-    static propTypes = {
-        ...AbstractApp.propTypes,
-
-        addPeopleEnabled: PropTypes.bool,
+    addPeopleEnabled: boolean,
 
-        dialOutEnabled: PropTypes.bool,
+    /**
+     * Whether the dial-out feature is enabled or not.
+     */
+    dialOutEnabled: boolean,
 
-        /**
-         * Whether Picture-in-Picture is enabled. If {@code true}, a toolbar
-         * button is rendered in the {@link Conference} view to afford entering
-         * Picture-in-Picture.
-         */
-        pictureInPictureEnabled: PropTypes.bool,
+    /**
+     * Whether Picture-in-Picture is enabled. If {@code true}, a toolbar
+     * button is rendered in the {@link Conference} view to afford entering
+     * Picture-in-Picture.
+     */
+    pictureInPictureEnabled: boolean,
 
-        /**
-         * Whether the Welcome page is enabled. If {@code true}, the Welcome
-         * page is rendered when the {@link App} is not at a location (URL)
-         * identifying a Jitsi Meet conference/room.
-         */
-        welcomePageEnabled: PropTypes.bool
-    };
+    /**
+     * Whether the Welcome page is enabled. If {@code true}, the Welcome
+     * page is rendered when the {@link App} is not at a location (URL)
+     * identifying a Jitsi Meet conference/room.
+     */
+    welcomePageEnabled: boolean
+};
 
+/**
+ * Root application component.
+ *
+ * @extends AbstractApp
+ */
+export class App extends AbstractApp {
     /**
      * 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) {
+    constructor(props: Props) {
         super(props);
 
         // Bind event handlers so they are only bound once for every instance.
@@ -110,11 +115,11 @@ export class App extends AbstractApp {
      *
      * @override
      */
-    _createElement(component, props) {
+    _createMainElement(component, props) {
         return (
             <AspectRatioDetector>
                 <ReducedUIDetector>
-                    { super._createElement(component, props) }
+                    { super._createMainElement(component, props) }
                 </ReducedUIDetector>
             </AspectRatioDetector>
         );
@@ -158,6 +163,8 @@ export class App extends AbstractApp {
         }
     }
 
+    _onLinkingURL: (*) => void;
+
     /**
      * Notified by React's Linking API that a specific URL registered to be
      * handled by this App was activated.
@@ -169,7 +176,7 @@ export class App extends AbstractApp {
      * @returns {void}
      */
     _onLinkingURL({ url }) {
-        this._openURL(url);
+        super._openURL(url);
     }
 }
 

react/features/app/components/App.web.js

@@ -1,3 +1,5 @@
+// @flow
+
 import { AtlasKitThemeProvider } from '@atlaskit/theme';
 import React from 'react';
 
@@ -14,23 +16,16 @@ import { AbstractApp } from './AbstractApp';
  * @extends AbstractApp
  */
 export class App extends AbstractApp {
-    /**
-     * App component's property types.
-     *
-     * @static
-     */
-    static propTypes = AbstractApp.propTypes;
-
     /**
      * Overrides the parent method to inject {@link AtlasKitThemeProvider} as
      * the top most component.
      *
      * @override
      */
-    _createElement(component, props) {
+    _createMainElement(component, props) {
         return (
             <AtlasKitThemeProvider mode = 'dark'>
-                { super._createElement(component, props) }
+                { super._createMainElement(component, props) }
             </AtlasKitThemeProvider>
         );
     }

react/features/app/functions.any.js

@@ -1,33 +1,9 @@
 // @flow
 
+import { getAppProp } from '../base/app';
 import { toState } from '../base/redux';
 import { getServerURL } from '../base/settings';
 
-/**
- * Gets the value of a specific React {@code Component} prop of the currently
- * mounted {@link App}.
- *
- * @param {Function|Object} stateful - The redux store or {@code getState}
- * function.
- * @param {string} propName - The name of the React {@code Component} prop of
- * the currently mounted {@code App} to get.
- * @returns {*} The value of the specified React {@code Compoennt} prop of the
- * currently mounted {@code App}.
- */
-export function getAppProp(stateful: Function | Object, propName: string) {
-    const state = toState(stateful)['features/app'];
-
-    if (state) {
-        const { app } = state;
-
-        if (app) {
-            return app.props[propName];
-        }
-    }
-
-    return undefined;
-}
-
 /**
  * Retrieves the default URL for the app. This can either come from a prop to
  * the root App component or be configured in the settings.
@@ -38,7 +14,7 @@ export function getAppProp(stateful: Function | Object, propName: string) {
  */
 export function getDefaultURL(stateful: Function | Object) {
     const state = toState(stateful);
-    const { app } = state['features/app'];
+    const { app } = state['features/base/app'];
 
     // If the execution environment provides a Location abstraction (e.g. a Web
     // browser), then we'll presume it's the one and only base URL it can be on.

react/features/app/index.js

@@ -1,7 +1,5 @@
 export * from './actions';
-export * from './actionTypes';
 export * from './components';
 export * from './functions';
 
 import './middleware';
-import './reducer';

react/features/app/middleware.js

@@ -72,7 +72,7 @@ function _connectionEstablished(store, next, action) {
  */
 function _navigate({ getState }) {
     const state = getState();
-    const { app } = state['features/app'];
+    const { app } = state['features/base/app'];
 
     _getRouteToRender(state).then(route => app._navigate(route));
 }

react/features/base/app/actions.js

@@ -0,0 +1,48 @@
+// @flow
+
+import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from './actionTypes';
+
+declare var APP;
+
+/**
+ * Signals that a specific App will mount (in the terms of React).
+ *
+ * @param {App} app - The App which will mount.
+ * @returns {{
+ *     type: APP_WILL_MOUNT,
+ *     app: App
+ * }}
+ */
+export function appWillMount(app: Object) {
+    return (dispatch: Dispatch<*>) => {
+        dispatch({
+            type: APP_WILL_MOUNT,
+            app
+        });
+
+        // TODO There was a redux action creator appInit which I did not like
+        // because we already had the redux action creator appWillMount and,
+        // respectively, the redux action APP_WILL_MOUNT. So I set out to remove
+        // appInit and managed to move everything it was doing but the
+        // following. Which is not extremely bad because we haven't moved the
+        // API module into its own feature yet so we're bound to work on that in
+        // the future.
+        typeof APP === 'object' && APP.API.init();
+    };
+}
+
+/**
+ * Signals that a specific App will unmount (in the terms of React).
+ *
+ * @param {App} app - The App which will unmount.
+ * @returns {{
+ *     type: APP_WILL_UNMOUNT,
+ *     app: App
+ * }}
+ */
+export function appWillUnmount(app: Object) {
+    return {
+        type: APP_WILL_UNMOUNT,
+        app
+    };
+}

react/features/base/app/components/BaseApp.js

@@ -0,0 +1,255 @@
+// @flow
+
+import _ from 'lodash';
+import React, { Component, Fragment } from 'react';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { compose, createStore } from 'redux';
+import Thunk from 'redux-thunk';
+
+import { i18next } from '../../i18n';
+import {
+    MiddlewareRegistry,
+    ReducerRegistry,
+    StateListenerRegistry
+} from '../../redux';
+import { SoundCollection } from '../../sounds';
+import { PersistenceRegistry } from '../../storage';
+
+import { appWillMount, appWillUnmount } from '../actions';
+
+declare var APP: Object;
+
+type State = {
+
+    /**
+     * The state of the »possible« async initialization of
+     * the {@code BaseApp}.
+     */
+    initialized: boolean,
+
+    /**
+     * The Route rendered by this {@code BaseApp}.
+     */
+    route: Object,
+
+    /**
+     * The redux store used by this {@code BaseApp}.
+     */
+    store: Object
+};
+
+/**
+ * Base (abstract) class for main App component.
+ *
+ * @abstract
+ */
+export default class BaseApp extends Component<*, State> {
+    _init: Promise<*>;
+
+    /**
+     * Initializes a new {@code BaseApp} instance.
+     *
+     * @param {Object} props - The read-only React {@code Component} props with
+     * which the new instance is to be initialized.
+     */
+    constructor(props: Object) {
+        super(props);
+
+        this.state = {
+            initialized: false,
+            route: {},
+
+            // $FlowFixMe
+            store: undefined
+        };
+
+        /**
+         * Make the mobile {@code BaseApp} wait until the
+         * {@code AsyncStorage} implementation of {@code Storage} initializes
+         * fully.
+         *
+         * @private
+         * @see {@link #_initStorage}
+         * @type {Promise}
+         */
+        this._init
+            = this._initStorage()
+                .catch(() => { /* AbstractApp should always initialize! */ })
+                .then(() =>
+                    this.setState({
+                        store: this._createStore()
+                    }));
+    }
+
+    /**
+     * Initialize the application.
+     *
+     * @inheritdoc
+     */
+    componentWillMount() {
+        this._init.then(() => {
+            const { dispatch } = this.state.store;
+
+            dispatch(appWillMount(this));
+
+            // We set the initialized state here and not in the constructor to
+            // make sure that {@code componentWillMount} gets invoked before
+            // the app tries to render the actual app content.
+            this.setState({ initialized: true });
+        });
+    }
+
+    /**
+     * De-initialize the application.
+     *
+     * @inheritdoc
+     */
+    componentWillUnmount() {
+        const { dispatch } = this.state.store;
+
+        dispatch(appWillUnmount(this));
+    }
+
+    /**
+     * Delays this {@code BaseApp}'s startup until the {@code Storage}
+     * implementation of {@code localStorage} initializes. While the
+     * initialization is instantaneous on Web (with Web Storage API), it is
+     * asynchronous on mobile/react-native.
+     *
+     * @private
+     * @returns {Promise}
+     */
+    _initStorage(): Promise<*> {
+        const { _initializing } = window.localStorage;
+
+        return _initializing || Promise.resolve();
+    }
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        const { initialized, route, store } = this.state;
+        const { component } = route;
+
+        if (initialized && component) {
+            return (
+                <I18nextProvider i18n = { i18next }>
+                    <Provider store = { store }>
+                        <Fragment>
+                            { this._createMainElement(component) }
+                            <SoundCollection />
+                            { this._createExtraElement() }
+                        </Fragment>
+                    </Provider>
+                </I18nextProvider>
+            );
+        }
+
+        return null;
+    }
+
+    /**
+     * Creates an extra {@link ReactElement}s to be added (unconditionaly)
+     * alongside the main element.
+     *
+     * @returns {ReactElement}
+     * @abstract
+     * @protected
+     */
+    _createExtraElement() {
+        return null;
+    }
+
+    /**
+     * Creates a {@link ReactElement} from the specified component, the
+     * specified props and the props of this {@code AbstractApp} which are
+     * suitable for propagation to the children of this {@code Component}.
+     *
+     * @param {Component} component - The component from which the
+     * {@code ReactElement} is to be created.
+     * @param {Object} props - The read-only React {@code Component} props with
+     * which the {@code ReactElement} is to be initialized.
+     * @returns {ReactElement}
+     * @protected
+     */
+    _createMainElement(component, props) {
+        return React.createElement(component, props || {});
+    }
+
+    /**
+     * Initializes a new redux store instance suitable for use by this
+     * {@code AbstractApp}.
+     *
+     * @private
+     * @returns {Store} - A new redux store instance suitable for use by
+     * this {@code AbstractApp}.
+     */
+    _createStore() {
+        // Create combined reducer from all reducers in ReducerRegistry.
+        const reducer = ReducerRegistry.combineReducers();
+
+        // Apply all registered middleware from the MiddlewareRegistry and
+        // additional 3rd party middleware:
+        // - Thunk - allows us to dispatch async actions easily. For more info
+        // @see https://github.com/gaearon/redux-thunk.
+        let middleware = MiddlewareRegistry.applyMiddleware(Thunk);
+
+        // Try to enable Redux DevTools Chrome extension in order to make it
+        // available for the purposes of facilitating development.
+        let devToolsExtension;
+
+        if (typeof window === 'object'
+                && (devToolsExtension = window.devToolsExtension)) {
+            middleware = compose(middleware, devToolsExtension());
+        }
+
+        const store = createStore(
+            reducer, PersistenceRegistry.getPersistedState(), middleware);
+
+        // StateListenerRegistry
+        StateListenerRegistry.subscribe(store);
+
+        // This is temporary workaround to be able to dispatch actions from
+        // non-reactified parts of the code (conference.js for example).
+        // Don't use in the react code!!!
+        // FIXME: remove when the reactification is finished!
+        if (typeof APP !== 'undefined') {
+            APP.store = store;
+        }
+
+        return store;
+    }
+
+    /**
+     * Navigates to a specific Route.
+     *
+     * @param {Route} route - The Route to which to navigate.
+     * @returns {Promise}
+     */
+    _navigate(route): Promise<*> {
+        if (_.isEqual(route, this.state.route)) {
+            return Promise.resolve();
+        }
+
+        if (route.href) {
+            // This navigation requires loading a new URL in the browser.
+            window.location.href = route.href;
+
+            return Promise.resolve();
+        }
+
+        // XXX React's setState is asynchronous which means that the value of
+        // this.state.route above may not even be correct. If the check is
+        // performed before setState completes, the app may not navigate to the
+        // expected route. In order to mitigate the problem, _navigate was
+        // changed to return a Promise.
+        return new Promise(resolve => {
+            this.setState({ route }, resolve);
+        });
+    }
+}

react/features/base/app/components/index.js

@@ -0,0 +1 @@
+export { default as BaseApp } from './BaseApp';

react/features/base/app/functions.js

@@ -0,0 +1,28 @@
+// @flow
+
+import { toState } from '../redux';
+
+/**
+ * Gets the value of a specific React {@code Component} prop of the currently
+ * mounted {@link App}.
+ *
+ * @param {Function|Object} stateful - The redux store or {@code getState}
+ * function.
+ * @param {string} propName - The name of the React {@code Component} prop of
+ * the currently mounted {@code App} to get.
+ * @returns {*} The value of the specified React {@code Compoennt} prop of the
+ * currently mounted {@code App}.
+ */
+export function getAppProp(stateful: Function | Object, propName: string) {
+    const state = toState(stateful)['features/base/app'];
+
+    if (state) {
+        const { app } = state;
+
+        if (app) {
+            return app.props[propName];
+        }
+    }
+
+    return undefined;
+}

react/features/base/app/index.js

@@ -0,0 +1,6 @@
+export * from './actions';
+export * from './actionTypes';
+export * from './components';
+export * from './functions';
+
+import './reducer';

react/features/app/reducer.js → react/features/base/app/reducer.js

@@ -1,10 +1,10 @@
 // @flow
 
-import { ReducerRegistry } from '../base/redux';
+import { ReducerRegistry } from '../redux';
 
 import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from './actionTypes';
 
-ReducerRegistry.register('features/app', (state = {}, action) => {
+ReducerRegistry.register('features/base/app', (state = {}, action) => {
     switch (action.type) {
     case APP_WILL_MOUNT: {
         const { app } = action;
@@ -14,10 +14,10 @@ ReducerRegistry.register('features/app', (state = {}, action) => {
                 ...state,
 
                 /**
-                 * The one and only (i.e. singleton) {@link App} instance which
-                 * is currently mounted.
+                 * The one and only (i.e. singleton) {@link BaseApp} instance
+                 * which is currently mounted.
                  *
-                 * @type {App}
+                 * @type {BaseApp}
                  */
                 app
             };

react/features/base/config/middleware.js

@@ -1,6 +1,6 @@
 // @flow
 
-import { APP_WILL_MOUNT } from '../../app';
+import { APP_WILL_MOUNT } from '../app';
 import { addKnownDomains } from '../known-domains';
 import { MiddlewareRegistry } from '../redux';
 import { parseURIString } from '../util';

react/features/base/known-domains/middleware.js

@@ -1,7 +1,8 @@
 // @flow
 
-import { APP_WILL_MOUNT, getDefaultURL } from '../../app';
+import { getDefaultURL } from '../../app';
 
+import { APP_WILL_MOUNT } from '../app';
 import { SET_ROOM } from '../conference';
 import { MiddlewareRegistry } from '../redux';
 import { parseURIString } from '../util';

react/features/base/known-domains/reducer.js

@@ -1,6 +1,6 @@
 // @flow
 
-import { APP_WILL_MOUNT } from '../../app';
+import { APP_WILL_MOUNT } from '../app';
 import { ReducerRegistry } from '../redux';
 import { PersistenceRegistry } from '../storage';
 

react/features/base/logging/middleware.js

@@ -2,7 +2,7 @@
 
 import Logger from 'jitsi-meet-logger';
 
-import { APP_WILL_MOUNT } from '../../app';
+import { APP_WILL_MOUNT } from '../app';
 import JitsiMeetJS, { LIB_WILL_INIT } from '../lib-jitsi-meet';
 import { MiddlewareRegistry } from '../redux';
 

react/features/base/participants/middleware.js

@@ -1,6 +1,6 @@
 // @flow
 
-import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from '../../app';
+import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from '../app';
 import {
     CONFERENCE_WILL_JOIN,
     forEachConference,

react/features/base/settings/reducer.js

@@ -1,8 +1,7 @@
 // @flow
 import _ from 'lodash';
 
-import { APP_WILL_MOUNT } from '../../app';
-
+import { APP_WILL_MOUNT } from '../app';
 import JitsiMeetJS, { browser } from '../lib-jitsi-meet';
 import { ReducerRegistry } from '../redux';
 import { PersistenceRegistry } from '../storage';

react/features/calendar-sync/middleware.js

@@ -3,7 +3,7 @@
 import md5 from 'js-md5';
 import RNCalendarEvents from 'react-native-calendar-events';
 
-import { APP_WILL_MOUNT } from '../app';
+import { APP_WILL_MOUNT } from '../base/app';
 import { ADD_KNOWN_DOMAINS, addKnownDomains } from '../base/known-domains';
 import { MiddlewareRegistry } from '../base/redux';
 import { APP_LINK_SCHEME, parseURIString } from '../base/util';

react/features/calendar-sync/reducer.js

@@ -1,6 +1,6 @@
 // @flow
 
-import { APP_WILL_MOUNT } from '../app';
+import { APP_WILL_MOUNT } from '../base/app';
 import { ReducerRegistry, set } from '../base/redux';
 import { PersistenceRegistry } from '../base/storage';
 

react/features/chat/middleware.js

@@ -1,6 +1,6 @@
 // @flow
 
-import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from '../app';
+import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from '../base/app';
 import { CONFERENCE_JOINED } from '../base/conference';
 import { JitsiConferenceEvents } from '../base/lib-jitsi-meet';
 import { MiddlewareRegistry } from '../base/redux';

react/features/invite/functions.js

@@ -1,6 +1,6 @@
 // @flow
 
-import { getAppProp } from '../app';
+import { getAppProp } from '../base/app';
 import { isLocalParticipantModerator } from '../base/participants';
 import { doGetJSON } from '../base/util';
 

react/features/invite/middleware.any.js

@@ -1,6 +1,6 @@
 // @flow
 
-import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from '../app';
+import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from '../base/app';
 import {
     CONFERENCE_JOINED
 } from '../base/conference';

react/features/invite/middleware.native.js

@@ -3,8 +3,8 @@
 import i18next from 'i18next';
 import { NativeEventEmitter, NativeModules } from 'react-native';
 
+import { APP_WILL_MOUNT, APP_WILL_UNMOUNT, getAppProp } from '../base/app';
 import { MiddlewareRegistry } from '../base/redux';
-import { APP_WILL_MOUNT, APP_WILL_UNMOUNT, getAppProp } from '../app';
 
 import { invite } from './actions';
 import {

react/features/mobile/audio-mode/middleware.js

@@ -2,7 +2,7 @@
 
 import { NativeModules } from 'react-native';
 
-import { APP_WILL_MOUNT } from '../../app';
+import { APP_WILL_MOUNT } from '../../base/app';
 import {
     CONFERENCE_FAILED,
     CONFERENCE_LEFT,

react/features/mobile/background/middleware.js

@@ -3,7 +3,7 @@
 import { AppState } from 'react-native';
 import type { Dispatch } from 'redux';
 
-import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from '../../app';
+import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from '../../base/app';
 import { MiddlewareRegistry } from '../../base/redux';
 
 import {

react/features/mobile/callkit/middleware.js

@@ -3,12 +3,8 @@
 import uuid from 'uuid';
 
 import { createTrackMutedEvent, sendAnalytics } from '../../analytics';
-import {
-    APP_WILL_MOUNT,
-    APP_WILL_UNMOUNT,
-    appNavigate,
-    getName
-} from '../../app';
+import { appNavigate, getName } from '../../app';
+import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from '../../base/app';
 import {
     CONFERENCE_FAILED,
     CONFERENCE_LEFT,

react/features/mobile/external-api/middleware.js

@@ -2,7 +2,7 @@
 
 import { NativeModules } from 'react-native';
 
-import { getAppProp } from '../../app';
+import { getAppProp } from '../../base/app';
 import {
     CONFERENCE_FAILED,
     CONFERENCE_JOINED,

react/features/mobile/full-screen/middleware.js

@@ -3,7 +3,7 @@
 import { StatusBar } from 'react-native';
 import { Immersive } from 'react-native-immersive';
 
-import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from '../../app';
+import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from '../../base/app';
 import { getCurrentConference } from '../../base/conference';
 import { Platform } from '../../base/react';
 import { MiddlewareRegistry, StateListenerRegistry } from '../../base/redux';

react/features/mobile/image-cache/middleware.js

@@ -1,6 +1,6 @@
 /* @flow */
 
-import { APP_WILL_MOUNT } from '../../app';
+import { APP_WILL_MOUNT } from '../../base/app';
 import {
     getAvatarURL,
     getLocalParticipant,

react/features/mobile/network-activity/middleware.js

@@ -2,7 +2,7 @@
 
 import XHRInterceptor from 'react-native/Libraries/Network/XHRInterceptor';
 
-import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from '../../app';
+import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from '../../base/app';
 import { MiddlewareRegistry } from '../../base/redux';
 
 import {

react/features/mobile/picture-in-picture/actions.js

@@ -2,7 +2,7 @@
 
 import { NativeModules } from 'react-native';
 
-import { getAppProp } from '../../app';
+import { getAppProp } from '../../base/app';
 import { Platform } from '../../base/react';
 
 import { ENTER_PICTURE_IN_PICTURE } from './actionTypes';

react/features/mobile/picture-in-picture/components/PictureInPictureButton.js

@@ -2,7 +2,7 @@
 
 import { connect } from 'react-redux';
 
-import { getAppProp } from '../../../app';
+import { getAppProp } from '../../../base/app';
 import { translate } from '../../../base/i18n';
 import { AbstractButton } from '../../../base/toolbox';
 import type { AbstractButtonProps } from '../../../base/toolbox';

react/features/recent-list/middleware.js

@@ -1,6 +1,6 @@
 // @flow
 
-import { APP_WILL_MOUNT } from '../app';
+import { APP_WILL_MOUNT } from '../base/app';
 import { CONFERENCE_WILL_LEAVE, SET_ROOM } from '../base/conference';
 import { addKnownDomains } from '../base/known-domains';
 import { MiddlewareRegistry } from '../base/redux';

react/features/recent-list/reducer.js

@@ -1,6 +1,6 @@
 // @flow
 
-import { APP_WILL_MOUNT } from '../app';
+import { APP_WILL_MOUNT } from '../base/app';
 import { getURLWithoutParamsNormalized } from '../base/connection';
 import { ReducerRegistry } from '../base/redux';
 import { PersistenceRegistry } from '../base/storage';

react/features/recording/middleware.js

@@ -1,5 +1,6 @@
 /* @flow */
 
+import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from '../base/app';
 import { CONFERENCE_WILL_JOIN, getCurrentConference } from '../base/conference';
 import JitsiMeetJS, {
     JitsiConferenceEvents,
@@ -13,8 +14,6 @@ import {
     unregisterSound
 } from '../base/sounds';
 
-import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from '../app';
-
 import {
     clearRecordingSessions,
     hidePendingRecordingNotification,

react/features/welcome/functions.js

@@ -1,6 +1,6 @@
 // @flow
 
-import { getAppProp } from '../app';
+import { getAppProp } from '../base/app';
 import { toState } from '../base/redux';
 
 declare var APP: Object;