@planningcenter/chat-react-native 4.2.0-rc.0 → 4.2.0-rc.2

package/src/components/conversation/__tests__/message_list.test.tsx

@@ -0,0 +1,277 @@
+import { DefaultTheme, ThemeProvider } from '@react-navigation/native'
+import {
+  InfiniteData,
+  notifyManager,
+  QueryClient,
+  QueryClientProvider,
+} from '@tanstack/react-query'
+import { act, render, screen } from '@testing-library/react-native'
+import React from 'react'
+import { FlatList } from 'react-native'
+import { buildTestQueryClient } from '../../../__utils__/query_client'
+import { ChatProvider } from '../../../contexts/chat_context'
+import { ApiClient, useApiClient } from '../../../hooks/use_api_client'
+import { useConversationMessages } from '../../../hooks/use_conversation_messages'
+import { currentPersonQueryKey } from '../../../hooks/use_current_person'
+import { useLiveRelativeTime } from '../../../hooks/use_live_relative_time'
+import type { ApiCollection } from '../../../types'
+import type { JoltReactionEvent } from '../../../types/jolt_events'
+import type { ConversationResource } from '../../../types/resources/conversation'
+import type { MessageResource } from '../../../types/resources/message'
+import type { PersonResource } from '../../../types/resources/person'
+import {
+  updateCacheWithMessage,
+  updateCacheWithReaction,
+} from '../../../utils/cache/messages_cache'
+import { addRecordInPagesData, deleteRecordInPagesData } from '../../../utils/cache/page_mutations'
+import { getMessagesQueryKey } from '../../../utils/request/get_messages'
+import { MessageList } from '../message_list'
+
+jest.mock('../../../hooks/use_api_client')
+jest.mock('@react-navigation/native', () => ({
+  ...jest.requireActual('@react-navigation/native'),
+  useNavigation: () => ({ navigate: jest.fn() }),
+}))
+// Every row calls this hook on each render, so its calls count row renders.
+jest.mock('../../../hooks/use_live_relative_time', () => {
+  const actual = jest.requireActual('../../../hooks/use_live_relative_time')
+  return { useLiveRelativeTime: jest.fn(actual.useLiveRelativeTime) }
+})
+
+const CONVERSATION_ID = 1
+const ME = 99
+const OTHER = 7
+const messagesQueryKey = getMessagesQueryKey({ conversation_id: CONVERSATION_ID })
+const renderSpy = useLiveRelativeTime as jest.MockedFunction<typeof useLiveRelativeTime>
+type MessagesQueryData = InfiniteData<ApiCollection<MessageResource>>
+
+const author = { id: OTHER, type: 'Person', name: 'Ann', avatar: null } as unknown as PersonResource
+const me = { id: ME, type: 'Person', name: 'Me', avatar: null } as unknown as PersonResource
+
+const messageId = (n: number) => `01J${String(n).padStart(23, '0')}`
+
+const idByCreatedAt = new Map<string, string>()
+
+// Dated well in the past so useLiveRelativeTime schedules no timers.
+const buildMessage = (n: number, overrides: Partial<MessageResource> = {}): MessageResource => {
+  const message: MessageResource = {
+    type: 'Message',
+    id: messageId(n),
+    text: `message ${n}`,
+    html: '',
+    createdAt: new Date(Date.UTC(2026, 0, 1, 0, n)).toISOString(),
+    deletedAt: null,
+    textEditedAt: null,
+    mine: false,
+    attachments: [],
+    author,
+    reactionCounts: [],
+    replyCount: 0,
+    replyRootId: null,
+    messageType: 'message',
+    ...overrides,
+  }
+  idByCreatedAt.set(message.createdAt, message.id)
+  return message
+}
+
+const messages = Array.from({ length: 8 }, (_, i) => buildMessage(i + 1))
+
+const conversation = {
+  id: CONVERSATION_ID,
+  memberAbility: { canDeleteNonAuthoredMessages: false },
+} as unknown as ConversationResource
+
+const reactionEvent = (message: MessageResource): JoltReactionEvent =>
+  ({
+    event: 'reaction.created',
+    data: {
+      data: {
+        author_id: OTHER,
+        conversation_id: CONVERSATION_ID,
+        message_sort_key: message.id,
+        message_author_id: OTHER,
+        reply_root_id: null,
+        created_at: '2026-01-02T00:00:00Z',
+        organization_id: 1,
+        value: 'heart',
+        count: 1,
+      },
+    },
+  }) as unknown as JoltReactionEvent
+
+let queryClient: QueryClient
+
+// A top-level rerender would rebuild the wrapper context and redraw every row.
+let setHarnessConversation: (next: ConversationResource) => void = () => {}
+
+function Harness() {
+  const [current, setCurrent] = React.useState(conversation)
+  React.useEffect(() => {
+    setHarnessConversation = setCurrent
+  }, [])
+  const { messages: loaded } = useConversationMessages({ conversation_id: CONVERSATION_ID })
+  return (
+    <MessageList
+      listRef={React.createRef<FlatList>()}
+      conversation={current}
+      conversationId={CONVERSATION_ID}
+      messages={loaded}
+      hasNextPage
+      onEndReached={() => {}}
+    />
+  )
+}
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => (
+  <QueryClientProvider client={queryClient}>
+    <ChatProvider
+      value={{
+        token: {
+          access_token: 'token',
+          created_at: 0,
+          expires_in: 0,
+          scope: '',
+          refresh_token: '',
+          token_type: '',
+        },
+        onUnauthorizedResponse: () => {},
+        theme: {},
+      }}
+    >
+      <ThemeProvider value={DefaultTheme}>
+        <React.Suspense fallback={null}>{children}</React.Suspense>
+      </ThemeProvider>
+    </ChatProvider>
+  </QueryClientProvider>
+)
+
+const renderedRowIds = () => {
+  const ids = renderSpy.mock.calls.map(([date]) => idByCreatedAt.get(date as string) ?? date)
+  return Array.from(new Set(ids)).sort()
+}
+
+const renderList = (seed: MessageResource[] = messages) => {
+  queryClient.setQueryData<MessagesQueryData>(messagesQueryKey, {
+    pages: [{ data: seed, links: {}, meta: { count: seed.length, totalCount: seed.length } }],
+    pageParams: [{}],
+  })
+  render(<Harness />, { wrapper: Wrapper })
+  seed.forEach(m => screen.getByTestId(`message-${m.id}`))
+  renderSpy.mockClear()
+}
+
+// TanStack notifies observers on a setTimeout; deliver inline so one write is one act().
+beforeAll(() => notifyManager.setScheduler(callback => callback()))
+afterAll(() => notifyManager.setScheduler(callback => setTimeout(callback, 0)))
+
+beforeEach(() => {
+  queryClient = buildTestQueryClient({ defaultOptions: { queries: { staleTime: Infinity } } })
+  queryClient.setQueryData(currentPersonQueryKey, { data: me, links: {}, meta: {} })
+  ;(useApiClient as jest.MockedFunction<typeof useApiClient>).mockReturnValue({
+    chat: { get: jest.fn().mockRejectedValue(new Error('unexpected fetch')) },
+  } as unknown as ApiClient)
+})
+
+afterEach(() => {
+  queryClient.clear()
+  jest.clearAllMocks()
+})
+
+describe('MessageList', () => {
+  it('redraws only the reacted row when a reaction arrives', () => {
+    renderList()
+    const target = messages[3]
+
+    act(() => updateCacheWithReaction(queryClient, messagesQueryKey, reactionEvent(target), ME))
+
+    expect(screen.getByTestId(`reaction-${target.id}-heart`)).toBeTruthy()
+    expect(renderedRowIds()).toEqual([target.id])
+  })
+
+  it('redraws only the edited row and shows the new text', () => {
+    renderList()
+    const target = messages[5]
+
+    act(() =>
+      updateCacheWithMessage(
+        queryClient,
+        messagesQueryKey,
+        { ...target, text: 'edited text', textEditedAt: '2026-01-02T00:00:00Z' },
+        'message.updated'
+      )
+    )
+
+    expect(screen.getByText('edited text')).toBeTruthy()
+    expect(renderedRowIds()).toEqual([target.id])
+  })
+
+  it('draws a new message plus the neighbor whose grouping changed', () => {
+    renderList()
+    const incoming = buildMessage(9)
+    const previousNewest = messages[7]
+
+    act(() => updateCacheWithMessage(queryClient, messagesQueryKey, incoming, 'message.created'))
+
+    expect(screen.getByTestId(`message-${incoming.id}`)).toBeTruthy()
+    expect(renderedRowIds()).toEqual([previousNewest.id, incoming.id].sort())
+  })
+
+  it('swaps a pending message for its echo without touching other rows', () => {
+    renderList()
+    const pending = buildMessage(50, {
+      id: `${messageId(50)}-temp`,
+      text: 'hello there',
+      idempotentKey: 'key-50',
+      mine: true,
+      author: me,
+      pending: true,
+    })
+
+    act(() =>
+      queryClient.setQueryData<MessagesQueryData>(messagesQueryKey, prev =>
+        addRecordInPagesData({ data: prev, record: pending })
+      )
+    )
+    expect(screen.getByTestId(`message-${pending.id}`)).toBeTruthy()
+    renderSpy.mockClear()
+
+    const echo = buildMessage(50, {
+      text: 'hello there',
+      idempotentKey: 'key-50',
+      mine: true,
+      author: me,
+    })
+    act(() => updateCacheWithMessage(queryClient, messagesQueryKey, echo, 'message.created'))
+
+    expect(screen.queryByTestId(`message-${pending.id}`)).toBeNull()
+    expect(screen.getByTestId(`message-${echo.id}`)).toBeTruthy()
+    expect(renderedRowIds()).toEqual([echo.id])
+  })
+
+  it('redraws only my messages whose read state changed when someone reads', () => {
+    const mine = (n: number) => buildMessage(n, { mine: true, author: me })
+    const seed = [mine(1), buildMessage(2), mine(3), buildMessage(4), mine(5), buildMessage(6)]
+    renderList(seed)
+    expect(screen.getByText('Sent')).toBeTruthy()
+
+    act(() => setHarnessConversation({ ...conversation, latestReadMessageSortKey: messageId(6) }))
+
+    expect(screen.getByText('Read')).toBeTruthy()
+    expect(renderedRowIds()).toEqual([messageId(1), messageId(3), messageId(5)].sort())
+  })
+
+  it('removes a deleted row and leaves the others alone', () => {
+    renderList()
+    const target = messages[2]
+
+    act(() =>
+      queryClient.setQueryData<MessagesQueryData>(messagesQueryKey, prev =>
+        deleteRecordInPagesData({ data: prev, record: target })
+      )
+    )
+
+    expect(screen.queryByTestId(`message-${target.id}`)).toBeNull()
+    expect(renderedRowIds()).toEqual([])
+  })
+})

