@planningcenter/chat-react-native 4.3.0-rc.9 → 4.3.1-rc.0

package/src/screens/search/components/__tests__/conversation_results.test.tsx

@@ -0,0 +1,55 @@
+import { fireEvent, render } from '@testing-library/react-native'
+import React from 'react'
+import type { ConversationSearchResultResource } from '../../../../types'
+import { ConversationResults } from '../conversation_results'
+
+const buildResults = (count: number, prefix = 'Conversation') =>
+  Array.from({ length: count }, (_, index) => ({
+    type: 'conversation' as const,
+    id: `${prefix}-${index + 1}`,
+    title: `${prefix} ${index + 1}`,
+    url: `/conversations/${index + 1}`,
+    extra: { avatar: { previewAvatarUrls: [] } },
+  })) satisfies ConversationSearchResultResource[]
+
+describe('ConversationResults', () => {
+  it('caps at five rows until View more is pressed, then offers View less', () => {
+    const view = render(<ConversationResults results={buildResults(6)} onSelect={jest.fn()} />)
+
+    expect(view.getByText('Conversation 5')).toBeTruthy()
+    expect(view.queryByText('Conversation 6')).toBeNull()
+
+    fireEvent.press(view.getByText('View more'))
+
+    expect(view.getByText('Conversation 6')).toBeTruthy()
+    expect(view.getByText('View less')).toBeTruthy()
+    expect(view.queryByText('View more')).toBeNull()
+  })
+
+  it('renders no footer for five or fewer results', () => {
+    const view = render(<ConversationResults results={buildResults(4)} onSelect={jest.fn()} />)
+
+    expect(view.getByText('Conversation 4')).toBeTruthy()
+    expect(view.queryByText('View more')).toBeNull()
+  })
+
+  it('stays expanded when the parent re-renders with a new results array', () => {
+    const view = render(<ConversationResults results={buildResults(6)} onSelect={jest.fn()} />)
+    fireEvent.press(view.getByText('View more'))
+
+    view.rerender(<ConversationResults results={buildResults(6)} onSelect={jest.fn()} />)
+
+    expect(view.getByText('Conversation 6')).toBeTruthy()
+    expect(view.getByText('View less')).toBeTruthy()
+  })
+
+  it('passes the pressed result to onSelect', () => {
+    const onSelect = jest.fn()
+    const results = buildResults(2)
+    const view = render(<ConversationResults results={results} onSelect={onSelect} />)
+
+    fireEvent.press(view.getByText('Conversation 2'))
+
+    expect(onSelect).toHaveBeenCalledWith(results[1])
+  })
+})

package/src/screens/search/components/__tests__/message_result_row.test.tsx

@@ -0,0 +1,65 @@
+import { fireEvent, render } from '@testing-library/react-native'
+import React from 'react'
+import type { MessageSearchResultResource } from '../../../../types/resources/search_result'
+import { formatDatePreview } from '../../../../utils/date'
+import { defaultTheme } from '../../../../utils/theme'
+import { MessageResultRow } from '../message_result_row'
+
+const result: MessageSearchResultResource = {
+  id: '42',
+  type: 'message',
+  title: 'Worship Team',
+  url: '/conversations/7?message_id=42',
+  extra: {
+    conversationId: 7,
+    authorName: 'Ada Lovelace',
+    snippet: [
+      { text: '…planning the ', match: false },
+      { text: 'budget', match: true },
+      { text: ' meeting for next week', match: false },
+    ],
+    createdAt: '2026-03-04T15:30:00Z',
+    avatar: {
+      customAvatarType: null,
+      customAvatarKey: null,
+      customAvatarColor: null,
+      customAvatarImageUrl: null,
+      previewAvatarUrls: [],
+    },
+  },
+}
+
+const interactionColor = defaultTheme('light').colors.interaction
+
+describe('MessageResultRow', () => {
+  it('renders the title, author, snippet, and date', () => {
+    const view = render(<MessageResultRow result={result} onPress={jest.fn()} />)
+
+    expect(view.getByText('Worship Team')).toBeTruthy()
+    expect(view.getByText('Ada Lovelace:', { exact: false })).toBeTruthy()
+    expect(view.getByText('…planning the ')).toBeTruthy()
+    expect(view.getByText('budget')).toBeTruthy()
+    expect(view.getByText(' meeting for next week')).toBeTruthy()
+    expect(view.getByText(formatDatePreview(result.extra.createdAt))).toBeTruthy()
+  })
+
+  it('colors matched segments with the interaction color', () => {
+    const view = render(<MessageResultRow result={result} onPress={jest.fn()} />)
+
+    expect(view.getByText('budget')).toHaveStyle({ color: interactionColor })
+    expect(view.getByText('…planning the ')).not.toHaveStyle({ color: interactionColor })
+  })
+
+  it('exposes the row as a button with a composed label and reports presses', () => {
+    const onPress = jest.fn()
+    const date = formatDatePreview(result.extra.createdAt)
+    const view = render(<MessageResultRow result={result} onPress={onPress} />)
+
+    const row = view.getByRole('button', {
+      name: `Worship Team, Ada Lovelace: …planning the budget meeting for next week, ${date}`,
+    })
+    fireEvent.press(row)
+
+    expect(onPress).toHaveBeenCalledWith(result)
+  })
+})

