From 80bcf81dc502a5a8688a9801dd45de081574c406 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Tue, 30 Apr 2024 23:40:26 +0100
Subject: [PATCH] [Clipclops] Separate messages if there's a time gap (#3777)

* separate msg groups by age

* clean up logic and add comments
---
 .../Messages/Conversation/MessageItem.tsx     | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/screens/Messages/Conversation/MessageItem.tsx b/src/screens/Messages/Conversation/MessageItem.tsx
index 688c4244..72f74c29 100644
--- a/src/screens/Messages/Conversation/MessageItem.tsx
+++ b/src/screens/Messages/Conversation/MessageItem.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react'
+import React, {useCallback, useMemo} from 'react'
 import {StyleProp, TextStyle, View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -25,7 +25,25 @@ export function MessageItem({
     TempDmChatDefs.isMessageView(next) &&
     next.sender?.did === getAgent().session?.did
 
-  const isLastInGroup = !next || isFromSelf ? !isNextFromSelf : isNextFromSelf
+  const isLastInGroup = useMemo(() => {
+    // if the next message is from a different sender, then it's the last in the group
+    if (isFromSelf ? !isNextFromSelf : isNextFromSelf) {
+      return true
+    }
+
+    // or, if there's a 10 minute gap between this message and the next
+    if (TempDmChatDefs.isMessageView(next)) {
+      const thisDate = new Date(item.sentAt)
+      const nextDate = new Date(next.sentAt)
+
+      const diff = nextDate.getTime() - thisDate.getTime()
+
+      // 10 minutes
+      return diff > 10 * 60 * 1000
+    }
+
+    return true
+  }, [item, next, isFromSelf, isNextFromSelf])
 
   return (
     <View>