From c1d9169e4dc6ccd45e208343c5ae96a7c4ac710c Mon Sep 17 00:00:00 2001
From: Ario Setiawan <consciousness.dev@gmail.com>
Date: Sun, 5 May 2019 09:20:10 +0700
Subject: [PATCH] Scroll to bottom done, Alhamdulillah

---
 src/App.js | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/App.js b/src/App.js
index 0d67ac0..657425f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -248,7 +248,8 @@ class App extends Component {
   }
   state = {
     chatMsg: {},
-    position: ""
+    position: "",
+    chatAreaHeight: 0
   };
 
   sendMsg(event) {
@@ -283,10 +284,22 @@ class App extends Component {
     this.chatArea.reset();
   }
 
+  scrollToBottom = () => {
+    if (this.chatBubble.scrollHeight > this.state.chatAreaHeight) {
+      this.chatBubble.scrollTop = this.chatBubble.scrollHeight;
+      this.setState({chatAreaHeight: this.chatBubble.scrollHeight});
+    }
+  };
+
   componentDidMount() {
+    this.setState({chatAreaHeight: this.chatBubble.scrollHeight});
     console.log("Apps dimulai");
   }
 
+  componentDidUpdate() {
+    this.scrollToBottom();
+  }
+
   // sendLeft = (side, msg) => {};
   sendLeft = () => {
     this.setState({position: "l"});
@@ -320,7 +333,11 @@ class App extends Component {
                 <ContentChat>
                   <ContentChatWrapper>
                     <ChatBubbleArea>
-                      <ChatBubbleAreaWrapper>
+                      <ChatBubbleAreaWrapper
+                        ref={el => {
+                          this.chatBubble = el;
+                        }}
+                      >
                         {Object.keys(this.state.chatMsg).map(key => (
                           <ChatMessage
                             key={key}