From e92a70eccf917baf32095b5c8e9c9b4b9c7c5243 Mon Sep 17 00:00:00 2001
From: Deepak Agarwal <deepak710agarwal@gmail.com>
Date: Wed, 24 Mar 2021 02:52:40 +0530
Subject: [PATCH] fix many-request-error

---
 src/components/Messages/MessageList/index.js  | 31 ++++++++------
 .../Messages/MessageList/styles.scss          | 12 ++++++
 src/lib/room.js                               | 41 +++++++++++++++----
 src/routes/Chat/component.js                  |  3 ++
 src/routes/Chat/container.js                  |  2 +
 src/store/index.js                            |  1 +
 6 files changed, 68 insertions(+), 22 deletions(-)

diff --git a/src/components/Messages/MessageList/index.js b/src/components/Messages/MessageList/index.js
index ff5f8ddce..5ce5c775a 100644
--- a/src/components/Messages/MessageList/index.js
+++ b/src/components/Messages/MessageList/index.js
@@ -164,17 +164,22 @@ export class MessageList extends MemoizedComponent {
 
 	render = ({
 		className,
-		style = {},
-	}) => (
-		<div
-			onScroll={this.handleScroll}
-			className={createClassName(styles, 'message-list', {}, [className])}
-			onClick={this.handleClick}
-			style={style}
-		>
-			<ol className={createClassName(styles, 'message-list__content')}>
-				{this.renderItems(this.props)}
-			</ol>
-		</div>
-	)
+		style = {}
+	}) => {
+		if (this.props.loading) {
+			return <span className={createClassName(styles, 'many-request-error')}>{this.props.loadingMessage}</span>
+		}
+		else {
+			return <div
+				onScroll={this.handleScroll}
+				className={createClassName(styles, 'message-list', {}, [className])}
+				onClick={this.handleClick}
+				style={style}
+			>
+				<ol className={createClassName(styles, 'message-list__content')}>
+					{this.renderItems(this.props)}
+				</ol>
+			</div>
+		}
+	}
 }
diff --git a/src/components/Messages/MessageList/styles.scss b/src/components/Messages/MessageList/styles.scss
index eaea3151d..f1218db6d 100644
--- a/src/components/Messages/MessageList/styles.scss
+++ b/src/components/Messages/MessageList/styles.scss
@@ -1,6 +1,8 @@
 @import '../../../styles/colors';
 @import '../../../styles/variables';
 
+$alert-error-background-color: $color-red;
+
 .message-list {
 	display: flex;
 	overflow-y: scroll;
@@ -33,3 +35,13 @@
 		list-style: none;
 	}
 }
+
+.many-request-error{
+	background-color: $alert-error-background-color;
+	width:100%;
+	height:28px;
+	color: #FFFFFF;
+	font-family: Helvetica Neue,arial,sans-serif;
+	font-size: 12px;
+	padding:5px;
+}
diff --git a/src/lib/room.js b/src/lib/room.js
index e4e6c0e0b..56e03df20 100644
--- a/src/lib/room.js
+++ b/src/lib/room.js
@@ -162,15 +162,38 @@ export const loadMessages = async () => {
 	}
 
 	await store.setState({ loading: true });
-	const rawMessages = (await Livechat.loadMessages(rid)).concat(previousMessages);
-	const messages = (await normalizeMessages(rawMessages)).map(transformAgentInformationOnMessage);
-
-	await initRoom();
-	await store.setState({ messages: (messages || []).reverse(), noMoreMessages: false, loading: false });
-
-	if (messages && messages.length) {
-		const lastMessage = messages[messages.length - 1];
-		await store.setState({ lastReadMessageId: lastMessage && lastMessage._id });
+	try {
+		const rawMessages = (await Livechat.loadMessages(rid)).concat(previousMessages);
+		const messages = (await normalizeMessages(rawMessages)).map(transformAgentInformationOnMessage);
+		await initRoom();
+		await store.setState({ messages: (messages || []).reverse(), noMoreMessages: false, loading: false });
+
+		if (messages && messages.length) {
+			const lastMessage = messages[messages.length - 1];
+			await store.setState({ lastReadMessageId: lastMessage && lastMessage._id });
+		}
+	}
+	catch(e) {
+		const waitTime = parseInt(e.data.error.match(/^.*You must wait ([0-9]*) seconds.*$/)[1]);
+		const decrementCounter = async () => {
+			if(window.loadMessagesTimeout) {
+				clearInterval(window.loadMessagesTimeout);
+			}
+			window.loadMessagesTimeout = setInterval(() => {
+				let tmpWaitTime = store.state.loadWaitTime;
+				if(tmpWaitTime) {
+					store.setState({loadWaitTime: tmpWaitTime - 1, loadingMessage: `Error, too many requests. Please slow down. You must wait for ${tmpWaitTime} seconds.` });
+				}
+				else {
+					if(window.loadMessagesTimeout) {
+						clearInterval(window.loadMessagesTimeout);
+					}
+					window.location.reload();
+				}
+			}, 1000)
+		}
+		await store.setState({ loading: true, loadWaitTime: waitTime });
+		await decrementCounter();
 	}
 };
 
diff --git a/src/routes/Chat/component.js b/src/routes/Chat/component.js
index 0fa0774b3..20951d60a 100644
--- a/src/routes/Chat/component.js
+++ b/src/routes/Chat/component.js
@@ -106,6 +106,7 @@ export default class Chat extends Component {
 		avatarResolver,
 		conversationFinishedMessage,
 		loading,
+		loadingMessage,
 		onUpload,
 		messages,
 		uploads = false,
@@ -149,6 +150,8 @@ export default class Chat extends Component {
 							ref={this.handleMessagesContainerRef}
 							avatarResolver={avatarResolver}
 							uid={uid}
+							loading={loading}
+							loadingMessage={loadingMessage}
 							messages={messages}
 							typingUsernames={typingUsernames}
 							conversationFinishedMessage={conversationFinishedMessage}
diff --git a/src/routes/Chat/container.js b/src/routes/Chat/container.js
index d9755fc1b..9c1565980 100644
--- a/src/routes/Chat/container.js
+++ b/src/routes/Chat/container.js
@@ -401,6 +401,7 @@ export const ChatConnector = ({ ref, ...props }) => (
 			lastReadMessageId,
 			triggerAgent,
 			queueInfo,
+			loadingMessage,
 		}) => (
 			<ChatContainer
 				ref={ref}
@@ -434,6 +435,7 @@ export const ChatConnector = ({ ref, ...props }) => (
 				uploads={uploads}
 				typingUsernames={Array.isArray(typing) ? typing : []}
 				loading={loading}
+				loadingMessage={loadingMessage}
 				showConnecting={showConnecting} // setting from server that tells if app needs to show "connecting" sometimes
 				connecting={!!(room && !agent && (showConnecting || queueInfo))}
 				dispatch={dispatch}
diff --git a/src/store/index.js b/src/store/index.js
index 47d031d06..5caa72936 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -34,6 +34,7 @@ const initialState = {
 	visible: true,
 	minimized: true,
 	unread: null,
+	loadingMessage: null,
 };
 
 const dontPersist = ['messages', 'typing', 'loading', 'alerts', 'unread', 'noMoreMessages', 'modal'];