DeforaNetworks/jitsi-meet
3
0
Fork 0
Code Releases Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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';
/**
* {@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.
*
* @abstract
*/
export class AbstractApp extends Component {
/**
* {@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()
}));
}
export class AbstractApp extends BaseApp<Props, *> {
_init: Promise<*>;
/**
* Initializes the app.
@@ -109,20 +46,11 @@ export class AbstractApp extends Component {
* @inheritdoc
*/
componentWillMount() {
super.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({
appAsyncInitialized: true
});
// If a URL was explicitly specified to this React Component, then
// open it; otherwise, use a default.
// 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.
* Creates an extra {@link ReactElement}s to be added (unconditionaly)
* alongside the main element.
*
* @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}
* @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.
*