[Clipclops] Add clop sent time to clipclop (#3772)

* add message sent time to message

* fix last message in group logic

src/screens/Messages/Conversation/MessageItem.tsx

@@ -1,37 +1,140 @@
-import React from 'react'
-import {View} from 'react-native'
+import React, {useCallback} from 'react'
+import {StyleProp, TextStyle, View} from 'react-native'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
 import {useAgent} from '#/state/session'
+import {TimeElapsed} from '#/view/com/util/TimeElapsed'
 import {atoms as a, useTheme} from '#/alf'
 import {Text} from '#/components/Typography'
 import * as TempDmChatDefs from '#/temp/dm/defs'
 
-export function MessageItem({item}: {item: TempDmChatDefs.MessageView}) {
+export function MessageItem({
+  item,
+  next,
+}: {
+  item: TempDmChatDefs.MessageView
+  next: TempDmChatDefs.MessageView | TempDmChatDefs.DeletedMessage | null
+}) {
   const t = useTheme()
   const {getAgent} = useAgent()
 
-  const fromMe = item.sender?.did === getAgent().session?.did
+  const isFromSelf = item.sender?.did === getAgent().session?.did
+
+  const isNextFromSelf =
+    TempDmChatDefs.isMessageView(next) &&
+    next.sender?.did === getAgent().session?.did
+
+  const isLastInGroup = !next || isFromSelf ? !isNextFromSelf : isNextFromSelf
 
   return (
-    <View
-      style={[
-        a.py_sm,
-        a.px_md,
-        a.my_xs,
-        a.rounded_md,
-        fromMe ? a.self_end : a.self_start,
-        {
-          backgroundColor: fromMe
-            ? t.palette.primary_500
-            : t.palette.contrast_50,
-          maxWidth: '65%',
-          borderRadius: 17,
-        },
-      ]}>
-      <Text
-        style={[a.text_md, a.leading_snug, fromMe && {color: t.palette.white}]}>
-        {item.text}
-      </Text>
+    <View>
+      <View
+        style={[
+          a.py_sm,
+          a.px_lg,
+          a.my_2xs,
+          a.rounded_md,
+          isFromSelf ? a.self_end : a.self_start,
+          {
+            maxWidth: '65%',
+            backgroundColor: isFromSelf
+              ? t.palette.primary_500
+              : t.palette.contrast_50,
+            borderRadius: 17,
+          },
+          isFromSelf
+            ? {borderBottomRightRadius: isLastInGroup ? 2 : 17}
+            : {borderBottomLeftRadius: isLastInGroup ? 2 : 17},
+        ]}>
+        <Text
+          style={[
+            a.text_md,
+            a.leading_snug,
+            isFromSelf && {color: t.palette.white},
+          ]}>
+          {item.text}
+        </Text>
+      </View>
+      <Metadata
+        message={item}
+        isLastInGroup={isLastInGroup}
+        style={isFromSelf ? a.text_right : a.text_left}
+      />
     </View>
   )
 }
+
+function Metadata({
+  message,
+  isLastInGroup,
+  style,
+}: {
+  message: TempDmChatDefs.MessageView
+  isLastInGroup: boolean
+  style: StyleProp<TextStyle>
+}) {
+  const t = useTheme()
+  const {_} = useLingui()
+
+  const relativeTimestamp = useCallback(
+    (timestamp: string) => {
+      const date = new Date(timestamp)
+      const now = new Date()
+
+      const time = new Intl.DateTimeFormat(undefined, {
+        hour: 'numeric',
+        minute: 'numeric',
+        hour12: true,
+      }).format(date)
+
+      const diff = now.getTime() - date.getTime()
+
+      // under 1 minute
+      if (diff < 1000 * 60) {
+        return _(msg`Now`)
+      }
+
+      // in the last day
+      if (now.getDate() === date.getDate()) {
+        return time
+      }
+
+      // if yesterday
+      if (diff < 24 * 60 * 60 * 1000 && now.getDate() - date.getDate() === 1) {
+        return _(msg`Yesterday, ${time}`)
+      }
+
+      return new Intl.DateTimeFormat(undefined, {
+        hour: 'numeric',
+        minute: 'numeric',
+        hour12: true,
+        day: 'numeric',
+        month: 'numeric',
+        year: 'numeric',
+      }).format(date)
+    },
+    [_],
+  )
+
+  if (!isLastInGroup) {
+    return null
+  }
+
+  return (
+    <TimeElapsed timestamp={message.sentAt} timeToString={relativeTimestamp}>
+      {({timeElapsed}) => (
+        <Text
+          style={[
+            t.atoms.text_contrast_medium,
+            a.text_xs,
+            a.mt_xs,
+            a.mb_lg,
+            style,
+          ]}>
+          {timeElapsed}
+        </Text>
+      )}
+    </TimeElapsed>
+  )
+}

src/screens/Messages/Conversation/MessagesList.tsx

@@ -3,7 +3,7 @@ import {FlatList, View, ViewToken} from 'react-native'
 import {Alert} from 'react-native'
 import {KeyboardAvoidingView} from 'react-native-keyboard-controller'
 
-import {isWeb} from 'platform/detection'
+import {isWeb} from '#/platform/detection'
 import {MessageInput} from '#/screens/Messages/Conversation/MessageInput'
 import {MessageItem} from '#/screens/Messages/Conversation/MessageItem'
 import {
@@ -15,6 +15,11 @@ import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
 import * as TempDmChatDefs from '#/temp/dm/defs'
 
+type MessageWithNext = {
+  message: TempDmChatDefs.MessageView | TempDmChatDefs.DeletedMessage
+  next: TempDmChatDefs.MessageView | TempDmChatDefs.DeletedMessage | null
+}
+
 function MaybeLoader({isLoading}: {isLoading: boolean}) {
   return (
     <View
@@ -29,12 +34,9 @@ function MaybeLoader({isLoading}: {isLoading: boolean}) {
   )
 }
 
-function renderItem({
-  item,
-}: {
-  item: TempDmChatDefs.MessageView | TempDmChatDefs.DeletedMessage
-}) {
-  if (TempDmChatDefs.isMessageView(item)) return <MessageItem item={item} />
+function renderItem({item}: {item: MessageWithNext}) {
+  if (TempDmChatDefs.isMessageView(item.message))
+    return <MessageItem item={item.message} next={item.next} />
 
   if (TempDmChatDefs.isDeletedMessage(item)) return <Text>Deleted message</Text>
 
@@ -136,18 +138,24 @@ export function MessagesList({chatId}: {chatId: string}) {
   const messages = useMemo(() => {
     if (!chat) return []
 
-    const filtered = chat.messages.filter(
-      (
-        message,
-      ): message is
-        | TempDmChatDefs.MessageView
-        | TempDmChatDefs.DeletedMessage => {
-        return (
-          TempDmChatDefs.isMessageView(message) ||
-          TempDmChatDefs.isDeletedMessage(message)
-        )
-      },
-    )
+    const filtered = chat.messages
+      .filter(
+        (
+          message,
+        ): message is
+          | TempDmChatDefs.MessageView
+          | TempDmChatDefs.DeletedMessage => {
+          return (
+            TempDmChatDefs.isMessageView(message) ||
+            TempDmChatDefs.isDeletedMessage(message)
+          )
+        },
+      )
+      .reduce((acc, message) => {
+        // convert [n1, n2, n3, ...] to [{message: n1, next: n2}, {message: n2, next: n3}, {message: n3, next: n4}, ...]
+
+        return [...acc, {message, next: acc.at(-1)?.message ?? null}]
+      }, [] as MessageWithNext[])
     totalMessages.current = filtered.length
 
     return filtered
@@ -161,7 +169,7 @@ export function MessagesList({chatId}: {chatId: string}) {
       contentContainerStyle={{flex: 1}}>
       <FlatList
         data={messages}
-        keyExtractor={item => item.id}
+        keyExtractor={item => item.message.id}
         renderItem={renderItem}
         contentContainerStyle={{paddingHorizontal: 10}}
         // In the future, we might want to adjust this value. Not very concerning right now as long as we are only

src/screens/Messages/Temp/query/query.ts

@@ -140,6 +140,7 @@ export function useSendMessageMutation(chatId: string) {
               id: variables.tempId,
               text: variables.message,
               sender: {did: headers.Authorization}, // TODO a real DID get
+              sentAt: new Date().toISOString(),
             },
             ...prev.messages,
           ],
@@ -151,12 +152,7 @@ export function useSendMessageMutation(chatId: string) {
         return {
           ...prev,
           messages: prev.messages.map(m =>
-            m.id === variables.tempId
-              ? {
-                  ...m,
-                  id: result.id,
-                }
-              : m,
+            m.id === variables.tempId ? {...m, id: result.id} : m,
           ),
         }
       })

src/view/com/util/TimeElapsed.tsx

@@ -6,17 +6,21 @@ import {ago} from 'lib/strings/time'
 export function TimeElapsed({
   timestamp,
   children,
+  timeToString = ago,
 }: {
   timestamp: string
   children: ({timeElapsed}: {timeElapsed: string}) => JSX.Element
+  timeToString?: (timeElapsed: string) => string
 }) {
   const tick = useTickEveryMinute()
-  const [timeElapsed, setTimeAgo] = React.useState(() => ago(timestamp))
+  const [timeElapsed, setTimeAgo] = React.useState(() =>
+    timeToString(timestamp),
+  )
 
   const [prevTick, setPrevTick] = React.useState(tick)
   if (prevTick !== tick) {
     setPrevTick(tick)
-    setTimeAgo(ago(timestamp))
+    setTimeAgo(timeToString(timestamp))
   }
 
   return children({timeElapsed})