From 14a3c9eabe2a962912af5eeb3ea686726c9f1b72 Mon Sep 17 00:00:00 2001
From: Kayne Ruse <kayneruse@gmail.com>
Date: Sun, 9 Jan 2022 06:39:13 +0000
Subject: [PATCH] Added timestamps to the chatbox

---
 client/pages/panels/popup-chat.jsx | 30 +++++++++++++++++++++++++++---
 client/styles/popup-chat.css       | 10 ++++++++++
 2 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/client/pages/panels/popup-chat.jsx b/client/pages/panels/popup-chat.jsx
index fa256dd..93cf4c3 100644
--- a/client/pages/panels/popup-chat.jsx
+++ b/client/pages/panels/popup-chat.jsx
@@ -78,7 +78,7 @@ const handleSend = (inputRef, pushChatlog, username, accessToken) => {
 	});
 
 	if (!inputRef.current.value.startsWith('/')) {
-		pushChatlog({ username: username, text: inputRef.current.value });
+		pushChatlog({ createdAt: (new Date(Date.now())).toISOString(), username: username, text: inputRef.current.value });
 	}
 
 	inputRef.current.value = '';
@@ -86,7 +86,30 @@ const handleSend = (inputRef, pushChatlog, username, accessToken) => {
 
 //render each line
 const processLine = (line, index, accessToken) => {
-	let content = <div className='content'>{line.username ? <span className='username'>{line.username}: </span> : ''}{line.text ? <span className='text'>{line.text}</span> : ''}</div>;
+	//utility functions
+	const isValidDate = d => {
+		return d instanceof Date && !isNaN(d);
+	};
+
+	const isToday = d => {
+		const now = new Date(Date.now());
+		return d.getDate() == now.getDate() && d.getMonth() == now.getMonth() && d.getFullYear() == now.getFullYear();
+	};
+
+	//parse the date
+	const date = new Date(line.createdAt);
+
+	//split it up so we can format each field individually
+	const month = `${date.getMonth() + 1}`;
+	const day = `${date.getDate()}`;
+	const hours = `${date.getHours()}`;
+	const minutes = `${date.getMinutes()}`.padStart(2, '0');
+
+	//combine into the final timestamp
+	const timestamp = !isValidDate(date) ? '' : isToday(date) ? `${hours}:${minutes}` : `${day}/${month}` ;
+
+	//generate the content string
+	let content = <div className='content row'>{timestamp.length > 0 ? <span className='timestamp col'>{timestamp}</span> : null }<span className='inner col'>{line.username ? <span className='username'>{line.username}: </span> : ''}{line.text ? <span className='text'>{line.text}</span> : ''}</span></div>;
 
 	//decorators
 	if (line.emphasis) {
@@ -97,7 +120,8 @@ const processLine = (line, index, accessToken) => {
 		content = <strong>{content}</strong>;
 	}
 
-	return <li key={index} className='line'>{content}<a className='report' onClick={() => processReport(line, accessToken)}>!!!</a></li>;
+
+	return <li key={index} className='line table noCollapse'>{content}<a className='report' onClick={() => processReport(line, accessToken)}>!!!</a></li>;
 };
 
 const processReport = (line, accessToken) => {
diff --git a/client/styles/popup-chat.css b/client/styles/popup-chat.css
index 7c7ad60..faf829f 100644
--- a/client/styles/popup-chat.css
+++ b/client/styles/popup-chat.css
@@ -77,6 +77,16 @@
 	display: flex;
 }
 
+.chat .timestamp {
+	max-width: 44px;
+}
+
+.chat .inner {
+	flex: 1 !important;
+	display: inline-block !important;
+	flex-direction: row !important;
+}
+
 .chat .username {
 	font-weight: bold;
 }