package/src/screens/search/components/__tests__/result_row.test.tsx

@@ -0,0 +1,33 @@
+import { render } from '@testing-library/react-native'
+import React from 'react'
+import { Text } from 'react-native'
+import { useAtFontScaleBreakpoint } from '../../../../hooks/use_at_font_scale_breakpoint'
+import { ResultRow } from '../result_row'
+
+jest.mock('../../../../hooks/use_at_font_scale_breakpoint')
+
+const mockUseAtFontScaleBreakpoint = jest.mocked(useAtFontScaleBreakpoint)
+
+describe('ResultRow', () => {
+  it('lays children out in a row below the font scale breakpoint', () => {
+    mockUseAtFontScaleBreakpoint.mockReturnValue(false)
+    const view = render(
+      <ResultRow accessibilityLabel="Row" onPress={jest.fn()} alignItems="center">
+        <Text>child</Text>
+      </ResultRow>
+    )
+
+    expect(view.getByRole('button')).toHaveStyle({ flexDirection: 'row', alignItems: 'center' })
+  })
+
+  it('stacks children at the font scale breakpoint', () => {
+    mockUseAtFontScaleBreakpoint.mockReturnValue(true)
+    const view = render(
+      <ResultRow accessibilityLabel="Row" onPress={jest.fn()} alignItems="center">
+        <Text>child</Text>
+      </ResultRow>
+    )
+
+    expect(view.getByRole('button')).toHaveStyle({ flexDirection: 'column', alignItems: 'stretch' })
+  })
+})

package/src/screens/search/components/__tests__/search_results_list.test.tsx

