@planningcenter/chat-react-native 4.1.0 → 4.1.1-qa-staging.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "4.1.0",
+  "version": "4.1.1-qa-staging.0",
   "description": "",
   "repository": {
     "type": "git",
@@ -33,7 +33,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^7.2.0",
     "@fortawesome/react-native-fontawesome": "^0.3.2",
-    "@planningcenter/emoji-keyboard": "4.0.0",
+    "@planningcenter/emoji-keyboard": "4.1.1-qa-staging.0",
     "lodash-inflection": "^1.5.0"
   },
   "peerDependencies": {
@@ -84,5 +84,5 @@
     "sf-symbols-typescript": "^2.2.0",
     "typescript": "~6.0.3"
   },
-  "gitHead": "8d36a1469517ca3d7f2b95546e916b7a569c80fe"
+  "gitHead": "13285204c04d26c627cb11013d28df5f834fd6aa"
 }

package/src/__tests__/hooks/use_features.test.ts

@@ -0,0 +1,61 @@
+import { buildTestQueryClient } from '../../__utils__/query_client'
+import type { ApiClient } from '../../hooks/use_api_client'
+import { featuresQueryOptions } from '../../hooks/use_features'
+
+const features = {
+  data: [{ type: 'Feature', id: '1', name: 'ROLLOUT_search', enabled: true }],
+  links: {},
+  meta: { count: 1, totalCount: 1 },
+}
+
+const buildClient = (get: jest.Mock) => ({ chat: { get } }) as unknown as ApiClient
+
+const fetchTwice = async (get: jest.Mock, secondsBetween: number) => {
+  const queryClient = buildTestQueryClient()
+  const options = featuresQueryOptions(buildClient(get))
+
+  await queryClient.fetchQuery(options)
+  jest.advanceTimersByTime(secondsBetween * 1000)
+  await queryClient.fetchQuery(options)
+}
+
+describe('featuresQueryOptions', () => {
+  beforeEach(() => {
+    jest.useFakeTimers()
+  })
+
+  afterEach(() => {
+    jest.useRealTimers()
+  })
+
+  it('keeps successful flags fresh for five minutes', async () => {
+    const get = jest.fn().mockResolvedValue(features)
+
+    await fetchTwice(get, 4 * 60)
+
+    expect(get).toHaveBeenCalledTimes(1)
+  })
+
+  it('refetches right away after a failed fetch', async () => {
+    const get = jest.fn().mockRejectedValue({ status: 503 })
+
+    await fetchTwice(get, 1)
+
+    expect(get).toHaveBeenCalledTimes(2)
+  })
+
+  it('backs off for a minute after a 429', async () => {
+    const get = jest.fn().mockRejectedValue({ status: 429 })
+    const queryClient = buildTestQueryClient()
+    const options = featuresQueryOptions(buildClient(get))
+
+    await queryClient.fetchQuery(options)
+    jest.advanceTimersByTime(30 * 1000)
+    await queryClient.fetchQuery(options)
+    expect(get).toHaveBeenCalledTimes(1)
+
+    jest.advanceTimersByTime(31 * 1000)
+    await queryClient.fetchQuery(options)
+    expect(get).toHaveBeenCalledTimes(2)
+  })
+})

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

@@ -0,0 +1,271 @@
+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',
+      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', 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()