@planningcenter/chat-react-native 4.0.1-qa-staging.2 → 4.0.1-rc.1

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

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

@@ -1,119 +0,0 @@
-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_list.tsx

@@ -1,157 +0,0 @@
-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/hooks/__tests__/use_message_create_or_update.test.tsx

@@ -1,110 +0,0 @@
-import { InfiniteData, QueryClientProvider, notifyManager } from '@tanstack/react-query'
-import { act, renderHook } from '@testing-library/react-native'
-import React from 'react'
-import { chatQueryClient } from '../../contexts/api_provider'
-import type { ApiCollection, MessageResource } from '../../types'
-import { getMessagesQueryKey } from '../../utils/request/get_messages'
-import { useMessageCreateOrUpdate } from '../use_message_create_or_update'
-
-jest.mock('../../contexts/api_provider', () => {
-  const { QueryClient } = require('@tanstack/react-query')
-  // gcTime 0 so nothing outlives the test and keeps jest from exiting
-  return {
-    chatQueryClient: new QueryClient({
-      defaultOptions: { queries: { gcTime: 0 }, mutations: { gcTime: 0 } },
-    }),
-  }
-})
-
-const mockPost = jest.fn()
-jest.mock('../use_api_client', () => ({
-  useApiClient: () => ({ chat: { post: mockPost, patch: jest.fn() } }),
-}))
-
-jest.mock('../use_current_person', () => ({
-  useCurrentPerson: () => ({ type: 'Person', id: 1, name: 'Me', avatar: null }),
-}))
-
-// Flush TanStack's batched state updates inside act, as its own tests do
-notifyManager.setNotifyFunction(fn => act(fn))
-
-type MessagesQueryData = InfiniteData<ApiCollection<MessageResource>>
-
-const conversationId = 7
-const queryKey = getMessagesQueryKey({ conversation_id: conversationId })
-
-const wrapper = ({ children }: { children: React.ReactNode }) => (
-  <QueryClientProvider client={chatQueryClient}>{children}</QueryClientProvider>
-)
-
-const pendingMessagesInCache = () =>
-  (chatQueryClient.getQueryData<MessagesQueryData>(queryKey)?.pages[0].data ?? []).filter(
-    m => m.pending
-  )
-
-const sentKey = (call: number): string =>
-  mockPost.mock.calls[call][0].data.data.attributes.idempotent_key
-
-// What the cache held when each request went out, i.e. after onMutate ran
-let pendingAtSend: MessageResource[][]
-
-describe('useMessageCreateOrUpdate idempotent key', () => {
-  beforeEach(() => {
-    chatQueryClient.clear()
-    chatQueryClient.setQueryData<MessagesQueryData>(queryKey, {
-      pages: [{ data: [], links: {}, meta: { count: 0, totalCount: 0 } }],
-      pageParams: [],
-    })
-    pendingAtSend = []
-    mockPost.mockReset()
-    mockPost.mockImplementation(async request => {
-      pendingAtSend.push(pendingMessagesInCache())
-      const key = request.data.data.attributes.idempotent_key
-      return { data: { type: 'Message', id: `real-${key}`, idempotentKey: key, mine: true } }
-    })
-  })
-
-  it('gives the optimistic message the same key that is sent to the server', async () => {
-    const { result } = renderHook(() => useMessageCreateOrUpdate({ conversationId }), { wrapper })
-
-    await act(() => result.current.mutateAsync({ text: 'ok' }))
-
-    expect(sentKey(0)).toEqual(expect.any(String))
-    expect(pendingAtSend[0].map(m => m.idempotentKey)).toEqual([sentKey(0)])
-  })
-
-  it('mints a distinct key for each send, even with identical text', async () => {
-    const { result } = renderHook(() => useMessageCreateOrUpdate({ conversationId }), { wrapper })
-
-    await act(() =>
-      Promise.all([
-        result.current.mutateAsync({ text: 'ok' }),
-        result.current.mutateAsync({ text: 'ok' }),
-      ])
-    )
-
-    expect(sentKey(0)).not.toBe(sentKey(1))
-    expect(pendingAtSend[1].map(m => m.idempotentKey).sort()).toEqual(
-      [sentKey(0), sentKey(1)].sort()
-    )
-  })
-
-  it('reuses the original key when retrying a failed send', async () => {
-    const failed = {
-      type: 'Message',
-      id: '01FAILED-temp',
-      text: 'ok',
-      idempotentKey: 'original-key',
-      error: 'Failed to send message',
-    } as MessageResource
-    const { result } = renderHook(
-      () => useMessageCreateOrUpdate({ conversationId, message: failed }),
-      { wrapper }
-    )
-
-    await act(() => result.current.mutateAsync({ text: 'ok' }))
-
-    expect(sentKey(0)).toBe('original-key')
-    expect(pendingAtSend[0].map(m => m.idempotentKey)).toEqual(['original-key'])
-  })
-})