From 3b3fc39d0850bae0ac49ddb3d70b1abae61ead36 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Janis=20Daniel=20Da=CC=88hne?=
<janis.daehne2@student.uni-halle.de>
Date: Fri, 9 Aug 2019 15:05:14 +0200
Subject: [PATCH] - some 404 chat styling
---
src/components/404internal/Chat404.tsx | 48 +++++++++++++++++++-------
src/components/404internal/style.styl | 1 +
2 files changed, 37 insertions(+), 12 deletions(-)
diff --git a/src/components/404internal/Chat404.tsx b/src/components/404internal/Chat404.tsx
index b9d81a63..546dc38d 100644
--- a/src/components/404internal/Chat404.tsx
+++ b/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'
+ },
]
diff --git a/src/components/404internal/style.styl b/src/components/404internal/style.styl
index f31166fd..31855ae7 100644
--- a/src/components/404internal/style.styl
+++ b/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
--
GitLab