haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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.
This commit is contained in:
Saúl Ibarra Corretgé 2018-07-11 11:42:43 +02:00 committed by Lyubo Marinov
parent 3bfab7718f
commit dc246960df
39 changed files with 461 additions and 412 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
react/features/app/actions.js
View File

@ -15,7 +15,6 @@ import { loadConfig } from '../base/lib-jitsi-meet';
import { parseURIString, toURLString } from '../base/util'; import { parseURIString, toURLString } from '../base/util';
import { setFatalError } from '../overlay'; import { setFatalError } from '../overlay';
import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from './actionTypes';
import { getDefaultURL } from './functions'; import { getDefaultURL } from './functions';
const logger = require('jitsi-meet-logger').getLogger(__filename); const logger = require('jitsi-meet-logger').getLogger(__filename);
@ -138,49 +137,6 @@ function _appNavigateToOptionalLocation(
return _appNavigateToMandatoryLocation(dispatch, getState, location); 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. * Loads config.js from a specific host.
* *

304
react/features/app/components/AbstractApp.js
View File

@ -1,107 +1,44 @@
/* global APP */ // @flow
import _ from 'lodash'; import React, { Fragment } from 'react';
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 { i18next } from '../../base/i18n'; import { BaseApp } from '../../base/app';
import {
MiddlewareRegistry,
ReducerRegistry,
StateListenerRegistry
} from '../../base/redux';
import { SoundCollection } from '../../base/sounds';
import { PersistenceRegistry } from '../../base/storage';
import { toURLString } from '../../base/util'; import { toURLString } from '../../base/util';
import { OverlayContainer } from '../../overlay'; import { OverlayContainer } from '../../overlay';
import { appNavigate, appWillMount, appWillUnmount } from '../actions'; import { appNavigate } from '../actions';
import { getDefaultURL } from '../functions'; import { getDefaultURL } from '../functions';
/**
* {@code AbstractApp} component's property types.
*/
export type Props = {
/**
* The default URL {@code AbstractApp} is to open when not in any
* conference/room.
*/
defaultURL: string,
/**
* XXX Refer to the implementation of loadURLObject: in
* ios/sdk/src/JitsiMeetView.m for further information.
*/
timestamp: any,
/**
* The URL, if any, with which the app was launched.
*/
url: Object | string
};
/** /**
* Base (abstract) class for main App component. * Base (abstract) class for main App component.
* *
* @abstract * @abstract
*/ */
export class AbstractApp extends Component { export class AbstractApp extends BaseApp<Props, *> {
/** _init: Promise<*>;
* {@code AbstractApp} component's property types.
*
* @static
*/
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
])
};
/**
* 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.
*/
constructor(props) {
super(props);
this.state = {
/**
* 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
};
/**
* 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()
}));
}
/** /**
* Initializes the app. * Initializes the app.
@ -109,20 +46,11 @@ export class AbstractApp extends Component {
* @inheritdoc * @inheritdoc
*/ */
componentWillMount() { componentWillMount() {
super.componentWillMount();
this._init.then(() => { this._init.then(() => {
const { dispatch } = this.state.store; // If a URL was explicitly specified to this React Component,
// then open it; otherwise, use a default.
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({
appAsyncInitialized: true
});
// 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()); this._openURL(toURLString(this.props.url) || this._getDefaultURL());
}); });
} }
@ -136,7 +64,7 @@ export class AbstractApp extends Component {
* that this instance will receive. * that this instance will receive.
* @returns {void} * @returns {void}
*/ */
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps: Props) {
const { props } = this; const { props } = this;
this._init.then(() => { 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 * Gets a {@code Location} object from the window with information about the
* current location of the document. Explicitly defined to allow extenders * 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} * Creates an extra {@link ReactElement}s to be added (unconditionaly)
* implementation of {@code localStorage} initializes. While the * alongside the main element.
* 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}.
*
* @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} * @returns {ReactElement}
* @abstract
* @protected * @protected
*/ */
_createElement(component, props) { _createExtraElement() {
/* eslint-disable no-unused-vars */ return (
<Fragment>
const { <OverlayContainer />
// The following props were introduced to be consumed entirely by </Fragment>
// 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
});
} }
/** _createMainElement: (React$Element<*>, Object) => ?React$Element<*>;
* 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;
}
/** /**
* Gets the default URL to be opened when this {@code App} mounts. * 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); 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. * Navigates this {@code AbstractApp} to (i.e. opens) a specific URL.
* *

73
react/features/app/components/App.native.js
View File

@ -1,6 +1,5 @@
/* global __DEV__ */ // @flow
import PropTypes from 'prop-types';
import React from 'react'; import React from 'react';
import { Linking } from 'react-native'; import { Linking } from 'react-native';
@ -23,6 +22,39 @@ import '../../mobile/proximity';
import '../../mobile/wake-lock'; import '../../mobile/wake-lock';
import { AbstractApp } from './AbstractApp'; import { AbstractApp } from './AbstractApp';
import type { Props as AbstractAppProps } from './AbstractApp';
declare var __DEV__;
/**
* App component's property types.
*/
type Props = AbstractAppProps & {
/**
* Whether the add people feature is enabled or not.
*/
addPeopleEnabled: boolean,
/**
* 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: 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: boolean
};
/** /**
* Root application component. * Root application component.
@ -30,40 +62,13 @@ import { AbstractApp } from './AbstractApp';
* @extends AbstractApp * @extends AbstractApp
*/ */
export class App extends AbstractApp { export class App extends AbstractApp {
/**
* App component's property types.
*
* @static
*/
static propTypes = {
...AbstractApp.propTypes,
addPeopleEnabled: PropTypes.bool,
dialOutEnabled: 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: 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: PropTypes.bool
};
/** /**
* Initializes a new App instance. * Initializes a new App instance.
* *
* @param {Object} props - The read-only React Component props with which * @param {Object} props - The read-only React Component props with which
* the new instance is to be initialized. * the new instance is to be initialized.
*/ */
constructor(props) { constructor(props: Props) {
super(props); super(props);
// Bind event handlers so they are only bound once for every instance. // Bind event handlers so they are only bound once for every instance.
@ -110,11 +115,11 @@ export class App extends AbstractApp {
* *
* @override * @override
*/ */
_createElement(component, props) { _createMainElement(component, props) {
return ( return (
<AspectRatioDetector> <AspectRatioDetector>
<ReducedUIDetector> <ReducedUIDetector>
{ super._createElement(component, props) } { super._createMainElement(component, props) }
</ReducedUIDetector> </ReducedUIDetector>
</AspectRatioDetector> </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 * Notified by React's Linking API that a specific URL registered to be
* handled by this App was activated. * handled by this App was activated.
@ -169,7 +176,7 @@ export class App extends AbstractApp {
* @returns {void} * @returns {void}
*/ */
_onLinkingURL({ url }) { _onLinkingURL({ url }) {
this._openURL(url); super._openURL(url);
} }
} }

13
react/features/app/components/App.web.js
View File

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

28
react/features/app/functions.any.js
View File

@ -1,33 +1,9 @@
// @flow // @flow
import { getAppProp } from '../base/app';
import { toState } from '../base/redux'; import { toState } from '../base/redux';
import { getServerURL } from '../base/settings'; 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 * 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. * 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) { export function getDefaultURL(stateful: Function | Object) {
const state = toState(stateful); 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 // 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. // browser), then we'll presume it's the one and only base URL it can be on.

2
react/features/app/index.js
View File

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

2
react/features/app/middleware.js
View File

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

0
react/features/app/actionTypes.js → react/features/base/app/actionTypes.js
View File

48
react/features/base/app/actions.js Normal file
View File

@ -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
};
}

255
react/features/base/app/components/BaseApp.js Normal file
View File

@ -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);
});
}
}

1
react/features/base/app/components/index.js Normal file
View File

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

28
react/features/base/app/functions.js Normal file
View File

@ -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;
}

6
react/features/base/app/index.js Normal file
View File

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

10
react/features/app/reducer.js → react/features/base/app/reducer.js
View File

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

2
react/features/base/config/middleware.js
View File

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

3
react/features/base/known-domains/middleware.js
View File

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

2
react/features/base/known-domains/reducer.js
View File

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

2
react/features/base/logging/middleware.js
View File

@ -2,7 +2,7 @@
import Logger from 'jitsi-meet-logger'; 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 JitsiMeetJS, { LIB_WILL_INIT } from '../lib-jitsi-meet';
import { MiddlewareRegistry } from '../redux'; import { MiddlewareRegistry } from '../redux';

2
react/features/base/participants/middleware.js
View File

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

3
react/features/base/settings/reducer.js
View File

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

2
react/features/calendar-sync/middleware.js
View File

@ -3,7 +3,7 @@
import md5 from 'js-md5'; import md5 from 'js-md5';
import RNCalendarEvents from 'react-native-calendar-events'; 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 { ADD_KNOWN_DOMAINS, addKnownDomains } from '../base/known-domains';
import { MiddlewareRegistry } from '../base/redux'; import { MiddlewareRegistry } from '../base/redux';
import { APP_LINK_SCHEME, parseURIString } from '../base/util'; import { APP_LINK_SCHEME, parseURIString } from '../base/util';

2
react/features/calendar-sync/reducer.js
View File

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

2
react/features/chat/middleware.js
View File

@ -1,6 +1,6 @@
// @flow // @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 { CONFERENCE_JOINED } from '../base/conference';
import { JitsiConferenceEvents } from '../base/lib-jitsi-meet'; import { JitsiConferenceEvents } from '../base/lib-jitsi-meet';
import { MiddlewareRegistry } from '../base/redux'; import { MiddlewareRegistry } from '../base/redux';

2
react/features/invite/functions.js
View File

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

2
react/features/invite/middleware.any.js
View File

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

2
react/features/invite/middleware.native.js
View File

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

2
react/features/mobile/audio-mode/middleware.js
View File

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

2
react/features/mobile/background/middleware.js
View File

@ -3,7 +3,7 @@
import { AppState } from 'react-native'; import { AppState } from 'react-native';
import type { Dispatch } from 'redux'; 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 { MiddlewareRegistry } from '../../base/redux';
import { import {

8
react/features/mobile/callkit/middleware.js
View File

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

2
react/features/mobile/external-api/middleware.js
View File

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

2
react/features/mobile/full-screen/middleware.js
View File

@ -3,7 +3,7 @@
import { StatusBar } from 'react-native'; import { StatusBar } from 'react-native';
import { Immersive } from 'react-native-immersive'; 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 { getCurrentConference } from '../../base/conference';
import { Platform } from '../../base/react'; import { Platform } from '../../base/react';
import { MiddlewareRegistry, StateListenerRegistry } from '../../base/redux'; import { MiddlewareRegistry, StateListenerRegistry } from '../../base/redux';

2
react/features/mobile/image-cache/middleware.js
View File

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

2
react/features/mobile/network-activity/middleware.js
View File

@ -2,7 +2,7 @@
import XHRInterceptor from 'react-native/Libraries/Network/XHRInterceptor'; 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 { MiddlewareRegistry } from '../../base/redux';
import { import {

2
react/features/mobile/picture-in-picture/actions.js
View File

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

2
react/features/mobile/picture-in-picture/components/PictureInPictureButton.js
View File

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

2
react/features/recent-list/middleware.js
View File

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

2
react/features/recent-list/reducer.js
View File

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

3
react/features/recording/middleware.js
View File

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

2
react/features/welcome/functions.js
View File

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