package/src/components/conversation/__tests__/reply_shadow_message.test.tsx

@@ -0,0 +1,119 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { render } from '@testing-library/react-native'
+import React from 'react'
+import { buildTestQueryClient } from '../../../__utils__/query_client'
+import { ChatProvider } from '../../../contexts/chat_context'
+import { useConversationMessage } from '../../../hooks/use_conversation_message'
+import type { MessageResource } from '../../../types/resources/message'
+import type { PersonResource } from '../../../types/resources/person'
+import { ReplyShadowMessage } from '../reply_shadow_message'
+
+jest.mock('../../../hooks/use_conversation_message')
+jest.mock('@react-navigation/native', () => ({
+  useNavigation: () => ({ navigate: jest.fn() }),
+}))
+
+const mockedUseConversationMessage = useConversationMessage as jest.MockedFunction<
+  typeof useConversationMessage
+>
+
+const author = { id: 1, type: 'Person', name: 'A', avatar: null } as unknown as PersonResource
+
+const root = (text: string): MessageResource =>
+  ({
+    type: 'Message',
+    id: 'rootA',
+    text,
+    html: '',
+    createdAt: '2026-01-01T00:00:00Z',
+    deletedAt: null,
+    textEditedAt: null,
+    mine: false,
+    attachments: [],
+    author,
+    reactionCounts: [],
+    replyCount: 1,
+    replyRootId: 'rootA',
+    messageType: 'message',
+  }) as MessageResource
+
+let queryClient: QueryClient
+
+const hookResult = (overrides: { message?: MessageResource; isError?: boolean }) =>
+  ({ message: undefined, isError: false, isLoading: false, ...overrides }) as ReturnType<
+    typeof useConversationMessage
+  >
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => (
+  <QueryClientProvider client={queryClient}>
+    <ChatProvider
+      value={{
+        token: {
+          access_token: '',
+          created_at: 0,
+          expires_in: 0,
+          scope: '',
+          refresh_token: '',
+          token_type: '',
+        },
+        onUnauthorizedResponse: () => {},
+        theme: { theme: { colors: { interaction: 'rgb(0, 0, 255)' } } },
+      }}
+    >
+      {children}
+    </ChatProvider>
+  </QueryClientProvider>
+)
+
+const renderShadow = (replyRoot: MessageResource | null) =>
+  render(
+    <ReplyShadowMessage
+      {...({} as MessageResource)}
+      conversation_id={1}
+      messageId="rootA"
+      replyRoot={replyRoot}
+      isReplyShadowMessage
+      nextRendersAuthor={false}
+    />,
+    { wrapper: Wrapper }
+  )
+
+beforeEach(() => {
+  queryClient = buildTestQueryClient()
+  mockedUseConversationMessage.mockReturnValue(hookResult({}))
+})
+
+afterEach(() => {
+  queryClient.clear()
+  jest.clearAllMocks()
+})
+
+describe('ReplyShadowMessage', () => {
+  it('renders the inline root without enabling the root fetch', () => {
+    const view = renderShadow(root('inline root'))
+
+    expect(view.getByText('inline root')).toBeTruthy()
+    expect(mockedUseConversationMessage).toHaveBeenCalledWith(
+      expect.objectContaining({ enabled: false })
+    )
+  })
+
+  it('falls back to fetching the root when none is inline', () => {
+    mockedUseConversationMessage.mockReturnValue(hookResult({ message: root('fetched root') }))
+
+    const view = renderShadow(null)
+
+    expect(view.getByText('fetched root')).toBeTruthy()
+    expect(mockedUseConversationMessage).toHaveBeenCalledWith(
+      expect.objectContaining({ messageId: 'rootA', enabled: true })
+    )
+  })
+
+  it('shows the deleted placeholder when the fallback fetch finds nothing', () => {
+    mockedUseConversationMessage.mockReturnValue(hookResult({ isError: true }))
+
+    const view = renderShadow(null)
+
+    expect(view.getByText('Message deleted')).toBeTruthy()
+  })
+})

