From b83a64d8628b48028aeb693759d0dfab3ff688c7 Mon Sep 17 00:00:00 2001
From: m5r <mokht@rmi.al>
Date: Sun, 15 Aug 2021 11:09:09 +0800
Subject: [PATCH] group messages by every 15 minutes

---
 app/messages/components/conversation.tsx    | 23 ++++++++++++---------
 app/messages/pages/messages/[recipient].tsx |  2 +-
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/app/messages/components/conversation.tsx b/app/messages/components/conversation.tsx
index 70e22eb..a601450 100644
--- a/app/messages/components/conversation.tsx
+++ b/app/messages/components/conversation.tsx
@@ -25,17 +25,20 @@ export default function Conversation() {
 						const isOutbound = message.direction === Direction.Outbound;
 						const nextMessage = conversation![index + 1];
 						const previousMessage = conversation![index - 1];
-						const isSameNext = message.from === nextMessage?.from;
-						const isSamePrevious = message.from === previousMessage?.from;
-						const differenceInMinutes = previousMessage
-							? (new Date(message.sentAt).getTime() - new Date(previousMessage.sentAt).getTime()) /
-							  1000 /
-							  60
-							: 0;
-						const isTooLate = differenceInMinutes > 15;
+						const isNextMessageFromSameSender = message.from === nextMessage?.from;
+						const isPreviousMessageFromSameSender = message.from === previousMessage?.from;
+
+						const messageSentAt = new Date(message.sentAt);
+						const previousMessageSentAt = previousMessage ? new Date(previousMessage.sentAt) : null;
+						const quarter = Math.floor(messageSentAt.getMinutes() / 15);
+						const sameQuarter =
+							previousMessage &&
+							messageSentAt.getTime() - previousMessageSentAt!.getTime() < 15 * 60 * 1000 &&
+							quarter === Math.floor(previousMessageSentAt!.getMinutes() / 15);
+						const shouldGroupMessages = previousMessageSentAt && sameQuarter;
 						return (
 							<li key={message.id}>
-								{(!isSamePrevious || isTooLate) && (
+								{(!isPreviousMessageFromSameSender || !shouldGroupMessages) && (
 									<div className="flex py-2 space-x-1 text-xs justify-center">
 										<strong>
 											{new Date(message.sentAt).toLocaleDateString("fr-FR", {
@@ -55,7 +58,7 @@ export default function Conversation() {
 
 								<div
 									className={clsx(
-										isSameNext ? "pb-1" : "pb-2",
+										isNextMessageFromSameSender ? "pb-1" : "pb-2",
 										isOutbound ? "text-right" : "text-left",
 									)}
 								>
diff --git a/app/messages/pages/messages/[recipient].tsx b/app/messages/pages/messages/[recipient].tsx
index ff2ab6a..4a52d3f 100644
--- a/app/messages/pages/messages/[recipient].tsx
+++ b/app/messages/pages/messages/[recipient].tsx
@@ -20,7 +20,7 @@ const ConversationPage: BlitzPage = () => {
 				<span className="col-start-1 col-span-1 pl-2 cursor-pointer" onClick={router.back}>
 					<FontAwesomeIcon size="lg" className="h-8 w-8" icon={faLongArrowLeft} />
 				</span>
-				<strong className="col-span-1">{recipient}</strong>
+				<strong className="col-span-1 text-center">{recipient}</strong>
 				<span className="col-span-1 flex justify-end space-x-4 pr-2">
 					<FontAwesomeIcon size="lg" className="h-8 w-8" icon={faPhone} />
 					<FontAwesomeIcon size="lg" className="h-8 w-8" icon={faInfoCircle} />