From ad497fed7cb067b6a8f474b6187ef3e89a9f2db0 Mon Sep 17 00:00:00 2001 From: Lyubo Marinov Date: Tue, 12 Dec 2017 21:58:33 -0600 Subject: [PATCH] Reduce duplication --- .../base/jwt/components/CalleeInfo.js | 7 +- .../jwt/components/CalleeInfoContainer.js | 64 +++++++++++++++++++ react/features/base/jwt/components/index.js | 1 + .../components/Conference.native.js | 20 +----- .../conference/components/Conference.web.js | 16 +---- react/features/conference/functions.js | 25 -------- 6 files changed, 74 insertions(+), 59 deletions(-) create mode 100644 react/features/base/jwt/components/CalleeInfoContainer.js delete mode 100644 react/features/conference/functions.js diff --git a/react/features/base/jwt/components/CalleeInfo.js b/react/features/base/jwt/components/CalleeInfo.js index d15994733..c55b5b252 100644 --- a/react/features/base/jwt/components/CalleeInfo.js +++ b/react/features/base/jwt/components/CalleeInfo.js @@ -20,10 +20,10 @@ declare var interfaceConfig: Object; type Props = { /** - * Object containing the callee's information. + * The callee's information such as avatar and display name. */ _callee: Object -} +}; /** * The type of the React {@code Component} state of {@link CalleeInfo}. @@ -57,7 +57,7 @@ type State = { * @type {boolean} */ ringing: boolean -} +}; /** * Implements a React {@link Component} which depicts the establishment of a @@ -335,6 +335,7 @@ class CalleeInfo extends Component { function _mapStateToProps(state) { return { /** + * The callee's information such as avatar and display name. * * @private * @type {Object} diff --git a/react/features/base/jwt/components/CalleeInfoContainer.js b/react/features/base/jwt/components/CalleeInfoContainer.js new file mode 100644 index 000000000..121023c51 --- /dev/null +++ b/react/features/base/jwt/components/CalleeInfoContainer.js @@ -0,0 +1,64 @@ +// @flow + +import React, { Component } from 'react'; +import { connect } from 'react-redux'; + +import CalleeInfo from './CalleeInfo'; + +/** + * The type of the React {@code Component} props of {@link Conference}. + */ +type Props = { + + /** + * The indicator which determines whether {@code CalleeInfo} is to be + * rendered. + * + * @private + */ + _calleeInfoVisible: boolean +}; + +/** + * Implements a React {@link Component} which depicts the establishment of a + * call with a specific remote callee if there is such a remote callee. + * + * @extends Component + */ +class CalleeInfoContainer extends Component { + /** + * Implements React's {@link Component#render()}. + * + * @inheritdoc + * @returns {ReactElement} + */ + render() { + return this.props._calleeInfoVisible ? : null; + } +} + +/** + * Maps parts of the redux state to {@link CalleeInfoContainer} (React + * {@code Component}) props. + * + * @param {Object} state - The redux state of which parts are to be mapped to + * {@code CalleeInfoContainer} props. + * @private + * @returns {{ + * _calleeInfoVisible: boolean + * }} + */ +function _mapStateToProps(state: Object): Object { + return { + /** + * The indicator which determines whether {@code CalleeInfo} is to be + * rendered. + * + * @private + * @type {boolean} + */ + _calleeInfoVisible: state['features/base/jwt'].calleeInfoVisible + }; +} + +export default connect(_mapStateToProps)(CalleeInfoContainer); diff --git a/react/features/base/jwt/components/index.js b/react/features/base/jwt/components/index.js index 6d530bd70..94893cdbc 100644 --- a/react/features/base/jwt/components/index.js +++ b/react/features/base/jwt/components/index.js @@ -1 +1,2 @@ export { default as CalleeInfo } from './CalleeInfo'; +export { default as CalleeInfoContainer } from './CalleeInfoContainer'; diff --git a/react/features/conference/components/Conference.native.js b/react/features/conference/components/Conference.native.js index 3d090752d..41be3a3da 100644 --- a/react/features/conference/components/Conference.native.js +++ b/react/features/conference/components/Conference.native.js @@ -9,15 +9,13 @@ import { connect as reactReduxConnect } from 'react-redux'; import { appNavigate } from '../../app'; import { connect, disconnect } from '../../base/connection'; import { DialogContainer } from '../../base/dialog'; -import { CalleeInfo } from '../../base/jwt'; +import { CalleeInfoContainer } from '../../base/jwt'; import { Container, LoadingIndicator } from '../../base/react'; import { createDesiredLocalTracks } from '../../base/tracks'; import { Filmstrip } from '../../filmstrip'; import { LargeVideo } from '../../large-video'; import { setToolboxVisible, Toolbox } from '../../toolbox'; -import { abstractMapStateToProps } from '../functions'; - import styles from './styles'; /** @@ -33,14 +31,6 @@ const _TOOLBOX_TIMEOUT_MS = 5000; */ type Props = { - /** - * The indication which determines if the {@code CalleeInfo} component - * should be shown or not. - * - * @private - */ - _calleeInfoVisible: boolean, - /** * The indicator which determines that we are still connecting to the * conference which includes establishing the XMPP connection and then @@ -202,10 +192,8 @@ class Conference extends Component { {/* * If there is a ringing call, show the callee's info. - */ - this.props._calleeInfoVisible - && - } + */} + {/* * The activity/loading indicator goes above everything, except @@ -393,8 +381,6 @@ function _mapStateToProps(state) { = connecting || (connection && (joining || (!conference && !leaving))); return { - ...abstractMapStateToProps(state), - /** * The indicator which determines that we are still connecting to the * conference which includes establishing the XMPP connection and then diff --git a/react/features/conference/components/Conference.web.js b/react/features/conference/components/Conference.web.js index 44d2e831d..276a0230f 100644 --- a/react/features/conference/components/Conference.web.js +++ b/react/features/conference/components/Conference.web.js @@ -6,15 +6,13 @@ import { connect as reactReduxConnect } from 'react-redux'; import { connect, disconnect } from '../../base/connection'; import { DialogContainer } from '../../base/dialog'; -import { CalleeInfo } from '../../base/jwt'; +import { CalleeInfoContainer } from '../../base/jwt'; import { Filmstrip } from '../../filmstrip'; import { LargeVideo } from '../../large-video'; import { NotificationsContainer } from '../../notifications'; import { showToolbox, Toolbox } from '../../toolbox'; import { HideNotificationBarStyle } from '../../unsupported-browser'; -import { abstractMapStateToProps } from '../functions'; - declare var APP: Object; declare var interfaceConfig: Object; @@ -23,12 +21,6 @@ declare var interfaceConfig: Object; */ type Props = { - /** - * Whether or not the callee's info for a ringing call should be shown - * or not. - */ - _calleeInfoVisible: boolean, - /** * Whether or not the current local user is recording the conference. */ @@ -122,9 +114,7 @@ class Conference extends Component { - { this.props._calleeInfoVisible - && - } + {/* * Temasys automatically injects a notification bar, if @@ -161,8 +151,6 @@ class Conference extends Component { */ function _mapStateToProps(state) { return { - ...abstractMapStateToProps(state), - /** * Indicates if the current user is recording the conference, ie, they * are a recorder. diff --git a/react/features/conference/functions.js b/react/features/conference/functions.js deleted file mode 100644 index a05998e7d..000000000 --- a/react/features/conference/functions.js +++ /dev/null @@ -1,25 +0,0 @@ -// @flow - -/** - * Maps parts of the redux state to {@link Toolbox} (React {@code Component}) - * props. - * - * @param {Object} state - The redux state of which parts are to be mapped to - * {@code Conference} props. - * @protected - * @returns {{ - * _calleeInfoVisible: boolean - * }} - */ -export function abstractMapStateToProps(state: Object): Object { - return { - /** - * The indication which determines if the {@code CalleeInfo} component - * should be shown or not. - * - * @private - * @type {boolean} - */ - _calleeInfoVisible: state['features/base/jwt'].calleeInfoVisible - }; -}