From 925539426099c6d2c49ea018ba5298206555dc55 Mon Sep 17 00:00:00 2001
From: Jack Tzu-Chieh Huang <u9520107@gmail.com>
Date: Fri, 21 Jul 2017 09:26:26 +0800
Subject: [PATCH 1/2] show SpinnerOverlay in ComposeTextPanel when related
 modules are not ready

---
 .../ComposeTextPanel/NoSenderAlert.js         | 44 +++++++++++++++++
 src/components/ComposeTextPanel/index.js      | 49 ++++++++-----------
 src/containers/ComposeTextPage/index.js       |  7 +++
 3 files changed, 71 insertions(+), 29 deletions(-)
 create mode 100644 src/components/ComposeTextPanel/NoSenderAlert.js

diff --git a/src/components/ComposeTextPanel/NoSenderAlert.js b/src/components/ComposeTextPanel/NoSenderAlert.js
new file mode 100644
index 0000000000..1d89712670
--- /dev/null
+++ b/src/components/ComposeTextPanel/NoSenderAlert.js
@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import messageSenderMessages from
+  'ringcentral-integration/modules/MessageSender/messageSenderMessages';
+import AlertDisplay from '../AlertDisplay';
+import MessageSenderAlert from '../MessageSenderAlert';
+
+export default class NoSenderAlert extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showAlert: !props.hasSenderNumbers && this.props.outboundSMS,
+    };
+    this.onDismissAlert = () => {
+      this.setState({
+        showAlert: false
+      });
+    };
+    this.getRenderer = () => MessageSenderAlert;
+    this.messages = [
+      {
+        id: '1',
+        level: 'warning',
+        message: messageSenderMessages.senderNumberInvalid,
+      }
+    ];
+  }
+  render() {
+    return this.state.showAlert ? (
+      <AlertDisplay
+        currentLocale={this.props.currentLocale}
+        messages={this.messages}
+        dismiss={this.onDismissAlert}
+        getRenderer={this.getRenderer}
+      />
+    ) : null;
+  }
+}
+
+NoSenderAlert.propTypes = {
+  currentLocale: PropTypes.string.isRequired,
+  outboundSMS: PropTypes.bool.isRequired,
+  hasSenderNumbers: PropTypes.bool.isRequired,
+};
diff --git a/src/components/ComposeTextPanel/index.js b/src/components/ComposeTextPanel/index.js
index 3c0a5ac3b5..686b0aec95 100644
--- a/src/components/ComposeTextPanel/index.js
+++ b/src/components/ComposeTextPanel/index.js
@@ -1,14 +1,12 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import messageSenderMessages from
-'ringcentral-integration/modules/MessageSender/messageSenderMessages';
 import classnames from 'classnames';
 import i18n from './i18n';
 import styles from './styles.scss';
 import RecipientsInput from '../RecipientsInput';
-import AlertDisplay from '../AlertDisplay';
-import MessageSenderAlert from '../MessageSenderAlert';
 import Select from '../DropdownSelect';
+import SpinnerOverlay from '../SpinnerOverlay';
+import NoSenderAlert from './NoSenderAlert';
 
 
 function SenderField(props) {
@@ -35,13 +33,14 @@ SenderField.propTypes = {
   options: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
 };
 
+
 class ComposeTextPanel extends Component {
   constructor(props) {
     super(props);
 
-    this.state = {
-      showAlert: !this.hasSenderNumbers() && this.props.outboundSMS,
-    };
+    // this.state = {
+    //   showAlert: !this.hasSenderNumbers() && this.props.outboundSMS,
+    // };
 
     this.onSenderChange = (value) => {
       this.props.updateSenderNumber(value);
@@ -88,19 +87,6 @@ class ComposeTextPanel extends Component {
       this.props.send();
       console.debug('send message ...');
     };
-    this.onDismissAlert = () => {
-      this.setState({
-        showAlert: false
-      });
-    };
-    this.getRenderer = () => MessageSenderAlert;
-    this.messages = [
-      {
-        id: '1',
-        level: 'warning',
-        message: messageSenderMessages.senderNumberInvalid,
-      }
-    ];
   }
 
   hasSenderNumbers() {
@@ -108,14 +94,13 @@ class ComposeTextPanel extends Component {
   }
 
   render() {
-    const noSenderAlert = this.state.showAlert ? (
-      <AlertDisplay
-        currentLocale={this.props.currentLocale}
-        messages={this.messages}
-        dismiss={this.onDismissAlert}
-        getRenderer={this.getRenderer}
-      />
-    ) : null;
+    if (this.props.showSpinner) {
+      return (
+        <div className={classnames(styles.root, this.props.className)}>
+          <SpinnerOverlay />
+        </div>
+      );
+    }
     const senderField = this.hasSenderNumbers() ?
       (
         <SenderField
@@ -128,7 +113,11 @@ class ComposeTextPanel extends Component {
       ) : null;
     return (
       <div className={classnames(styles.root, this.props.className)}>
-        {noSenderAlert}
+        <NoSenderAlert
+          currentLocale={this.props.currentLocale}
+          outboundSMS={this.props.outboundSMS}
+          hasSenderNumbers={this.hasSenderNumbers()}
+        />
         <form onSubmit={this.handleSubmit}>
           <div className={styles.receiverField}>
             <RecipientsInput
@@ -203,6 +192,7 @@ ComposeTextPanel.propTypes = {
     name: PropTypes.string,
   })).isRequired,
   outboundSMS: PropTypes.bool,
+  showSpinner: PropTypes.bool,
 };
 
 ComposeTextPanel.defaultProps = {
@@ -211,6 +201,7 @@ ComposeTextPanel.defaultProps = {
   typingToNumber: '',
   senderNumber: '',
   outboundSMS: false,
+  showSpinner: false,
 };
 
 export default ComposeTextPanel;
diff --git a/src/containers/ComposeTextPage/index.js b/src/containers/ComposeTextPage/index.js
index 4de9f5bbf9..a2b42192c3 100644
--- a/src/containers/ComposeTextPage/index.js
+++ b/src/containers/ComposeTextPage/index.js
@@ -39,6 +39,13 @@ composeText,
     messageText: composeText.messageText,
     outboundSMS: rolesAndPermissions.permissions.OutboundSMS,
     searchContactList: contactSearch.searching.result,
+    showSpinner: !(
+      composeText.ready &&
+      locale.ready &&
+      messageSender.ready &&
+      rolesAndPermissions.ready &&
+      contactSearch.ready
+    ),
   };
 }
 

From 21263a346d6aa92bcdd594a53b2bdfc8762cf9ae Mon Sep 17 00:00:00 2001
From: Jack Tzu-Chieh Huang <u9520107@gmail.com>
Date: Fri, 21 Jul 2017 10:59:15 +0800
Subject: [PATCH 2/2] remove useless comments

---
 src/components/ComposeTextPanel/index.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/ComposeTextPanel/index.js b/src/components/ComposeTextPanel/index.js
index 686b0aec95..5c653b6a32 100644
--- a/src/components/ComposeTextPanel/index.js
+++ b/src/components/ComposeTextPanel/index.js
@@ -38,10 +38,6 @@ class ComposeTextPanel extends Component {
   constructor(props) {
     super(props);
 
-    // this.state = {
-    //   showAlert: !this.hasSenderNumbers() && this.props.outboundSMS,
-    // };
-
     this.onSenderChange = (value) => {
       this.props.updateSenderNumber(value);
     };