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

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

@@ -0,0 +1,180 @@
+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>, onSettled = jest.fn()) => {
+  mockUseSearchResults.mockReturnValue(searchState(state))
+  const list = () => <SearchResultsList term="potluck" onSelect={jest.fn()} onSettled={onSettled} />
+  const view = render(list())
+  const rerenderWith = (next: Partial<SearchState>) => {
+    mockUseSearchResults.mockReturnValue(searchState(next))
+    view.rerender(list())
+  }
+  return { ...view, rerenderWith }
+}
+
+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('passes a message result and its position within the section to onSelect', () => {
+    const onSelect = jest.fn()
+    const results = [conversationResult('1'), messageResult('1'), messageResult('2')]
+    mockUseSearchResults.mockReturnValue(searchState({ results }))
+    const view = render(
+      <SearchResultsList term="potluck" onSelect={onSelect} onSettled={jest.fn()} />
+    )
+
+    fireEvent.press(view.getByLabelText(/^Message 2/))
+
+    expect(onSelect).toHaveBeenCalledWith(results[2], 1)
+  })
+
+  it('reports the settled term and counts once, not while pending or after paging', () => {
+    const onSettled = jest.fn()
+    const view = renderList({ isPending: true }, onSettled)
+    expect(onSettled).not.toHaveBeenCalled()
+
+    const results = [conversationResult('1'), messageResult('1'), messageResult('2')]
+    view.rerenderWith({ results })
+
+    expect(onSettled).toHaveBeenCalledTimes(1)
+    expect(onSettled).toHaveBeenCalledWith('potluck', {
+      conversationResultCount: 1,
+      messageResultCount: 2,
+    })
+
+    view.rerenderWith({ results: [...results, messageResult('3')] })
+
+    expect(onSettled).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not report a failed search', () => {
+    const onSettled = jest.fn()
+    renderList({ isError: true }, onSettled)
+
+    expect(onSettled).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,43 @@
+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, position: number) => 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, index) => (
+        <ConversationResultRow
+          key={result.id}
+          result={result}
+          onPress={() => onSelect(result, index)}
+        />
+      ))}
+    </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,168 @@
+import React, { useEffect, useRef } 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."
+
+export interface SearchResultCounts {
+  conversationResultCount: number
+  messageResultCount: number
+}
+
+interface SearchResultsListProps {
+  term: string
+  onSelect: (result: SearchResultResource, position: number) => void
+  onSettled: (term: string, counts: SearchResultCounts) => void
+}
+
+export function SearchResultsList({ term, onSelect, onSettled }: SearchResultsListProps) {
+  const {
+    results,
+    failedTypes,
+    isPending,
+    isError,
+    isFetchNextPageError,
+    loadMore,
+    hasNextPage,
+    isFetchingNextPage,
+  } = useSearchResults(term)
+  const conversationResults = results.filter(isConversationResult)
+  const messageResults = results.filter(isMessageResult)
+  const settled = !isPending && !isError
+
+  const settledTermRef = useRef<string | undefined>(undefined)
+
+  useEffect(() => {
+    if (!settled || settledTermRef.current === term) return
+
+    settledTermRef.current = term
+    onSettled(term, {
+      conversationResultCount: conversationResults.length,
+      messageResultCount: messageResults.length,
+    })
+  }, [settled, term, conversationResults.length, messageResults.length, onSettled])
+
+  return (
+    <FlatList
+      data={messageResults}
+      keyExtractor={item => item.id}
+      keyboardShouldPersistTaps="handled"
+      keyboardDismissMode="on-drag"
+      contentContainerStyle={styles.content}
+      renderItem={({ item, index }) => (
+        <MessageResultRow result={item} onPress={() => onSelect(item, index)} />
+      )}
+      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,
+  },
+})

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

@@ -0,0 +1,37 @@
+import React from 'react'
+import { StyleSheet } from 'react-native'
+import { Text } from '../../../components/display'
+import { useTheme } from '../../../hooks'
+import type { SnippetSegment } from '../../../types/resources/search_result'
+
+interface SnippetProps {
+  segments: SnippetSegment[]
+}
+
+export function Snippet({ segments }: SnippetProps) {
+  const styles = useStyles()
+
+  return (
+    <>
+      {segments.map((segment, index) => (
+        <Text key={index} variant="tertiary" style={segment.match && styles.match}>
+          {segment.text}
+        </Text>
+      ))}
+    </>
+  )
+}
+
+export function plainSnippetText(segments: SnippetSegment[]) {
+  return segments.map(segment => segment.text).join('')
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    match: {
+      color: colors.interaction,
+    },
+  })
+}

package/src/screens/search/search_screen.tsx

@@ -1,17 +1,21 @@
-import { ParamListBase } from '@react-navigation/native'
+import { ParamListBase, useNavigation } from '@react-navigation/native'
 import {
   NativeStackNavigationOptions,
   NativeStackScreenProps,
 } from '@react-navigation/native-stack'
-import React, { useState } from 'react'
-import { StyleSheet, View } from 'react-native'
+import React, { useRef, useState } from 'react'
+import { Keyboard, StyleSheet, View } from 'react-native'
 import { KeyboardView } from '../../components'
 import {
   composeOptions,
   withMinimalBack,
 } from '../../components/display/platform_modal_header_buttons'
+import { useDebouncedSearchTerm } from '../../hooks/use_debounced_search_term'
+import { analyticsEvents, useProductAnalytics } from '../../hooks/use_product_analytics'
+import type { SearchResultResource } from '../../types/resources/search_result'
 import { SearchPromptBlankState } from './components/search_blank_states'
 import { SearchField } from './components/search_field'
+import { SearchResultsList, type SearchResultCounts } from './components/search_results_list'
 
 export const SearchScreenOptions = ({
   navigation,
@@ -22,13 +26,55 @@ export const SearchScreenOptions = ({
   )
 
 export function SearchScreen() {
+  const navigation = useNavigation()
   const [term, setTerm] = useState('')
+  const debouncedTerm = useDebouncedSearchTerm(term)
+  const { publishEvent } = useProductAnalytics()
+  const publishedTerms = useRef(new Set<string>())
+
+  const publishSearch = (settledTerm: string, counts: SearchResultCounts) => {
+    if (publishedTerms.current.has(settledTerm)) return
+
+    publishedTerms.current.add(settledTerm)
+    publishEvent(analyticsEvents.search_performed, {
+      term_length: settledTerm.length,
+      conversation_result_count: counts.conversationResultCount,
+      message_result_count: counts.messageResultCount,
+    })
+  }
+
+  const openResult = (result: SearchResultResource, position: number) => {
+    Keyboard.dismiss()
+    publishEvent(analyticsEvents.search_result_opened, { result_type: result.type, position })
+
+    if (result.type === 'conversation') {
+      navigation.navigate('Conversation', {
+        conversation_id: Number(result.id),
+        title: result.title,
+      })
+    } else {
+      navigation.navigate('Conversation', {
+        conversation_id: result.extra.conversationId,
+        initial_message_id: result.id,
+        title: result.title,
+      })
+    }
+  }
 
   return (
     <KeyboardView>
       <View style={styles.container} testID="search-screen">
         <SearchField term={term} onChange={setTerm} />
-        <SearchPromptBlankState />
+        {debouncedTerm.length > 0 ? (
+          <SearchResultsList
+            key={debouncedTerm}
+            term={debouncedTerm}
+            onSelect={openResult}
+            onSettled={publishSearch}
+          />
+        ) : (
+          <SearchPromptBlankState />
+        )}
       </View>
     </KeyboardView>
   )