package/src/components/conversation/message.tsx

@@ -1,6 +1,6 @@
 import { useNavigation } from '@react-navigation/native'
 import { some } from 'lodash'
-import React, { useEffect } from 'react'
+import React, { memo, useEffect } from 'react'
 import {
   AccessibilityActionEvent,
   Pressable,
@@ -44,14 +44,14 @@ import { TheirReplyConnector, MyReplyConnector, AVATAR_CONNECTOR_SPACING } from
 interface MessageProps extends MessageResource {
   canDeleteNonAuthoredMessages: boolean
   conversation_id: number
-  latestReadMessageSortKey?: string
+  readByOthers?: boolean
   inReplyScreen?: boolean
 }
 
-export function Message({
+export const Message = memo(function MessageRow({
   canDeleteNonAuthoredMessages,
   conversation_id,
-  latestReadMessageSortKey,
+  readByOthers,
   inReplyScreen,
   ...message
 }: MessageProps) {
@@ -73,11 +73,16 @@ export function Message({
   const [messageBubbleHeight, setMessageBubbleHeight] = React.useState(0)
   const { animatedBackgroundColor, handleMessagePressIn, handleMessagePressOut } =
     useAnimatedMessageBackgroundColor()
-  const { message: replyRootMessage } = useConversationMessage({
+  const isReplyRootMessage = message.replyRootId === message.id
+  const isDeletedReplyRootMessage = isReplyRootMessage && !!message.deletedAt
+  const showReadReceipts = message.mine && !pending && !error
+  const replyToReplyRootMessage = !isReplyRootMessage && !!message.replyRootId
+  const { message: fetchedReplyRoot } = useConversationMessage({
     conversation_id,
     messageId: message.replyRootId || '',
-    enabled: !!message.replyRootId,
+    enabled: replyToReplyRootMessage && !message.replyRoot,
   })
+  const replyRoot = message.replyRoot ?? fetchedReplyRoot
 
   const metaProps = {
     authorName: author.name,
@@ -85,14 +90,11 @@ export function Message({
   }
 
   const renderAuthor = (!message.mine && message.renderAuthor) || false
-  const showReplyCountButton = !inReplyScreen && message.replyRootId === message.id
-  const isReplyRootMessage = message.replyRootId === message.id
-  const isDeletedReplyRootMessage = isReplyRootMessage && !!message.deletedAt
-  const replyToReplyRootMessage = !isReplyRootMessage && !!message.replyRootId
+  const showReplyCountButton = !inReplyScreen && isReplyRootMessage
 
   const replyCountText = pluralize(message.replyCount, 'reply')
   const messagePendingLabel = isPersisted ? 'Saving' : 'Sending'
-  const replyRootAuthorName = message.replyRootId ? replyRootMessage?.author.name : author.name
+  const replyRootAuthorName = replyToReplyRootMessage ? replyRoot?.author.name : author.name
   const messageText = isDeletedReplyRootMessage ? 'Message deleted' : text
 
   const messageBottomMargin =
@@ -289,12 +291,7 @@ export function Message({
           )}
           {showMessageMeta && !isDeletedReplyRootMessage && (
             <View style={styles.messageMeta}>
-              {message.mine && !pending && !error && (
-                <MessageReadReceipts
-                  message={message}
-                  latestReadMessageSortKey={latestReadMessageSortKey}
-                />
-              )}
+              {showReadReceipts && <MessageReadReceipts read={readByOthers} />}
               {error ? (
                 <View style={styles.errorContainer}>
                   {retryFailedSaveMutation.isPending ? (
@@ -343,7 +340,7 @@ export function Message({
       </Animated.View>
     </Pressable>
   )
-}
+})
 
 const useMessageStyles = (mine: boolean, isDeleting: boolean) => {
   const { colors } = useTheme()

package/src/components/conversation/message_list.tsx

@@ -0,0 +1,157 @@
+import { date as formatDate } from '@planningcenter/datetime-fmt'
+import React, { RefObject } from 'react'
+import { FlatList, FlatListProps, StyleSheet, View } from 'react-native'
+import { useTheme } from '../../hooks'
+import { ConversationResource } from '../../types/resources/conversation'
+import { MessageResource } from '../../types/resources/message'
+import { getRelativeDateStatus } from '../../utils/date'
+import { groupMessages, type DateSeparator, type EnrichedMessage } from '../../utils/group_messages'
+import { CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL } from '../../utils/styles'
+import { isSystemMessage } from '../../utils/system_messages'
+import { Text } from '../display'
+import { ConversationStartBanner } from './conversation_start_banner'
+import { Message } from './message'
+import { ReplyShadowMessage } from './reply_shadow_message'
+import { SystemMessage } from './system_message'
+
+type ScrollHandlers = Pick<
+  FlatListProps<EnrichedMessage>,
+  'onScroll' | 'onLayout' | 'onContentSizeChange' | 'onScrollEndDrag' | 'onMomentumScrollEnd'
+>
+
+interface MessageListProps extends ScrollHandlers {
+  listRef: RefObject<FlatList | null>
+  conversation: ConversationResource
+  conversationId: number
+  messages: MessageResource[]
+  replyRootId?: string | null
+  hasNextPage: boolean
+  onEndReached: () => void
+}
+
+/** MessageList
+ * The inverted list of messages, reply previews, and date separators for a conversation
+ */
+export function MessageList({
+  listRef,
+  conversation,
+  conversationId,
+  messages,
+  replyRootId,
+  hasNextPage,
+  onEndReached,
+  onScroll,
+  onLayout,
+  onContentSizeChange,
+  onScrollEndDrag,
+  onMomentumScrollEnd,
+}: MessageListProps) {
+  const styles = useStyles()
+  const inReplyScreen = !!replyRootId
+  const canDeleteNonAuthoredMessages =
+    conversation.memberAbility?.canDeleteNonAuthoredMessages ?? false
+  const latestRead = conversation.latestReadMessageSortKey
+  const messagesWithSeparators = groupMessages({ ms: messages, inReplyScreen })
+
+  return (
+    <FlatList
+      inverted
+      ref={listRef}
+      contentContainerStyle={styles.listContainer}
+      data={messagesWithSeparators}
+      keyExtractor={item => item.id}
+      onScroll={onScroll}
+      onLayout={onLayout}
+      onContentSizeChange={onContentSizeChange}
+      onScrollEndDrag={onScrollEndDrag}
+      onMomentumScrollEnd={onMomentumScrollEnd}
+      scrollEventThrottle={10}
+      ListFooterComponent={
+        hasNextPage ? null : (
+          <ConversationStartBanner conversation={conversation} hasMessages={true} />
+        )
+      }
+      renderItem={({ item }) => {
+        if (item.type === 'DateSeparator') {
+          return <InlineDateSeparator {...item} />
+        }
+
+        if (item.type === 'ReplyShadowMessage') {
+          return (
+            <ReplyShadowMessage
+              {...(item as any)}
+              conversation_id={conversationId}
+              inReplyScreen={inReplyScreen}
+            />
+          )
+        }
+
+        if (isSystemMessage(item)) {
+          return <SystemMessage message={item} conversationId={conversationId} />
+        }
+
+        const readByOthers = item.mine && !!latestRead && item.id <= latestRead
+        return (
+          <Message
+            {...item}
+            canDeleteNonAuthoredMessages={canDeleteNonAuthoredMessages}
+            conversation_id={conversationId}
+            readByOthers={readByOthers}
+            inReplyScreen={inReplyScreen}
+          />
+        )
+      }}
+      onEndReached={onEndReached}
+      ListHeaderComponent={<View style={styles.listHeader} />}
+    />
+  )
+}
+
+function InlineDateSeparator({ date }: DateSeparator) {
+  const styles = useDateSeparatorStyles()
+  const { isThisYear } = getRelativeDateStatus(date)
+  const showYear = !isThisYear
+  const dateStamp = formatDate(date, { style: 'long', year: showYear })
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.separator} />
+      <Text variant="footnote" style={styles.dateText}>
+        {dateStamp}
+      </Text>
+      <View style={styles.separator} />
+    </View>
+  )
+}
+
+const useDateSeparatorStyles = () => {
+  const theme = useTheme()
+  return StyleSheet.create({
+    container: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      paddingHorizontal: CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,
+      paddingVertical: 16,
+    },
+    separator: {
+      flex: 1,
+      height: 1,
+      borderTopWidth: 1,
+      borderTopColor: theme.colors.borderColorDefaultBase,
+    },
+    dateText: {
+      paddingHorizontal: 8,
+    },
+  })
+}
+
+const useStyles = () =>
+  StyleSheet.create({
+    listContainer: {
+      paddingVertical: 12,
+    },
+    listHeader: {
+      // Just whitespace to provide space where the typing indicator can be
+      height: 16,
+    },
+  })

package/src/components/conversation/message_read_receipts.tsx

@@ -1,17 +1,15 @@
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
 import { useTheme } from '../../hooks'
-import { MessageResource } from '../../types'
 import { Icon, Text } from '../display'
 
 interface Props {
-  message: MessageResource
-  latestReadMessageSortKey?: string
+  read?: boolean
 }
 
-export function MessageReadReceipts({ message, latestReadMessageSortKey }: Props) {
+export function MessageReadReceipts({ read }: Props) {
   const styles = useStyles()
-  if (!latestReadMessageSortKey || message.id > latestReadMessageSortKey) {
+  if (!read) {
     return (
       <View style={styles.badgeContainer}>
         <Icon name="general.check" style={styles.icon} />