@@ -0,0 +1,135 @@
+import { fireEvent, render } from '@testing-library/react-native'
+import React from 'react'
+import { FlatList } from 'react-native'
+import type { useSearchResults } from '../../../../hooks/use_search_results'
+import type {
+  ConversationSearchResultResource,
+  MessageSearchResultResource,
+} from '../../../../types/resources/search_result'
+import { SearchResultsList } from '../search_results_list'
+
+const mockUseSearchResults = jest.fn<ReturnType<typeof useSearchResults>, [string]>()
+jest.mock('../../../../hooks/use_search_results', () => ({
+  useSearchResults: (term: string) => mockUseSearchResults(term),
+}))
+
+type SearchState = ReturnType<typeof useSearchResults>
+
+const searchState = (overrides: Partial<SearchState> = {}): SearchState => ({
+  results: [],
+  failedTypes: [],
+  isPending: false,
+  isError: false,
+  isFetchNextPageError: false,
+  loadMore: jest.fn(),
+  hasNextPage: false,
+  isFetchingNextPage: false,
+  ...overrides,
+})
+
+const conversationResult = (id: string): ConversationSearchResultResource => ({
+  type: 'conversation',
+  id,
+  title: `Conversation ${id}`,
+  url: `/conversations/${id}`,
+  extra: { avatar: { previewAvatarUrls: [] } },
+})
+
+const messageResult = (id: string): MessageSearchResultResource => ({
+  type: 'message',
+  id,
+  title: `Message ${id}`,
+  url: `/conversations/1/messages/${id}`,
+  extra: {
+    conversationId: 1,
+    authorName: 'Ann',
+    snippet: [{ text: 'potluck', match: true }],
+    createdAt: '2026-01-01T00:00:00Z',
+    avatar: { previewAvatarUrls: [] },
+  },
+})
+
+const renderList = (state: Partial<SearchState>) => {
+  mockUseSearchResults.mockReturnValue(searchState(state))
+  return render(<SearchResultsList term="potluck" onSelect={jest.fn()} />)
+}
+
+describe('SearchResultsList', () => {
+  it('shows a spinner while pending', () => {
+    const view = renderList({ isPending: true })
+
+    expect(view.getByLabelText('Loading results')).toBeTruthy()
+  })
+
+  it('shows an error banner when the search fails', () => {
+    const view = renderList({ isError: true })
+
+    expect(view.getByText("Couldn't search right now. Try again.")).toBeTruthy()
+  })
+
+  it('shows the no-results state with the term when nothing matches', () => {
+    const view = renderList({})
+
+    expect(view.getByText(/Nothing matches “potluck\.”/)).toBeTruthy()
+  })
+
+  it('renders both section headings when both types have results', () => {
+    const view = renderList({ results: [conversationResult('1'), messageResult('1')] })
+
+    expect(view.getByText('Conversations')).toBeTruthy()
+    expect(view.getByText('Messages')).toBeTruthy()
+    expect(view.getByText('Message 1')).toBeTruthy()
+  })
+
+  it('renders the failure text for a failed type instead of the no-results state', () => {
+    const view = renderList({ failedTypes: ['message'] })
+
+    expect(view.getByText('Couldn’t load messages.')).toBeTruthy()
+    expect(view.queryByText('No results')).toBeNull()
+  })
+
+  it('keeps the no-results state hidden when only conversations match', () => {
+    const view = renderList({ results: [conversationResult('1')] })
+
+    expect(view.getByText('Conversations')).toBeTruthy()
+    expect(view.queryByText('No results')).toBeNull()
+  })
+
+  it('loads the next page once when the end is reached', () => {
+    const loadMore = jest.fn()
+    const view = renderList({ results: [messageResult('1')], hasNextPage: true, loadMore })
+
+    fireEvent(view.UNSAFE_getByType(FlatList), 'onEndReached')
+
+    expect(loadMore).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not load more while a page is already fetching', () => {
+    const loadMore = jest.fn()
+    const view = renderList({
+      results: [messageResult('1')],
+      hasNextPage: true,
+      isFetchingNextPage: true,
+      loadMore,
+    })
+
+    fireEvent(view.UNSAFE_getByType(FlatList), 'onEndReached')
+
+    expect(view.getByLabelText('Loading more results')).toBeTruthy()
+    expect(loadMore).not.toHaveBeenCalled()
+  })
+
+  it('offers a retry after a paging failure', () => {
+    const loadMore = jest.fn()
+    const view = renderList({
+      results: [messageResult('1')],
+      hasNextPage: true,
+      isFetchNextPageError: true,
+      loadMore,
+    })
+
+    fireEvent.press(view.getByText('Try again'))
+
+    expect(loadMore).toHaveBeenCalledTimes(1)
+  })
+})

package/src/screens/search/components/conversation_result_row.tsx

@@ -0,0 +1,36 @@
+import { StyleSheet } from 'react-native'
+import { ConversationAvatar, Heading } from '../../../components'
+import { useScalableNumberOfLines, useTheme } from '../../../hooks'
+import type { ConversationSearchResultResource } from '../../../types'
+import { ResultRow } from './result_row'
+
+interface ConversationResultRowProps {
+  result: ConversationSearchResultResource
+  onPress: () => void
+}
+
+export function ConversationResultRow({ result, onPress }: ConversationResultRowProps) {
+  const styles = useStyles()
+  const numberOfLines = useScalableNumberOfLines(1)
+
+  return (
+    <ResultRow accessibilityLabel={result.title} onPress={onPress} alignItems="center">
+      <ConversationAvatar conversation={result.extra.avatar} size="lg" />
+      <Heading variant="h3" numberOfLines={numberOfLines} style={styles.title}>
+        {result.title}
+      </Heading>
+    </ResultRow>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    title: {
+      flex: 1,
+      fontSize: 16,
+      color: colors.textColorDefaultPrimary,
+    },
+  })
+}

package/src/screens/search/components/conversation_results.tsx

@@ -0,0 +1,39 @@
+import { useState } from 'react'
+import type { ConversationSearchResultResource } from '../../../types'
+import { ViewMoreLinkRow } from '../../conversation_select_recipients/components/view_more_link_row'
+import { ConversationResultRow } from './conversation_result_row'
+import { ResultsSection } from './results_section'
+
+const COLLAPSED_COUNT = 5
+
+interface ConversationResultsProps {
+  results: ConversationSearchResultResource[]
+  onSelect: (result: ConversationSearchResultResource) => void
+}
+
+export function ConversationResults({ results, onSelect }: ConversationResultsProps) {
+  const [expanded, setExpanded] = useState(false)
+  const visible = expanded ? results : results.slice(0, COLLAPSED_COUNT)
+
+  if (results.length === 0) return null
+
+  const footer = results.length > COLLAPSED_COUNT && (
+    <ViewMoreLinkRow
+      expanded={expanded}
+      onPress={() => setExpanded(!expanded)}
+      accessibilityHint={
+        expanded
+          ? `Shows the first ${COLLAPSED_COUNT} conversation results`
+          : `Shows all ${results.length} conversation results`
+      }
+    />
+  )
+
+  return (
+    <ResultsSection title="Conversations" footer={footer}>
+      {visible.map(result => (
+        <ConversationResultRow key={result.id} result={result} onPress={() => onSelect(result)} />
+      ))}
+    </ResultsSection>
+  )
+}

