diff --git a/src/allStyles.styl b/src/allStyles.styl index f9179349afccad7659f45fc2aa4e10e8c4185d3e..75bf1fba73812b3f6553c6da0da7c019fcacd59c 100644 --- a/src/allStyles.styl +++ b/src/allStyles.styl @@ -9,7 +9,7 @@ //webpack import 'react-notifications/lib/notifications.css'; @import "../customChangedLib/react-notifications/notifications.styl" -@import "../src/components/404/style.styl" +@import "components/404internal/style.styl" @import "../src/components/helpers/styles.styl" diff --git a/src/app.tsx b/src/app.tsx index 618acbd928a9ec99c62bcb13156640c9faa559e0..1b424e06797127d8b1d46ef0c42dcf9842ed1ddc 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -114,7 +114,7 @@ import Spinner from './components/helpers/spinner' import SystemSettingsSite from './components/sites/systemSettingsSite/systemSettingsSite' import {tempPrintDivId} from './constants' -import Chat404 from '../src/components/404/Chat404' +import Chat404 from './components/404internal/Chat404' const mapStateToProps = (rootState: RootState) => { return { diff --git a/src/components/404/Chat404.tsx b/src/components/404internal/Chat404.tsx similarity index 92% rename from src/components/404/Chat404.tsx rename to src/components/404internal/Chat404.tsx index 0e82fe311532fd18f38bc49fb868a1da19a4bd13..3b119cc275440b35a75b7dacdba0a3e90eb91fc3 100644 --- a/src/components/404/Chat404.tsx +++ b/src/components/404internal/Chat404.tsx @@ -79,8 +79,7 @@ class Chat404 extends React.Component<Props, State> { } componentDidMount(): void { - - this.addNextMessage(0) + this.displayAllMessages() } componentWillUnmount(): void { @@ -97,83 +96,53 @@ class Chat404 extends React.Component<Props, State> { return Math.floor(Math.random() * (inclusiveMax + 1 - inclusiveMin)) + inclusiveMin; } - async addNextMessage(index: number): Promise<void> { - - if (this.disposed) return - - if (index >= this.conversationCopy.length) { - return - } + async displayAllMessages(): Promise<void> { // tslint:disable-next-line - let msg = this.conversationCopy[index] - - if (msg.kind === 'message') { - - await wait(this.getRndDelay()) - - const wasLoading = msg.withLoading - - if (msg.withLoading) { + for (let i = 0; i < this.conversationCopy.length; i++) { + // tslint:disable-next-line + let message = this.conversationCopy[i]; + if (this.disposed) return - if (this.disposed) return + //a message could need to display loading + if (message.kind === 'message' && message.withLoading) { - //first add loading... this.setState((prevState: State) => { return { - currentConversation: [...prevState.currentConversation, msg], + currentConversation: [...prevState.currentConversation, message], } as State }) - } - await wait(this.getRndDelay()) - - if (wasLoading) { - - msg = { - ...msg, + message = { + ...message, withLoading: false } as ChatMessage - if (this.disposed) return + await wait(this.getRndDelay()) + + //remove old message and insert new with changed props this.setState((prevState: State) => { return { currentConversation: [...prevState.currentConversation.filter( - (value, index1) => index1 !== prevState.currentConversation.length - 1), msg], + (value, index1) => index1 !== prevState.currentConversation.length - 1), message], } as State }) - } else { - - if (this.disposed) return - - this.setState((prevState: State) => { - return { - currentConversation: [...prevState.currentConversation, msg], - } as State - }) + await wait(this.getRndDelay()) + continue } - - this.addNextMessage(index + 1) - - } else { - - await wait(this.getRndDelay()) - - if (this.disposed) return - - //set immediately this.setState((prevState: State) => { return { - currentConversation: [...prevState.currentConversation, msg], + currentConversation: [...prevState.currentConversation, message], } as State }) - this.addNextMessage(index + 1) + await wait(this.getRndDelay()) + } @@ -406,7 +375,7 @@ const conversion: ReadonlyArray<ChatMessage> = [ kind: 'message', name: 'Janis', withLoading: true, - message: 'Ich sag dazu jetzt mal lieber nichts.' + message: 'Ich sag dazu jetzt mal lieber nichts...' }, { kind: 'message', diff --git a/src/components/404/style.styl b/src/components/404internal/style.styl similarity index 100% rename from src/components/404/style.styl rename to src/components/404internal/style.styl