Revert "[Contribution: @kaxi1993] Add typing indicator (#127)"

This reverts commit 56e73a7.

Author: Dylan Harness

README.md

@@ -42,8 +42,7 @@ class Demo extends Component {
   constructor() {
     super();
     this.state = {
-      messageList: [],
-      isTyping: true
+      messageList: []
     };
   }
 
@@ -75,7 +74,6 @@ class Demo extends Component {
         onMessageWasSent={this._onMessageWasSent.bind(this)}
         messageList={this.state.messageList}
         showEmoji
-        showTypingIndicator={this.state.isTyping}
       />
     </div>)
   }
@@ -94,16 +92,15 @@ Launcher props:
 
 |      prop        | type   | required | description |
 |------------------|--------|----------|-------------|
-| agentProfile          | [object](#agent-profile-objects) | yes | Represents your product or service's customer service agent. Fields: imageUrl (string), teamName (string). |
-| handleClick           | function | yes | Intercept the click event on the launcher. No argument sent when function is called. |
-| isOpen                | boolean | yes | Force the open/close state of the chat window. If this is not set, it will open and close when clicked. |
-| messageList           | [[message](#message-objects)] | yes | An array of message objects to be rendered as a conversation. |
-| mute                  | boolean | no | Don't play sound for incoming messages. Defaults to `false`. |
-| newMessagesCount      | number | no | The number of new messages. If greater than 0, this number will be displayed in a badge on the launcher. Defaults to `0`. |
-| onFilesSelected       | function([fileList](https://developer.mozilla.org/en-US/docs/Web/API/FileList)) | no | Called after file has been selected from dialogue in chat window. |
-| onMessageWasSent      | function([message](#message-objects)) | yes | Called when a message is sent, with a message object as an argument. |
-| showEmoji             | boolean | no | Whether or not to show the emoji button in the input bar. Defaults to `true`.
-| showTypingIndicator   | boolean | no | Whether or not to show typing indicator in the message box. Defaults to `false`.
+| agentProfile     | [object](#agent-profile-objects) | yes | Represents your product or service's customer service agent. Fields: imageUrl (string), teamName (string). |
+| handleClick      | function | yes | Intercept the click event on the launcher. No argument sent when function is called. |
+| isOpen           | boolean | yes | Force the open/close state of the chat window. If this is not set, it will open and close when clicked. |
+| messageList      | [[message](#message-objects)] | yes | An array of message objects to be rendered as a conversation. |
+| mute             | boolean | no | Don't play sound for incoming messages. Defaults to `false`. |
+| newMessagesCount | number | no | The number of new messages. If greater than 0, this number will be displayed in a badge on the launcher. Defaults to `0`. |
+| onFilesSelected  | function([fileList](https://developer.mozilla.org/en-US/docs/Web/API/FileList)) | no | Called after file has been selected from dialogue in chat window. |
+| onMessageWasSent | function([message](#message-objects)) | yes | Called when a message is sent, with a message object as an argument. |
+| showEmoji        | boolean | no | Whether or not to show the emoji button in the input bar. Defaults to `true`.
 
 
 ### Message Objects

demo/src/TestArea.js

@@ -1,26 +1,6 @@
 import React, { Component } from 'react'
 
 class TestArea extends Component {
-  constructor (props) {
-    super(props);
-
-    this.timeout = null;
-    this._onKeyUp = this._onKeyUp.bind(this);
-  }
-
-  _onKeyUp() {
-    if (this.timeout) {
-      clearTimeout(this.timeout);
-    }
-
-    this.props.startTyping();
-
-    // stop typing after 1 second of inactivity
-    this.timeout = setTimeout(() => {
-      this.props.stopTyping();
-    }, 1000);
-  }
-
   render () {
     return (
       <div className="demo-test-area--wrapper">
@@ -33,17 +13,13 @@ class TestArea extends Component {
         <form className="demo-test-area" onSubmit={(e)=> {
             e.preventDefault();
             this.props.onMessage(this.textArea.value);
-
-            this.props.stopTyping();
-
             this.textArea.value = '';
           }}>
           <div className="demo-test-area--preamble">Test the chat window by sending a message:</div>
           <textarea
             ref={(e) => { this.textArea = e; }}
             className="demo-test-area--text"
             placeholder="Write a test message...."
-            onKeyUp={this._onKeyUp}
           />
           <button className="demo-test-area--button"> Send Message! </button>
         </form>

demo/src/index.js

@@ -18,8 +18,7 @@ class Demo extends Component {
     this.state = {
       messageList: messageHistory,
       newMessagesCount: 0,
-      isOpen: false,
-      isTyping: false
+      isOpen: false
     };
   }
 
@@ -56,18 +55,6 @@ class Demo extends Component {
     }
   }
 
-  _startTyping() {
-    this.setState({
-      isTyping: true
-    });
-  }
-
-  _stopTyping() {
-    this.setState({
-      isTyping: false
-    });
-  }
-
   _handleClick() {
     this.setState({
       isOpen: !this.state.isOpen,
@@ -80,8 +67,6 @@ class Demo extends Component {
       <Header />
       <TestArea
         onMessage={this._sendMessage.bind(this)}
-        startTyping={this._startTyping.bind(this)}
-        stopTyping={this._stopTyping.bind(this)}
       />
       <Launcher
         agentProfile={{
@@ -95,7 +80,6 @@ class Demo extends Component {
         handleClick={this._handleClick.bind(this)}
         isOpen={this.state.isOpen}
         showEmoji
-        showTypingIndicator={this.state.isTyping}
       />
       <img className="demo-monster-img" src={monsterImgUrl} />
       <Footer />

src/components/ChatWindow.js

@@ -34,7 +34,6 @@ class ChatWindow extends Component {
           <MessageList
             messages={messageList}
             imageUrl={this.props.agentProfile.imageUrl}
-            showTypingIndicator={this.props.showTypingIndicator}
           />
           <UserInput
             onSubmit={this.onUserInputSubmit.bind(this)}
@@ -52,8 +51,7 @@ ChatWindow.propTypes = {
   onClose: PropTypes.func.isRequired,
   onFilesSelected: PropTypes.func,
   onUserInputSubmit: PropTypes.func.isRequired,
-  showEmoji: PropTypes.bool,
-  showTypingIndicator: PropTypes.bool
+  showEmoji: PropTypes.bool
 }
 
 export default ChatWindow;

src/components/Launcher.js

@@ -60,7 +60,6 @@ class Launcher extends Component {
           isOpen={isOpen}
           onClose={this.handleClick.bind(this)}
           showEmoji={this.props.showEmoji}
-          showTypingIndicator={this.props.showTypingIndicator}
         />
       </div>
     );
@@ -85,13 +84,11 @@ Launcher.propTypes = {
   messageList: PropTypes.arrayOf(PropTypes.object),
   mute: PropTypes.bool,
   showEmoji: PropTypes.bool,
-  showTypingIndicator: PropTypes.bool
 };
 
 Launcher.defaultProps = {
   newMessagesCount: 0,
-  showEmoji: true,
-  showTypingIndicator: false
-};
+  showEmoji: true
+}
 
 export default Launcher;

src/components/MessageList.js

@@ -1,7 +1,5 @@
 import React, { Component } from 'react';
-
-import Message from './Messages';
-import TypingIndicator from './TypingIndicator';
+import Message from './Messages'
 
 class MessageList extends Component {
 
@@ -15,9 +13,8 @@ class MessageList extends Component {
         {this.props.messages.map((message, i) => {
           return <Message message={message} key={i} />
         })}
-        {this.props.showTypingIndicator && <TypingIndicator />}
       </div>)
   }
 }
 
-export default MessageList
+export default MessageList

src/components/TypingIndicator.js

@@ -4,5 +4,4 @@ import './launcher.css';
 import './header.css';
 import './message.css';
 import './user-input.css';
-import './popup-window.css';
-import './typing-indicator.css';
+import './popup-window.css';