@planningcenter/chat-react-native 3.17.0-rc.1 → 3.17.1-rc.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.17.0-rc.1",
+  "version": "3.17.1-rc.0",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -16,8 +16,10 @@
     "test": "expo-module test",
     "prepublishOnly": "expo-module prepublishOnly"
   },
+  "target": "18",
   "dependencies": {
-    "lodash-inflection": "^1.5.0"
+    "lodash-inflection": "^1.5.0",
+    "react-compiler-runtime": "^1.0.0"
   },
   "peerDependencies": {
     "@planningcenter/datetime-fmt": ">=1.0.0",
@@ -33,7 +35,7 @@
     "lodash": "*",
     "moment": ">=2.0.0",
     "moment-timezone": "*",
-    "react": "*",
+    "react": "^18.0.0 || ^19.0.0",
     "react-native": "*",
     "react-native-device-info": "*",
     "react-native-gesture-handler": "*",
@@ -47,6 +49,7 @@
     "@testing-library/react-hooks": "^8.0.1",
     "@types/jest": "^29.5.14",
     "@typescript-eslint/parser": "^8.32.0",
+    "eslint-plugin-react-compiler": "^19.1.0-rc.2",
     "expo-module-scripts": "^5.0.7",
     "fast-text-encoding": "^1.0.6",
     "jest": "^29.7.0",
@@ -56,5 +59,5 @@
     "react-native-url-polyfill": "^2.0.0",
     "typescript": "<5.6.0"
   },
-  "gitHead": "9cc0a46532ce7bbf7f32bbb5e5873bd5c709b3f0"
+  "gitHead": "06e96f7272163e97af39f8d18ef1ed26096c3741"
 }

package/src/components/conversation/message.tsx

@@ -26,6 +26,7 @@ import { isNewMessage, useMessageCreateOrUpdate } from '../../hooks/use_message_
 import { Haptic } from '../../utils/native_adapters'
 import { TheirReplyConnector, MyReplyConnector, AVATAR_CONNECTOR_SPACING } from './reply_connectors'
 import { pluralize, REPLIES_FEATURE_ENABLED } from '../../utils'