package/src/screens/search/components/message_result_row.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { ConversationAvatar, Text } from '../../../components/display'
+import { useScalableNumberOfLines } from '../../../hooks'
+import type { MessageSearchResultResource } from '../../../types/resources/search_result'
+import { platformFontWeightMedium } from '../../../utils'
+import { formatDatePreview } from '../../../utils/date'
+import { ResultRow } from './result_row'
+import { plainSnippetText, Snippet } from './snippet'
+
+interface MessageResultRowProps {
+  result: MessageSearchResultResource
+  onPress: (result: MessageSearchResultResource) => void
+}
+
+export function MessageResultRow({ result, onPress }: MessageResultRowProps) {
+  const { authorName, avatar, snippet, createdAt } = result.extra
+  const titleNumberOfLines = useScalableNumberOfLines(1)
+  const previewNumberOfLines = useScalableNumberOfLines(2)
+  const date = formatDatePreview(createdAt)
+  const accessibilityLabel = `${result.title}, ${authorName}: ${plainSnippetText(snippet)}, ${date}`
+
+  return (
+    <ResultRow accessibilityLabel={accessibilityLabel} onPress={() => onPress(result)}>
+      <ConversationAvatar conversation={avatar} size="lg" />
+      <View style={styles.body}>
+        <Text numberOfLines={titleNumberOfLines} style={styles.title}>
+          {result.title}
+        </Text>
+        <Text variant="tertiary" numberOfLines={previewNumberOfLines}>
+          {authorName}: <Snippet segments={snippet} />
+        </Text>
+      </View>
+      <Text variant="footnote">{date}</Text>
+    </ResultRow>
+  )
+}
+
+const styles = StyleSheet.create({
+  body: {
+    flex: 1,
+    rowGap: 2,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: platformFontWeightMedium,
+  },
+})

package/src/screens/search/components/result_row.tsx

@@ -0,0 +1,58 @@
+import React, { type ReactNode } from 'react'
+import { Pressable, StyleSheet } from 'react-native'
+import { useAtFontScaleBreakpoint, useTheme } from '../../../hooks'
+import { platformPressedOpacityStyle } from '../../../utils'
+
+interface ResultRowProps {
+  accessibilityLabel: string
+  onPress: () => void
+  alignItems?: 'flex-start' | 'center'
+  children: ReactNode
+}
+
+export function ResultRow({
+  accessibilityLabel,
+  onPress,
+  alignItems = 'flex-start',
+  children,
+}: ResultRowProps) {
+  const { colors } = useTheme()
+  const atFontScaleBreakpoint = useAtFontScaleBreakpoint()
+  const styles = useStyles()
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      onPress={onPress}
+      style={({ pressed }) => [
+        styles.row,
+        atFontScaleBreakpoint ? styles.stacked : { alignItems },
+        pressed && platformPressedOpacityStyle,
+      ]}
+      android_ripple={{ color: colors.androidRippleNeutral, borderless: false, foreground: true }}
+    >
+      {children}
+    </Pressable>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    row: {
+      flexDirection: 'row',
+      gap: 8,
+      paddingVertical: 12,
+      paddingHorizontal: 16,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.borderColorDefaultDim,
+    },
+    stacked: {
+      flexDirection: 'column',
+      alignItems: 'stretch',
+      borderBottomColor: colors.borderColorDefaultDark,
+    },
+  })
+}

package/src/screens/search/components/results_section.tsx

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react'
+import { StyleSheet, View } from 'react-native'
+import { Text } from '../../../components'
+
+interface ResultsSectionProps {
+  title: string
+  footer?: ReactNode
+  children?: ReactNode
+}
+
+export function ResultsSection({ title, footer, children }: ResultsSectionProps) {
+  return (
+    <View>
+      <View style={styles.headingRow}>
+        <Text accessibilityRole="header" style={styles.heading}>
+          {title}
+        </Text>
+      </View>
+      {children}
+      {footer}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  headingRow: {
+    paddingHorizontal: 16,
+    paddingTop: 16,
+    paddingBottom: 8,
+  },
+  heading: {
+    fontWeight: '600',
+  },
+})

