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

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

@@ -1,4 +1,4 @@
-import React from 'react'
+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'
@@ -14,12 +14,18 @@ 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) => void
+  onSelect: (result: SearchResultResource, position: number) => void
+  onSettled: (term: string, counts: SearchResultCounts) => void
 }
 
-export function SearchResultsList({ term, onSelect }: SearchResultsListProps) {
+export function SearchResultsList({ term, onSelect, onSettled }: SearchResultsListProps) {
   const {
     results,
     failedTypes,
@@ -32,6 +38,19 @@ export function SearchResultsList({ term, onSelect }: SearchResultsListProps) {
   } = 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
@@ -40,7 +59,9 @@ export function SearchResultsList({ term, onSelect }: SearchResultsListProps) {
       keyboardShouldPersistTaps="handled"
       keyboardDismissMode="on-drag"
       contentContainerStyle={styles.content}
-      renderItem={({ item }) => <MessageResultRow result={item} onPress={onSelect} />}
+      renderItem={({ item, index }) => (
+        <MessageResultRow result={item} onPress={() => onSelect(item, index)} />
+      )}
       ListHeaderComponent={
         <>
           {conversationResults.length > 0 && (

package/src/screens/search/search_screen.tsx

@@ -3,7 +3,7 @@ import {
   NativeStackNavigationOptions,
   NativeStackScreenProps,
 } from '@react-navigation/native-stack'
-import React, { useState } from 'react'
+import React, { useRef, useState } from 'react'
 import { Keyboard, StyleSheet, View } from 'react-native'
 import { KeyboardView } from '../../components'
 import {
@@ -11,10 +11,11 @@ import {
   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 } from './components/search_results_list'
+import { SearchResultsList, type SearchResultCounts } from './components/search_results_list'
 
 export const SearchScreenOptions = ({
   navigation,
@@ -28,9 +29,23 @@ export function SearchScreen() {
   const navigation = useNavigation()
   const [term, setTerm] = useState('')
   const debouncedTerm = useDebouncedSearchTerm(term)
+  const { publishEvent } = useProductAnalytics()
+  const publishedTerms = useRef(new Set<string>())
 
-  const openResult = (result: SearchResultResource) => {
+  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', {
@@ -51,7 +66,12 @@ export function SearchScreen() {
       <View style={styles.container} testID="search-screen">
         <SearchField term={term} onChange={setTerm} />
         {debouncedTerm.length > 0 ? (
-          <SearchResultsList key={debouncedTerm} term={debouncedTerm} onSelect={openResult} />
+          <SearchResultsList
+            key={debouncedTerm}
+            term={debouncedTerm}
+            onSelect={openResult}
+            onSettled={publishSearch}
+          />
         ) : (
           <SearchPromptBlankState />
         )}