@planningcenter/chat-react-native 3.18.0-rc.9 → 3.19.0-rc.0

package/src/components/conversation/reply_shadow_message.tsx

@@ -25,6 +25,8 @@ import { TheirReplyConnector, MyReplyConnector } from './reply_connectors'
 import { assertKeysAreNumbers, pluralize } from '../../utils'
 import { useNavigation } from '@react-navigation/native'
 import { useConversationMessage } from '../../hooks/use_conversation_message'
+import { useLiveRelativeTime } from '../../hooks/use_live_relative_time'
+import { some } from 'lodash'
 
 interface ReplyShadowMessageProps extends MessageResource {
   messageId: string
@@ -61,10 +63,11 @@ interface ShadowMessageContentProps extends MessageResource {
 }
 
 function ShadowMessageContent({ conversation_id, ...message }: ShadowMessageContentProps) {
-  const { text, deletedAt } = message
+  const { text, deletedAt, author, attachments } = message
   const styles = useStyles(message)
   const { colors } = useTheme()
   const navigation = useNavigation()
+  const timestamp = useLiveRelativeTime(message.createdAt)
 
   const [messageBubbleHeight, setMessageBubbleHeight] = React.useState(0)
   const { animatedBackgroundColor, handleMessagePressIn, handleMessagePressOut } =
@@ -82,12 +85,16 @@ function ShadowMessageContent({ conversation_id, ...message }: ShadowMessageCont
     })
   }
 
+  const attachmentLabel = some(attachments) ? pluralize(attachments.length, 'attachment') : ''
+  const accessibilityLabel = `${author?.name || ''} Reply Preview ${attachmentLabel} ${messageText || ''} ${timestamp} ${replyCountText}`
+
   return (
     <Pressable
       android_ripple={{ color: colors.androidRippleNeutral }}
       onPress={handleNavigateToReplies}
       onPressIn={handleMessagePressIn}
       onPressOut={handleMessagePressOut}
+      accessibilityLabel={accessibilityLabel}
       accessibilityHint="Navigate to reply screen for this message"
       accessibilityRole="link"
     >
@@ -112,7 +119,7 @@ function ShadowMessageContent({ conversation_id, ...message }: ShadowMessageCont
             style={styles.messageBubble}
             onLayout={e => setMessageBubbleHeight(e.nativeEvent.layout.height)}
           >
-            <MessageAttachmentImagery attachments={message.attachments} />
+            <MessageAttachmentImagery attachments={attachments} />
             {text && (
               <Text
                 variant="footnote"

package/src/hooks/use_conversation_messages.ts

@@ -16,7 +16,9 @@ export const useConversationMessages = (
     () =>
       data
         .filter(
-          message => !message.deletedAt && (message.attachments?.length || message.text?.length)
+          message =>
+            (!message.deletedAt || message.replyRootId) &&
+            (message.attachments?.length || message.text?.length)
         )
         .sort((a, b) => -a.id.localeCompare(b.id)),
     [data]

package/src/hooks/use_message_draft.ts

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useAsyncStorage } from './use_async_storage'
 import type { FileAttachment } from '../types/resources/denormalized_attachment_resource_for_create'
+import { useConversationContext } from '../contexts/conversation_context'
 
 interface MessageDraft {
   text: string
@@ -14,8 +15,11 @@ const DRAFT_EXPIRY_MS = DRAFT_EXPIRY_HOURS * 60 * 60 * 1000
 const ATTACHMENT_EXPIRY_HOURS = 48 // 2 days
 const ATTACHMENT_EXPIRY_MS = ATTACHMENT_EXPIRY_HOURS * 60 * 60 * 1000
 
-export function useMessageDraft(conversationId: number) {
-  const conversationKey = conversationId.toString()
+export function useMessageDraft() {
+  const { conversationId, currentPageReplyRootId } = useConversationContext()
+  const conversationKey = currentPageReplyRootId
+    ? `${conversationId}/threads/${currentPageReplyRootId}`
+    : String(conversationId)
   const [allDrafts, setAllDrafts] = useAsyncStorage<Record<string, MessageDraft>>(
     DRAFT_STORAGE_KEY,
     {}

package/src/screens/age_check/age_check_required_screen.tsx

@@ -30,7 +30,7 @@ export function AgeCheckRequiredScreen() {
   const styles = useStyles()
 
   const birthdateStamp = birthdate
-    ? formatDate(birthdate, { style: 'standard', year: true })
+    ? formatDate(birthdate, { style: 'standard', year: true, timeZone: 'UTC' })
     : 'Missing'
 
   const age = birthdate ? calculateAge(birthdate) : null

package/src/screens/age_check/components/age_check_select_birthdate_modal.tsx

@@ -65,6 +65,7 @@ function IOSBirthdateModal({
             </Text>
             <View style={styles.pickerContainer}>
               <DateTimePicker
+                timeZoneName="UTC"
                 accessibilityLabelledBy="birthdateLabel"
                 testID="age-check-date-picker"
                 mode="date"
@@ -101,6 +102,7 @@ function AndroidBirthdatePicker({
 
   return (
     <DateTimePicker
+      timeZoneName="UTC"
       testID="age-check-date-picker-android"
       mode="date"
       display="spinner"

package/src/screens/conversation_screen.tsx

@@ -310,6 +310,24 @@ export const groupMessages = ({
       message.replyRootId &&
       !threadRoot &&
       (prevMessageDifferentThread || prevMessageIsDateSeparator)
+    const lastInGroup =
+      !nextMessage ||
+      nextMessageDifferentAuthor ||
+      nextMessageMoreThan5Minutes ||
+      nextMessageDifferentThread ||
+      nextMessageIsDateSeparator
+    const renderAuthor =
+      !message.mine &&
+      (!prevMessage ||
+        prevMessageDifferentAuthor ||
+        prevMessageMoreThan5Minutes ||
+        prevMessageDifferentThread ||
+        prevMessageIsDateSeparator)
+    const nextIsReplyShadowMessage =
+      repliesEnabled &&
+      nextMessageInThread &&
+      !nextMessageThreadRoot &&
+      (nextMessageDifferentThread || nextMessageIsDateSeparator)
 
     if (message.mine && !encounteredOneOfMyMessages) {
       encounteredOneOfMyMessages = true
@@ -317,17 +335,12 @@ export const groupMessages = ({
     } else {
       message.myLatestInConversation = false
     }
-    message.lastInGroup = !nextMessage || nextMessageDifferentAuthor || nextMessageMoreThan5Minutes
-    message.renderAuthor =
-      !message.mine && (!prevMessage || prevMessageDifferentAuthor || prevMessageMoreThan5Minutes)
+    message.lastInGroup = lastInGroup
+    message.renderAuthor = renderAuthor
     message.threadPosition = null
     message.nextRendersAuthor = nextMessage?.renderAuthor
     message.isReplyShadowMessage = false
-    message.nextIsReplyShadowMessage =
-      repliesEnabled &&
-      nextMessageInThread &&
-      !nextMessageThreadRoot &&
-      (nextMessageDifferentThread || nextMessageIsDateSeparator)
+    message.nextIsReplyShadowMessage = nextIsReplyShadowMessage
 
     if (!inReplyScreen && inThread) {
       message.prevIsMyReply = prevMessage?.mine