Reduce duplication

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<Props, State> {
 function _mapStateToProps(state) {
     return {
         /**
+         * The callee's information such as avatar and display name.
          *
          * @private
          * @type {Object}

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<Props> {
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        return this.props._calleeInfoVisible ? <CalleeInfo /> : 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);

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

@@ -1 +1,2 @@
 export { default as CalleeInfo } from './CalleeInfo';
+export { default as CalleeInfoContainer } from './CalleeInfoContainer';

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<Props> {
 
                 {/*
                   * If there is a ringing call, show the callee's info.
-                  */
-                    this.props._calleeInfoVisible
-                        && <CalleeInfo />
-                }
+                  */}
+                <CalleeInfoContainer />
 
                 {/*
                   * 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

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<Props> {
                 <DialogContainer />
                 <NotificationsContainer />
 
-                { this.props._calleeInfoVisible
-                    && <CalleeInfo />
-                }
+                <CalleeInfoContainer />
 
                 {/*
                   * Temasys automatically injects a notification bar, if
@@ -161,8 +151,6 @@ class Conference extends Component<Props> {
  */
 function _mapStateToProps(state) {
     return {
-        ...abstractMapStateToProps(state),
-
         /**
          * Indicates if the current user is recording the conference, ie, they
          * are a recorder.

react/features/conference/functions.js

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