From 35da39becf07ddd143cd62794ae80e14319da90e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sa=C3=BAl=20Ibarra=20Corretg=C3=A9?= <saghul@jitsi.org>
Date: Wed, 13 Sep 2017 14:17:14 +0200
Subject: [PATCH] [RN] NetworkActivityIndicator

The basic indicator is extracted into a LoadingIndicator component,
which then NetworkActivityIndicator displays (or not) based on network
activity.
---
 react/features/app/components/App.native.js   |  1 -
 .../components/native/LoadingIndicator.js     | 24 ++++++++
 .../base/react/components/native/index.js     |  1 +
 .../components/NetworkActivityIndicator.js    | 58 +++++++++++++++++++
 .../network-activity/components/index.js      |  3 +
 .../features/mobile/network-activity/index.js |  2 +
 .../welcome/components/BlankPage.native.js    | 20 +------
 7 files changed, 90 insertions(+), 19 deletions(-)
 create mode 100644 react/features/base/react/components/native/LoadingIndicator.js
 create mode 100644 react/features/mobile/network-activity/components/NetworkActivityIndicator.js
 create mode 100644 react/features/mobile/network-activity/components/index.js

diff --git a/react/features/app/components/App.native.js b/react/features/app/components/App.native.js
index 30d544a686..e29720df69 100644
--- a/react/features/app/components/App.native.js
+++ b/react/features/app/components/App.native.js
@@ -10,7 +10,6 @@ import '../../mobile/audio-mode';
 import '../../mobile/background';
 import '../../mobile/external-api';
 import '../../mobile/full-screen';
-import '../../mobile/network-activity';
 import '../../mobile/permissions';
 import '../../mobile/proximity';
 import '../../mobile/wake-lock';
diff --git a/react/features/base/react/components/native/LoadingIndicator.js b/react/features/base/react/components/native/LoadingIndicator.js
new file mode 100644
index 0000000000..f57f251f87
--- /dev/null
+++ b/react/features/base/react/components/native/LoadingIndicator.js
@@ -0,0 +1,24 @@
+/* @flow */
+
+import React, { Component } from 'react';
+import { ActivityIndicator } from 'react-native';
+
+/**
+ * Simple wrapper around React Native's {@code ActivityIndicator}, which
+ * displays an animated (large) loading indicator.
+ */
+export default class LoadingIndicator extends Component {
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        return (
+            <ActivityIndicator
+                animating = { true }
+                size = { 'large' } />
+        );
+    }
+}
diff --git a/react/features/base/react/components/native/index.js b/react/features/base/react/components/native/index.js
index 42d7e87838..97d794000a 100644
--- a/react/features/base/react/components/native/index.js
+++ b/react/features/base/react/components/native/index.js
@@ -1,3 +1,4 @@
 export { default as Container } from './Container';
 export { default as Link } from './Link';
+export { default as LoadingIndicator } from './LoadingIndicator';
 export { default as Text } from './Text';
diff --git a/react/features/mobile/network-activity/components/NetworkActivityIndicator.js b/react/features/mobile/network-activity/components/NetworkActivityIndicator.js
new file mode 100644
index 0000000000..a9e07ffe73
--- /dev/null
+++ b/react/features/mobile/network-activity/components/NetworkActivityIndicator.js
@@ -0,0 +1,58 @@
+/* @flow */
+
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+import { LoadingIndicator } from '../../../base/react';
+
+/**
+ * The React <tt>Component</tt> which renders a progress indicator when there
+ * are ongoing network requests.
+ */
+class NetworkActivityIndicator extends Component {
+    /**
+     * <tt>NetworkActivityIndicator</tt> React <tt>Component</tt>'s prop types.
+     *
+     * @static
+     */
+    static propTypes = {
+        /**
+         * Indicates whether there is network activity i.e. ongoing network
+         * requests.
+         *
+         * @private
+         */
+        _networkActivity: PropTypes.bool
+    };
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        return this.props._networkActivity ? <LoadingIndicator /> : null;
+    }
+}
+
+/**
+ * Maps (parts of) the redux state to the React <tt>Component</tt> props of
+ * <tt>NetworkActivityIndicator</tt>.
+ *
+ * @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
new file mode 100644
index 0000000000..2039867c34
--- /dev/null
+++ b/react/features/mobile/network-activity/components/index.js
@@ -0,0 +1,3 @@
+export {
+    default as NetworkActivityIndicator
+} from './NetworkActivityIndicator';
diff --git a/react/features/mobile/network-activity/index.js b/react/features/mobile/network-activity/index.js
index 200d254929..daaa5d02a7 100644
--- a/react/features/mobile/network-activity/index.js
+++ b/react/features/mobile/network-activity/index.js
@@ -1,2 +1,4 @@
+export * from './components';
+
 import './middleware';
 import './reducer';
diff --git a/react/features/welcome/components/BlankPage.native.js b/react/features/welcome/components/BlankPage.native.js
index 5414062ddb..8de8063f33 100644
--- a/react/features/welcome/components/BlankPage.native.js
+++ b/react/features/welcome/components/BlankPage.native.js
@@ -2,10 +2,10 @@
 
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { ActivityIndicator } from 'react-native';
 import { connect } from 'react-redux';
 
 import { destroyLocalTracks } from '../../base/tracks';
+import { NetworkActivityIndicator } from '../../mobile/network-activity';
 
 import { isWelcomePageAppEnabled } from '../functions';
 import LocalVideoTrackUnderlay from './LocalVideoTrackUnderlay';
@@ -23,14 +23,6 @@ class BlankPage extends Component {
      * @static
      */
     static propTypes = {
-        /**
-         * Indicates whether there is network activity i.e. ongoing network
-         * requests.
-         *
-         * @private
-         */
-        _networkActivity: PropTypes.bool,
-
         /**
          * The indicator which determines whether <tt>WelcomePage</tt> is (to
          * be) rendered.
@@ -58,15 +50,12 @@ class BlankPage extends Component {
      * Implements React's {@link Component#render()}.
      *
      * @inheritdoc
-     * @override
      * @returns {ReactElement}
      */
     render() {
         return (
             <LocalVideoTrackUnderlay style = { styles.blankPage }>
-                <ActivityIndicator
-                    animating = { this.props._networkActivity }
-                    size = { 'large' } />
+                <NetworkActivityIndicator />
             </LocalVideoTrackUnderlay>
         );
     }
@@ -79,16 +68,11 @@ class BlankPage extends Component {
  * @param {Object} state - The redux state.
  * @private
  * @returns {{
- *     _networkActivity: boolean,
  *     _welcomePageEnabled: boolean
  * }}
  */
 function _mapStateToProps(state) {
-    const { requests } = state['features/network-activity'];
-
     return {
-        _networkActivity:
-            Boolean(requests && (requests.length || requests.size)),
         _welcomePageEnabled: isWelcomePageAppEnabled(state)
     };
 }