Merge pull request #25 from ML-Leonardo/fix/deprecated_methods

Fixed the warning deprecated messages

package.json

@@ -30,7 +30,7 @@
     "react-dom": "^16.1.1",
     "react-markdown": "^4.0.6",
     "react-redux": "^5.0.6",
-    "react-slick": "^0.18.1",
+    "react-slick": "^0.25.0",
     "redux": "^3.7.2",
     "redux-actions": "^2.2.1",
     "redux-thunk": "^2.2.0",

src/components/Live/index.js

@@ -12,27 +12,21 @@ class Live extends Component {
   state = {
     showTyping: false,
   }
-
+  static getDerivedStateFromProps (props, state) {
+    if (props.messages.length !== state.msgLength) {
+      // only show the busy indicate if the count increase.
+      // (on error the cancel will remove the message, so we do not want the busy indicator)
+      return { showTyping: props.messages.length > state.msgLength, msgLength: props.messages.length }
+    }
+    return null
+  }
   componentDidMount () {
     if (this.messagesList) {
       this.messagesList.scrollTop = this.messagesList.scrollHeight
     }
     window.addEventListener('resize', this.handleScroll)
   }
 
-  componentWillReceiveProps (nextProps) {
-    if (nextProps.messages.length !== this.props.messages.length) {
-      this.setState({ showTyping: true }, () => {
-        // FIXME Scroll to the bottom when typing. setTimeout is a bit dirty and can be improved
-        setTimeout(() => {
-          if (this.messagesList) {
-            this.messagesList.scrollTop = this.messagesList.scrollHeight
-          }
-        }, 100)
-      })
-    }
-  }
-
   componentDidUpdate (prevProps) {
     if (prevProps.messages.length !== this.props.messages.length) {
       if (this.messagesList) {

src/components/Message/QuickReplies.js

@@ -16,6 +16,10 @@ class QuickReplies extends Component {
     showArrow: true,
   }
 
+  static getDerivedStateFromProps (props, state) {
+    return { displayQuickReplies: props.isLastMessage }
+  }
+
   componentDidMount () {
     const widthQuickReplies = sum(
       values(
@@ -31,11 +35,7 @@ class QuickReplies extends Component {
     }
   }
 
-  componentWillReceiveProps (nextProps) {
-    this.setState({ displayQuickReplies: nextProps.isLastMessage })
-  }
-
-  buttons = {}
+   buttons = {}
 
   doSendMessage = message => {
     this.props.sendMessage(message)
@@ -70,20 +70,21 @@ class QuickReplies extends Component {
             className='RecastAppSlider RecastAppQuickReplies--slider CaiAppSlider CaiAppQuickReplies--slider'
           >
             {buttons.map((b, i) => (
-              <div
-                ref={ref => {
-                  this.buttons[i] = ref
-                }}
-                key={i}
-                title={b.title.length > 20 ? b.title : null}
-                className='RecastAppQuickReplies--button CaiAppQuickReplies--button'
-                onClick={() => this.doSendMessage({ type: 'quickReply', content: b })}
-                style={{
-                  border: `1px solid ${style.accentColor}`,
-                  color: style.accentColor,
-                }}
-              >
-                {truncate(b.title, 20)}
+              <div key={i}>
+                <div
+                  ref={ref => {
+                    this.buttons[i] = ref
+                  }}
+                  title={b.title.length > 20 ? b.title : null}
+                  className='RecastAppQuickReplies--button CaiAppQuickReplies--button'
+                  onClick={() => this.doSendMessage({ type: 'quickReply', content: b })}
+                  style={{
+                    border: `1px solid ${style.accentColor}`,
+                    color: style.accentColor,
+                  }}
+                >
+                  {truncate(b.title, 20)}
+                </div>
               </div>
             ))}
           </Slider>