package/src/screens/search/components/search_results_list.tsx

@@ -0,0 +1,147 @@
+import React from 'react'
+import { FlatList, StyleSheet, View } from 'react-native'
+import { Banner, Spinner, Text, TextButton } from '../../../components'
+import { useSearchResults } from '../../../hooks/use_search_results'
+import type {
+  ConversationSearchResultResource,
+  MessageSearchResultResource,
+  SearchResultResource,
+} from '../../../types/resources/search_result'
+import { ConversationResults } from './conversation_results'
+import { MessageResultRow } from './message_result_row'
+import { ResultsSection } from './results_section'
+import { NoResultsBlankState } from './search_blank_states'
+
+const SEARCH_ERROR_MESSAGE = "Couldn't search right now. Try again."
+
+interface SearchResultsListProps {
+  term: string
+  onSelect: (result: SearchResultResource) => void
+}
+
+export function SearchResultsList({ term, onSelect }: SearchResultsListProps) {
+  const {
+    results,
+    failedTypes,
+    isPending,
+    isError,
+    isFetchNextPageError,
+    loadMore,
+    hasNextPage,
+    isFetchingNextPage,
+  } = useSearchResults(term)
+  const conversationResults = results.filter(isConversationResult)
+  const messageResults = results.filter(isMessageResult)
+
+  return (
+    <FlatList
+      data={messageResults}
+      keyExtractor={item => item.id}
+      keyboardShouldPersistTaps="handled"
+      keyboardDismissMode="on-drag"
+      contentContainerStyle={styles.content}
+      renderItem={({ item }) => <MessageResultRow result={item} onPress={onSelect} />}
+      ListHeaderComponent={
+        <>
+          {conversationResults.length > 0 && (
+            <ConversationResults results={conversationResults} onSelect={onSelect} />
+          )}
+          {failedTypes.includes('conversation') && <SectionFailure type="conversation" />}
+          {messageResults.length > 0 && <ResultsSection title="Messages" />}
+        </>
+      }
+      ListEmptyComponent={
+        <ListEmpty
+          term={term}
+          isError={isError}
+          isPending={isPending}
+          noResults={results.length === 0 && failedTypes.length === 0}
+        />
+      }
+      ListFooterComponent={
+        <>
+          {isFetchingNextPage && (
+            <View accessibilityLabel="Loading more results" style={styles.loading}>
+              <Spinner />
+            </View>
+          )}
+          {isFetchNextPageError && !isFetchingNextPage && (
+            <TextButton onPress={loadMore} style={styles.retry}>
+              Try again
+            </TextButton>
+          )}
+          {failedTypes.includes('message') && <SectionFailure type="message" />}
+        </>
+      }
+      onEndReached={() => {
+        if (hasNextPage && !isFetchingNextPage && !isFetchNextPageError) loadMore()
+      }}
+      onEndReachedThreshold={0.5}
+    />
+  )
+}
+
+interface ListEmptyProps {
+  term: string
+  isError: boolean
+  isPending: boolean
+  noResults: boolean
+}
+
+function ListEmpty({ term, isError, isPending, noResults }: ListEmptyProps) {
+  if (isError) {
+    return <Banner appearance="error" description={SEARCH_ERROR_MESSAGE} style={styles.banner} />
+  }
+
+  if (isPending) {
+    return (
+      <View accessibilityLabel="Loading results" style={styles.loading}>
+        <Spinner />
+      </View>
+    )
+  }
+
+  if (noResults) return <NoResultsBlankState term={term} />
+
+  return null
+}
+
+function SectionFailure({ type }: { type: SearchResultResource['type'] }) {
+  return (
+    <Text accessibilityRole="alert" variant="secondary" style={styles.sectionFailure}>
+      Couldn&rsquo;t load {type}s.
+    </Text>
+  )
+}
+
+function isConversationResult(
+  result: SearchResultResource
+): result is ConversationSearchResultResource {
+  return result.type === 'conversation'
+}
+
+function isMessageResult(result: SearchResultResource): result is MessageSearchResultResource {
+  return result.type === 'message'
+}
+
+const styles = StyleSheet.create({
+  content: {
+    flexGrow: 1,
+  },
+  banner: {
+    margin: 16,
+  },
+  loading: {
+    alignItems: 'center',
+    paddingVertical: 16,
+  },
+  retry: {
+    alignSelf: 'center',
+    paddingVertical: 16,
+  },
+  sectionFailure: {
+    fontSize: 14,
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+  },
+})