+import { useConversationMessage } from '../../hooks/use_conversation_message'
 
 /** Message
  * Component for display of a message within a conversation list
@@ -59,6 +60,15 @@ export function Message({
   const [messageBubbleHeight, setMessageBubbleHeight] = React.useState(0)
   const { animatedBackgroundColor, handleMessagePressIn, handleMessagePressOut } =
     useAnimatedMessageBackgroundColor()
+  const { message: replyRootMessage } = useConversationMessage({
+    conversation_id,
+    messageId: message.replyRootId || '',
+    enabled: !!message.replyRootId,
+  })
+
+  const replyRootAuthorName = message.replyRootId
+    ? replyRootMessage?.author.name
+    : message.author.name
 
   useEffect(() => {
     if (pending) {
@@ -93,6 +103,7 @@ export function Message({
       conversation_id,
       canDeleteNonAuthoredMessages,
       inReplyScreen,
+      reply_root_author_name: replyRootAuthorName,
     })
   }
   const handleReactionLongPress = (reaction: ReactionCountResource) => {
@@ -120,7 +131,7 @@ export function Message({
     navigation.navigate('ConversationReply', {
       conversation_id,
       reply_root_id: message.id,
-      // TODO: Add a way to pass the reply root author's name
+      reply_root_author_name: message.author.name,
     })
   }
 

package/src/components/conversation/message_form.tsx

@@ -60,6 +60,7 @@ interface MessagesFormRootProps extends ViewProps {
   conversation: ConversationResource
   currentlyEditingMessage?: MessageResource | null
   replyRootId?: string | null
+  replyRootAuthorFirstName?: string | null
 }
 
 const MessageFormContext = React.createContext<{
@@ -74,6 +75,7 @@ const MessageFormContext = React.createContext<{
   currentlyEditingMessage?: MessageResource | null
   reset: () => void
   replyRootId?: string | null
+  replyRootAuthorFirstName?: string | null
 }>({
   text: '',
   setText: (_text: string) => {},
@@ -85,6 +87,7 @@ const MessageFormContext = React.createContext<{
   currentlyEditingMessage: null,
   reset: () => {},
   replyRootId: undefined,
+  replyRootAuthorFirstName: undefined,
 })
 
 const GIPHY_MAX_LENGTH = 50
@@ -95,6 +98,7 @@ function MessageFormRoot({
   currentlyEditingMessage,
   children,
   replyRootId,
+  replyRootAuthorFirstName,
 }: MessagesFormRootProps) {
   const { giphyApiKey } = useContext(ChatContext)
   const canGiphy = !!giphyApiKey && !currentlyEditingMessage
@@ -248,6 +252,7 @@ function MessageFormRoot({
         currentlyEditingMessage,
         reset,
         replyRootId,
+        replyRootAuthorFirstName,
       }}
     >
       <View style={styles.container}>
@@ -559,14 +564,15 @@ function EditingIndicator() {
 }
 
 function ReplyIndicator() {
-  const { replyRootId } = React.useContext(MessageFormContext)
+  const { replyRootId, replyRootAuthorFirstName } = React.useContext(MessageFormContext)
   const navigation = useNavigation()
+  const title = replyRootAuthorFirstName ? `Reply to ${replyRootAuthorFirstName}` : 'Reply'
 
   if (!REPLIES_FEATURE_ENABLED || !replyRootId) return null
 
   return (
     <FormIndicatorRow
-      title="Reply" // TODO: Get root reply author
+      title={title}
       buttonText="Exit replies"
       accessibilityHint="Return to the main conversation"
       iconName="registrations.undo"

package/src/components/conversation/reply_shadow_message.tsx

@@ -76,7 +76,7 @@ function ShadowMessageContent({ conversation_id, ...message }: ShadowMessageCont
     navigation.navigate('ConversationReply', {
       conversation_id,
       reply_root_id: message.replyRootId,
-      // TODO: Add a way to pass the reply root author's name
+      reply_root_author_name: message.author.name,
     })
   }
 

package/src/contexts/api_provider.tsx

@@ -37,7 +37,7 @@ export function ApiProvider({ children }: ViewProps) {
   const { token, env } = useContext(ChatContext)
   const sessionChanged = useSessionChanged({ token, env })
 
-  apiClient = useApiClient()
+  const client = useApiClient()
 
   useEffect(() => {
     if (!sessionChanged) return
@@ -45,6 +45,10 @@ export function ApiProvider({ children }: ViewProps) {
     chatQueryClient.clear()
   }, [sessionChanged])
 
+  useEffect(() => {
+    apiClient = client
+  }, [client])
+
   return (
     <QueryClientProvider client={chatQueryClient}>
       <PrefetchQueries />

package/src/hooks/use_conversation_message.ts

@@ -5,15 +5,20 @@ import { getMessageRequestArgs, getMessageQueryKey } from '../utils/request/get_
 export const useConversationMessage = ({
   conversation_id,
   messageId,
+  enabled,
 }: {
   conversation_id: number
   messageId: string
+  enabled?: boolean
 }) => {
   const {
     data: message,
     isError,
     isLoading,
-  } = useApiGet<MessageResource>(getMessageRequestArgs({ conversation_id, messageId }))
+  } = useApiGet<MessageResource>({
+    ...getMessageRequestArgs({ conversation_id, messageId }),
+    enabled,
+  })
   const queryKey = getMessageQueryKey({ conversation_id, messageId })
 
   return { message, isError, isLoading, queryKey }

package/src/hooks/use_message_draft.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { useAsyncStorage } from './use_async_storage'
 import type { FileAttachment } from '../types/resources/denormalized_attachment_resource_for_create'
 
@@ -27,17 +27,26 @@ export function useMessageDraft(conversationId: number) {
     // Filter expired attachments
     if (storedDraft?.attachments) {
       const now = Date.now()
-      storedDraft.attachments = storedDraft.attachments.filter(attachment => {
+      const validAttachments = storedDraft.attachments.filter(attachment => {
         if (!attachment.uploadedAt) return false
         return now - attachment.uploadedAt < ATTACHMENT_EXPIRY_MS
       })
+
+      return {
+        ...storedDraft,
+        attachments: validAttachments,
+      }
     }
 
     return storedDraft
   })
 
-  // Clean up expired drafts on mount
+  // Clean up expired drafts only once on mount - React 18 recommended pattern
+  const hasCleanedUp = useRef(false)
+
   useEffect(() => {
+    if (hasCleanedUp.current) return
+
     const now = Date.now()
     const validDrafts: Record<string, MessageDraft> = {}
 
@@ -51,8 +60,9 @@ export function useMessageDraft(conversationId: number) {
     if (Object.keys(validDrafts).length !== Object.keys(allDrafts).length) {
       setAllDrafts(validDrafts)
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []) // I only want this to run on mount
+
+    hasCleanedUp.current = true
+  }, [allDrafts, setAllDrafts])
 
   const saveDraft = useCallback(
     (text: string, attachments: FileAttachment[]) => {

package/src/navigation/index.tsx

@@ -187,9 +187,9 @@ export const ChatStack = createNativeStackNavigator({
     },
     ConversationReply: {
       screen: ConversationScreen,
-      options: {
-        title: 'Reply', // TODO: Get root reply author
-      },
+      options: ({ route }) => ({
+        title: (route.params as ConversationRouteProps)?.title ?? 'Reply',
+      }),
     },
     TeamConversation: {
       screen: TeamConversationScreen,

package/src/screens/conversation_screen.tsx

@@ -40,7 +40,7 @@ import { REPLIES_FEATURE_ENABLED } from '../utils'
 export type ConversationRouteProps = {
   conversation_id: number
   reply_root_id?: string | null
-  replyRootAuthor?: string
+  reply_root_author_name?: string
   chat_group_graph_id?: string
   clear_input?: boolean
   editing_message_id?: number | null
@@ -55,7 +55,8 @@ export type ConversationScreenProps = StaticScreenProps<ConversationRouteProps>
 export function ConversationScreen({ route }: ConversationScreenProps) {
   const styles = useStyles()
   const navigation = useNavigation()
-  const { conversation_id, editing_message_id, reply_root_id } = route.params
+  const { conversation_id, editing_message_id, reply_root_id, reply_root_author_name } =
+    route.params
   const { data: conversation } = useConversation(route.params)
   const { messages, refetch, isRefetching, fetchNextPage } = useConversationMessages({
     conversation_id,
@@ -73,6 +74,10 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
   const showLeaderDisabledReplyBanner = canReply && repliesDisabled
   const canDeleteNonAuthoredMessages = memberAbility?.canDeleteNonAuthoredMessages ?? false
   const currentlyEditingMessage = messages.find(m => String(m.id) === String(editing_message_id))
+  const replyRootAuthorFirstName = reply_root_author_name?.split(' ')[0]
+  const replyHeaderTitle = replyRootAuthorFirstName
+    ? `Reply to ${replyRootAuthorFirstName}`
+    : 'Reply'
 
   const listRef = useRef<FlatList>(null)
   const [showJumpToBottomButton, setShowJumpToBottomButton] = useState(false)
@@ -89,14 +94,18 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
   }, [])
 
   useEffect(() => {
-    if (reply_root_id) return
-
-    navigation.setParams({
-      title: title,
-      badge: badges?.[0],
-      deleted: conversation?.deleted,
-    })
-  }, [navigation, title, badges, conversation?.deleted, reply_root_id])
+    if (reply_root_id) {
+      navigation.setParams({
+        title: replyHeaderTitle,
+      })
+    } else {
+      navigation.setParams({
+        title: title,
+        badge: badges?.[0],
+        deleted: conversation?.deleted,
+      })
+    }
+  }, [navigation, title, badges, conversation?.deleted, reply_root_id, replyHeaderTitle])
 
   if (!conversation || conversation.deleted) {
     return (
@@ -167,6 +176,7 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
         {showLeaderDisabledReplyBanner && <LeaderDisabledRepliesBanner />}
         {canReply ? (
           <MessageForm.Root
+            replyRootAuthorFirstName={replyRootAuthorFirstName}
             conversation={conversation}
             replyRootId={reply_root_id}
             currentlyEditingMessage={currentlyEditingMessage}

package/src/screens/message_actions_screen.tsx

@@ -23,13 +23,20 @@ export const MessageActionsScreenOptions = getFormSheetScreenOptions({
 
 export type MessageActionsScreenProps = StaticScreenProps<{
   message_id: string
+  reply_root_author_name?: string
   conversation_id: number
   canDeleteNonAuthoredMessages?: boolean
   inReplyScreen?: boolean
 }>
 
 export function MessageActionsScreen({ route }: MessageActionsScreenProps) {
-  const { conversation_id, message_id, canDeleteNonAuthoredMessages, inReplyScreen } = route.params
+  const {
+    conversation_id,
+    message_id,
+    canDeleteNonAuthoredMessages,
+    inReplyScreen,
+    reply_root_author_name,
+  } = route.params
 
   const { messages, refetch } = useConversationMessages(
     { conversation_id },
@@ -46,6 +53,7 @@ export function MessageActionsScreen({ route }: MessageActionsScreenProps) {
       canDeleteNonAuthoredMessages={canDeleteNonAuthoredMessages || false}
       refetchMessages={refetch}
       inReplyScreen={inReplyScreen}
+      replyRootAuthorName={reply_root_author_name}
     />
   )
 }
@@ -56,12 +64,14 @@ function MessageActionsScreenContent({
   canDeleteNonAuthoredMessages,
   refetchMessages,
   inReplyScreen,
+  replyRootAuthorName,
 }: {
   message: MessageResource
   conversation_id: number
   canDeleteNonAuthoredMessages: boolean
   refetchMessages: () => void
   inReplyScreen?: boolean
+  replyRootAuthorName?: string
 }) {
   const navigation = useNavigation()
   const apiClient = useApiClient()
@@ -95,10 +105,10 @@ function MessageActionsScreenContent({
       navigation.navigate('ConversationReply', {
         conversation_id,
         reply_root_id: message.replyRootId || message.id,
-        // TODO: Update title param with reply root author
+        reply_root_author_name: replyRootAuthorName,
       })
     })
-  }, [navigation, conversation_id, message.id, message.replyRootId])
+  }, [navigation, conversation_id, message.id, message.replyRootId, replyRootAuthorName])
 
   const handleCopyPress = () => {
     Clipboard.setStringAsync(message?.text || attachmentForCopy() || '')