From d33b70047751c8872745e7be947850719a6bff63 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sa=C3=BAl=20Ibarra=20Corretg=C3=A9?= Date: Fri, 18 Oct 2019 14:23:20 +0200 Subject: [PATCH] rn,blank-page: refactor BlankPage - Remove network-activity "feature" - It wasn't in use - It relied on internal React Native components, bound to break anytime - Show an infinite loading indicator - Style it just like the LoadConfigOverlay - Since it kinda represents the opposite, an "unload" then SDK is done --- .../mobile/network-activity/actionTypes.js | 37 --------- .../components/NetworkActivityIndicator.js | 55 ------------- .../network-activity/components/index.js | 3 - .../features/mobile/network-activity/index.js | 4 - .../mobile/network-activity/middleware.js | 81 ------------------- .../mobile/network-activity/reducer.js | 60 -------------- .../welcome/components/BlankPage.native.js | 41 ++++++++-- react/features/welcome/components/styles.js | 13 +++ 8 files changed, 48 insertions(+), 246 deletions(-) delete mode 100644 react/features/mobile/network-activity/actionTypes.js delete mode 100644 react/features/mobile/network-activity/components/NetworkActivityIndicator.js delete mode 100644 react/features/mobile/network-activity/components/index.js delete mode 100644 react/features/mobile/network-activity/index.js delete mode 100644 react/features/mobile/network-activity/middleware.js delete mode 100644 react/features/mobile/network-activity/reducer.js diff --git a/react/features/mobile/network-activity/actionTypes.js b/react/features/mobile/network-activity/actionTypes.js deleted file mode 100644 index 7466efaa8..000000000 --- a/react/features/mobile/network-activity/actionTypes.js +++ /dev/null @@ -1,37 +0,0 @@ -/** - * The type of redux action to add a network request to the redux store/state. - * - * { - * type: _ADD_NETWORK_REQUEST, - * request: Object - * } - * - * @protected - */ -export const _ADD_NETWORK_REQUEST = '_ADD_NETWORK_REQUEST'; - -/** - * The type of redux action to remove all network requests from the redux - * store/state. - * - * { - * type: _REMOVE_ALL_NETWORK_REQUESTS, - * } - * - * @protected - */ -export const _REMOVE_ALL_NETWORK_REQUESTS - = '_REMOVE_ALL_NETWORK_REQUESTS'; - -/** - * The type of redux action to remove a network request from the redux - * store/state. - * - * { - * type: _REMOVE_NETWORK_REQUEST, - * request: Object - * } - * - * @protected - */ -export const _REMOVE_NETWORK_REQUEST = '_REMOVE_NETWORK_REQUEST'; diff --git a/react/features/mobile/network-activity/components/NetworkActivityIndicator.js b/react/features/mobile/network-activity/components/NetworkActivityIndicator.js deleted file mode 100644 index 2b2ae4574..000000000 --- a/react/features/mobile/network-activity/components/NetworkActivityIndicator.js +++ /dev/null @@ -1,55 +0,0 @@ -// @flow - -import React, { Component } from 'react'; - -import { LoadingIndicator } from '../../../base/react'; -import { connect } from '../../../base/redux'; - -/** - * The type of the React {@code Component} props of - * {@link NetworkActivityIndicator}. - */ -type Props = { - - /** - * Indicates whether there is network activity i.e. ongoing network - * requests. - */ - _networkActivity: boolean -}; - -/** - * The React {@code Component} which renders a progress indicator when there - * are ongoing network requests. - */ -class NetworkActivityIndicator extends Component { - /** - * Implements React's {@link Component#render()}. - * - * @inheritdoc - * @returns {ReactElement} - */ - render() { - return this.props._networkActivity ? : null; - } -} - -/** - * Maps (parts of) the redux state to the React {@code Component} props of - * {@code NetworkActivityIndicator}. - * - * @param {Object} state - The redux state. - * @private - * @returns {{ - * _networkActivity: boolean - * }} - */ -function _mapStateToProps(state) { - const { requests } = state['features/network-activity']; - - return { - _networkActivity: Boolean(requests && requests.size) - }; -} - -export default connect(_mapStateToProps)(NetworkActivityIndicator); diff --git a/react/features/mobile/network-activity/components/index.js b/react/features/mobile/network-activity/components/index.js deleted file mode 100644 index 2039867c3..000000000 --- a/react/features/mobile/network-activity/components/index.js +++ /dev/null @@ -1,3 +0,0 @@ -export { - default as NetworkActivityIndicator -} from './NetworkActivityIndicator'; diff --git a/react/features/mobile/network-activity/index.js b/react/features/mobile/network-activity/index.js deleted file mode 100644 index daaa5d02a..000000000 --- a/react/features/mobile/network-activity/index.js +++ /dev/null @@ -1,4 +0,0 @@ -export * from './components'; - -import './middleware'; -import './reducer'; diff --git a/react/features/mobile/network-activity/middleware.js b/react/features/mobile/network-activity/middleware.js deleted file mode 100644 index 3d953d1b7..000000000 --- a/react/features/mobile/network-activity/middleware.js +++ /dev/null @@ -1,81 +0,0 @@ -/* @flow */ - -import XHRInterceptor from 'react-native/Libraries/Network/XHRInterceptor'; - -import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from '../../base/app'; -import { MiddlewareRegistry } from '../../base/redux'; - -import { - _ADD_NETWORK_REQUEST, - _REMOVE_ALL_NETWORK_REQUESTS, - _REMOVE_NETWORK_REQUEST -} from './actionTypes'; - -/** - * Middleware which captures app startup and conference actions in order to - * clear the image cache. - * - * @returns {Function} - */ -MiddlewareRegistry.register(store => next => action => { - const result = next(action); - - switch (action.type) { - case APP_WILL_MOUNT: - _startNetInterception(store); - break; - - case APP_WILL_UNMOUNT: - _stopNetInterception(store); - break; - } - - return result; -}); - -/** - * Starts intercepting network requests. Only XHR requests are supported at the - * moment. - * - * Ongoing request information is kept in redux, and it's removed as soon as a - * given request is complete. - * - * @param {Object} store - The redux store. - * @private - * @returns {void} - */ -function _startNetInterception({ dispatch }) { - XHRInterceptor.setOpenCallback((method, url, xhr) => dispatch({ - type: _ADD_NETWORK_REQUEST, - request: xhr, - - // The following are not really necessary read anywhere at the time of - // this writing but are provided anyway if the reducer chooses to - // remember them: - method, - url - })); - XHRInterceptor.setResponseCallback((...args) => dispatch({ - type: _REMOVE_NETWORK_REQUEST, - - // XXX The XHR is the last argument of the responseCallback. - request: args[args.length - 1] - })); - - XHRInterceptor.enableInterception(); -} - -/** - * Stops intercepting network requests. - * - * @param {Object} store - The redux store. - * @private - * @returns {void} - */ -function _stopNetInterception({ dispatch }) { - XHRInterceptor.disableInterception(); - - dispatch({ - type: _REMOVE_ALL_NETWORK_REQUESTS - }); -} diff --git a/react/features/mobile/network-activity/reducer.js b/react/features/mobile/network-activity/reducer.js deleted file mode 100644 index 93b2f5502..000000000 --- a/react/features/mobile/network-activity/reducer.js +++ /dev/null @@ -1,60 +0,0 @@ -// @flow - -import { ReducerRegistry, set } from '../../base/redux'; - -import { - _ADD_NETWORK_REQUEST, - _REMOVE_ALL_NETWORK_REQUESTS, - _REMOVE_NETWORK_REQUEST -} from './actionTypes'; - -/** - * The default/initial redux state of the feature network-activity. - * - * @type {{ - * requests: Map - * }} - */ -const DEFAULT_STATE = { - /** - * The ongoing network requests i.e. the network request which have been - * added to the redux store/state and have not been removed. - * - * @type {Map} - */ - requests: new Map() -}; - -ReducerRegistry.register( - 'features/network-activity', - (state = DEFAULT_STATE, action) => { - switch (action.type) { - case _ADD_NETWORK_REQUEST: { - const { - type, // eslint-disable-line no-unused-vars - - request: key, - ...value - } = action; - const requests = new Map(state.requests); - - requests.set(key, value); - - return set(state, 'requests', requests); - } - - case _REMOVE_ALL_NETWORK_REQUESTS: - return set(state, 'requests', DEFAULT_STATE.requests); - - case _REMOVE_NETWORK_REQUEST: { - const { request: key } = action; - const requests = new Map(state.requests); - - requests.delete(key); - - return set(state, 'requests', requests); - } - } - - return state; - }); diff --git a/react/features/welcome/components/BlankPage.native.js b/react/features/welcome/components/BlankPage.native.js index aa9d584bc..939324a7f 100644 --- a/react/features/welcome/components/BlankPage.native.js +++ b/react/features/welcome/components/BlankPage.native.js @@ -1,18 +1,27 @@ // @flow import React, { Component } from 'react'; +import { View } from 'react-native'; import type { Dispatch } from 'redux'; +import { ColorSchemeRegistry } from '../../base/color-scheme'; +import { LoadingIndicator } from '../../base/react'; import { connect } from '../../base/redux'; +import { StyleType } from '../../base/styles'; import { destroyLocalTracks } from '../../base/tracks'; -import { NetworkActivityIndicator } from '../../mobile/network-activity'; -import LocalVideoTrackUnderlay from './LocalVideoTrackUnderlay'; +import styles from './styles'; /** * The type of React {@code Component} props of {@link BlankPage}. */ type Props = { + + /** + * The color schemed style of the component. + */ + _styles: StyleType, + dispatch: Dispatch }; @@ -40,12 +49,32 @@ class BlankPage extends Component { * @returns {ReactElement} */ render() { + const { _styles } = this.props; + return ( - - - + + + ); } } -export default connect()(BlankPage); +/** + * Maps part of the Redux state to the props of this component. + * + * @param {Object} state - The Redux state. + * @returns {Props} + */ +function _mapStateToProps(state) { + return { + _styles: ColorSchemeRegistry.get(state, 'LoadConfigOverlay') + }; +} + +export default connect(_mapStateToProps)(BlankPage); diff --git a/react/features/welcome/components/styles.js b/react/features/welcome/components/styles.js index c3e62a789..ff84ddd61 100644 --- a/react/features/welcome/components/styles.js +++ b/react/features/welcome/components/styles.js @@ -1,5 +1,7 @@ // @flow +import { StyleSheet } from 'react-native'; + import { BoxModel, ColorPalette } from '../../base/styles'; export const PLACEHOLDER_TEXT_COLOR = 'rgba(255, 255, 255, 0.3)'; @@ -38,6 +40,17 @@ export default { flexDirection: 'row' }, + /** + * View that is rendered when there is no welcome page. + */ + blankPageWrapper: { + ...StyleSheet.absoluteFillObject, + alignItems: 'center', + flex: 1, + flexDirection: 'column', + justifyContent: 'center' + }, + /** * Join button style. */