- some 404 chat styling

src/components/404internal/Chat404.tsx

@@ -108,10 +108,13 @@ class Chat404 extends React.Component<Props, State> {
   getTypingTimeInMsFromMsg(message: string): number {
 
     // tslint:disable-next-line
-    const randomWait = this.rnd(100, 500)
+    // const randomWait = this.rnd(100, 500)
 
     // tslint:disable-next-line
-    return message.split(' ').length * 0.4 * 1000 + randomWait
+    // return message.split(' ').length * 0.4 * 1000 + randomWait //this is realistic but we don't want to wait that long
+
+    // tslint:disable-next-line
+    return this.rnd(1000, 1500)
   }
 
   /**
@@ -125,6 +128,7 @@ class Chat404 extends React.Component<Props, State> {
     const randomWait = this.rnd(500, 800)
     // tslint:disable-next-line
     return message.split(' ').length / 4 * 1000 + randomWait
+    // return 1
   }
 
   async displayAllMessages(): Promise<void> {
@@ -143,6 +147,12 @@ class Chat404 extends React.Component<Props, State> {
           return {
             currentConversation: [...prevState.currentConversation, message],
           } as State
+        }, () => {
+
+          //scroll after the new state is set (and rendered?)
+          if (this.state.isAutoScrollBotEnabled) {
+            this.scrollToBottom()
+          }
         })
 
         message = {
@@ -150,11 +160,6 @@ class Chat404 extends React.Component<Props, State> {
           withLoading: false
         } as ChatMessage
 
-
-        if (this.state.isAutoScrollBotEnabled) {
-          this.scrollToBottom()
-        }
-
         await wait(this.getTypingTimeInMsFromMsg(message.message))
 
         //remove old message and insert new with changed props
@@ -163,6 +168,12 @@ class Chat404 extends React.Component<Props, State> {
             currentConversation: [...prevState.currentConversation.filter(
               (value, index1) => index1 !== prevState.currentConversation.length - 1), message],
           } as State
+        }, () => {
+
+          //scroll after the new state is set (and rendered?)
+          if (this.state.isAutoScrollBotEnabled) {
+            this.scrollToBottom()
+          }
         })
 
         await wait(this.getReadTimeInMsFromMsg(message.message))
@@ -174,11 +185,14 @@ class Chat404 extends React.Component<Props, State> {
         return {
           currentConversation: [...prevState.currentConversation, message],
         } as State
+      }, () => {
+
+        //scroll after the new state is set (and rendered?)
+        if (this.state.isAutoScrollBotEnabled) {
+          this.scrollToBottom()
+        }
       })
 
-      if (this.state.isAutoScrollBotEnabled) {
-        this.scrollToBottom()
-      }
 
       await wait(this.getReadTimeInMsFromMsg(message.message))
 
@@ -201,7 +215,9 @@ class Chat404 extends React.Component<Props, State> {
           404
         </div>
 
-        <div className={`down-button clickable${this.state.isAutoScrollBotEnabled ? ' is-enabled' : ''}`} onClick={() => {
+        <div className={`down-button clickable${this.state.isAutoScrollBotEnabled
+                                                ? ' is-enabled'
+                                                : ''}`} onClick={() => {
           this.setState((prevState, props) => ({
             ...prevState,
             isAutoScrollBotEnabled: !prevState.isAutoScrollBotEnabled
@@ -473,6 +489,14 @@ const conversion: ReadonlyArray<ChatMessage> = [
     name: 'Janis',
     withLoading: true,
     message: 'Super, find ich gut.'
-  }
+  },
+  {
+    kind: 'user-entered',
+    message: 'Janis hat den Chat verlassen'
+  },
+  {
+    kind: 'user-entered',
+    message: 'Steffen hat den Chat verlassen'
+  },
 ]
 

src/components/404internal/style.styl

@@ -87,6 +87,7 @@
   &.foreign-message {
     background-color white
     align-self: flex-start
+    max-width 49%
 
     .user-name {
       color: #ff603e