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

package/build/screens/search/search_screen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"search_screen.d.ts","sourceRoot":"","sources":["../../../src/screens/search/search_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AACxD,OAAO,EACL,4BAA4B,EAC5B,sBAAsB,EACvB,MAAM,gCAAgC,CAAA;AAcvC,eAAO,MAAM,mBAAmB,GAAI,iBAEjC,sBAAsB,CAAC,aAAa,CAAC,KAAG,4BAIxC,CAAA;AAEH,wBAAgB,YAAY,4CAgB3B"}
+{"version":3,"file":"search_screen.d.ts","sourceRoot":"","sources":["../../../src/screens/search/search_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,0BAA0B,CAAA;AACvE,OAAO,EACL,4BAA4B,EAC5B,sBAAsB,EACvB,MAAM,gCAAgC,CAAA;AAcvC,eAAO,MAAM,mBAAmB,GAAI,iBAEjC,sBAAsB,CAAC,aAAa,CAAC,KAAG,4BAIxC,CAAA;AAEH,wBAAgB,YAAY,4CAkC3B"}

package/build/screens/search/search_screen.js

@@ -1,7 +1,7 @@
 import { c as _c } from "react/compiler-runtime";
-import { noop } from 'lodash';
+import { useNavigation } from '@react-navigation/native';
 import React, { useState } from 'react';
-import { StyleSheet, View } from 'react-native';
+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';
@@ -18,47 +18,72 @@ export const SearchScreenOptions = ({
   onPress: () => navigation.goBack()
 }));
 export function SearchScreen() {
-  const $ = _c(7);
+  const $ = _c(10);
+  const navigation = useNavigation();
   const [term, setTerm] = useState("");
   const debouncedTerm = useDebouncedSearchTerm(term);
   let t0;
-  if ($[0] !== term) {
-    t0 = /*#__PURE__*/_jsx(SearchField, {
-      term: term,
-      onChange: setTerm
-    });
-    $[0] = term;
+  if ($[0] !== navigation) {
+    t0 = result => {
+      Keyboard.dismiss();
+      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
+        });
+      }
+    };
+    $[0] = navigation;
     $[1] = t0;
   } else {
     t0 = $[1];
   }
+  const openResult = t0;
   let t1;
-  if ($[2] !== debouncedTerm) {
-    t1 = debouncedTerm.length > 0 ? /*#__PURE__*/_jsx(SearchResultsList, {
-      term: debouncedTerm,
-      onSelect: noop
-    }, debouncedTerm) : /*#__PURE__*/_jsx(SearchPromptBlankState, {});
-    $[2] = debouncedTerm;
+  if ($[2] !== term) {
+    t1 = /*#__PURE__*/_jsx(SearchField, {
+      term: term,
+      onChange: setTerm
+    });
+    $[2] = term;
     $[3] = t1;
   } else {
     t1 = $[3];
   }
   let t2;
-  if ($[4] !== t0 || $[5] !== t1) {
-    t2 = /*#__PURE__*/_jsx(KeyboardView, {
+  if ($[4] !== debouncedTerm || $[5] !== openResult) {
+    t2 = debouncedTerm.length > 0 ? /*#__PURE__*/_jsx(SearchResultsList, {
+      term: debouncedTerm,
+      onSelect: openResult
+    }, debouncedTerm) : /*#__PURE__*/_jsx(SearchPromptBlankState, {});
+    $[4] = debouncedTerm;
+    $[5] = openResult;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  let t3;
+  if ($[7] !== t1 || $[8] !== t2) {
+    t3 = /*#__PURE__*/_jsx(KeyboardView, {
       children: /*#__PURE__*/_jsxs(View, {
         style: styles.container,
         testID: "search-screen",
-        children: [t0, t1]
+        children: [t1, t2]
       })
     });
-    $[4] = t0;
-    $[5] = t1;
-    $[6] = t2;
+    $[7] = t1;
+    $[8] = t2;
+    $[9] = t3;
   } else {
-    t2 = $[6];
+    t3 = $[9];
   }
-  return t2;
+  return t3;
 }
 const styles = StyleSheet.create({
   container: {

package/build/screens/search/search_screen.js.map

@@ -1 +1 @@
-{"version":3,"file":"search_screen.js","names":["noop","React","useState","StyleSheet","View","KeyboardView","composeOptions","withMinimalBack","useDebouncedSearchTerm","SearchPromptBlankState","SearchField","SearchResultsList","jsx","_jsx","jsxs","_jsxs","SearchScreenOptions","navigation","title","animation","onPress","goBack","SearchScreen","$","_c","term","setTerm","debouncedTerm","t0","t1","length","t2","children","style","styles","container","testID","create","flex"],"sources":["../../../src/screens/search/search_screen.tsx"],"sourcesContent":["import { ParamListBase } from '@react-navigation/native'\nimport {\n  NativeStackNavigationOptions,\n  NativeStackScreenProps,\n} from '@react-navigation/native-stack'\nimport { noop } from 'lodash'\nimport React, { useState } from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport { KeyboardView } from '../../components'\nimport {\n  composeOptions,\n  withMinimalBack,\n} from '../../components/display/platform_modal_header_buttons'\nimport { useDebouncedSearchTerm } from '../../hooks/use_debounced_search_term'\nimport { SearchPromptBlankState } from './components/search_blank_states'\nimport { SearchField } from './components/search_field'\nimport { SearchResultsList } from './components/search_results_list'\n\nexport const SearchScreenOptions = ({\n  navigation,\n}: NativeStackScreenProps<ParamListBase>): NativeStackNavigationOptions =>\n  composeOptions(\n    { title: 'Search', animation: 'fade' },\n    withMinimalBack({ onPress: () => navigation.goBack() })\n  )\n\nexport function SearchScreen() {\n  const [term, setTerm] = useState('')\n  const debouncedTerm = useDebouncedSearchTerm(term)\n\n  return (\n    <KeyboardView>\n      <View style={styles.container} testID=\"search-screen\">\n        <SearchField term={term} onChange={setTerm} />\n        {debouncedTerm.length > 0 ? (\n          <SearchResultsList key={debouncedTerm} term={debouncedTerm} onSelect={noop} />\n        ) : (\n          <SearchPromptBlankState />\n        )}\n      </View>\n    </KeyboardView>\n  )\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n  },\n})\n"],"mappings":";AAKA,SAASA,IAAI,QAAQ,QAAQ;AAC7B,OAAOC,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC/C,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SACEC,cAAc,EACdC,eAAe,QACV,wDAAwD;AAC/D,SAASC,sBAAsB,QAAQ,uCAAuC;AAC9E,SAASC,sBAAsB,QAAQ,kCAAkC;AACzE,SAASC,WAAW,QAAQ,2BAA2B;AACvD,SAASC,iBAAiB,QAAQ,kCAAkC;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEpE,OAAO,MAAMC,mBAAmB,GAAGA,CAAC;EAClCC;AACqC,CAAC,KACtCX,cAAc,CACZ;EAAEY,KAAK,EAAE,QAAQ;EAAEC,SAAS,EAAE;AAAO,CAAC,EACtCZ,eAAe,CAAC;EAAEa,OAAO,EAAEA,CAAA,KAAMH,UAAU,CAACI,MAAM,CAAC;AAAE,CAAC,CACxD,CAAC;AAEH,OAAO,SAAAC,aAAA;EAAA,MAAAC,CAAA,GAAAC,EAAA;EACL,OAAAC,IAAA,EAAAC,OAAA,IAAwBxB,QAAQ,CAAC,EAAE,CAAC;EACpC,MAAAyB,aAAA,GAAsBnB,sBAAsB,CAACiB,IAAI,CAAC;EAAA,IAAAG,EAAA;EAAA,IAAAL,CAAA,QAAAE,IAAA;IAK5CG,EAAA,gBAAAf,IAAA,CAACH,WAAW;MAAOe,IAAI,EAAJA,IAAI;MAAYC,QAAO,EAAPA;IAAO,CAAG,CAAC;IAAAH,CAAA,MAAAE,IAAA;IAAAF,CAAA,MAAAK,EAAA;EAAA;IAAAA,EAAA,GAAAL,CAAA;EAAA;EAAA,IAAAM,EAAA;EAAA,IAAAN,CAAA,QAAAI,aAAA;IAC7CE,EAAA,GAAAF,aAAa,CAAAG,MAAO,GAAG,CAIvB,gBAJAjB,IAAA,CACEF,iBAAiB;MAA2BgB,IAAa,EAAbA,aAAa;MAAY3B,QAAI,EAAJA;IAAI,GAAlD2B,aAG1B,CAAC,gBAJAd,IAAA,CAGEJ,sBAAsB,IACzB,CAAC;IAAAc,CAAA,MAAAI,aAAA;IAAAJ,CAAA,MAAAM,EAAA;EAAA;IAAAA,EAAA,GAAAN,CAAA;EAAA;EAAA,IAAAQ,EAAA;EAAA,IAAAR,CAAA,QAAAK,EAAA,IAAAL,CAAA,QAAAM,EAAA;IAPLE,EAAA,gBAAAlB,IAAA,CAACR,YAAY;MAAA2B,QAAA,eACXjB,KAAA,CAACX,IAAI;QAAQ6B,KAAgB,EAAhBC,MAAM,CAAAC,SAAU;QAASC,MAAe,EAAf,eAAe;QAAAJ,QAAA,GACnDJ,EAA8C,EAC7CC,EAIA;MAAA,CACG;IAAC,CACK,CAAC;IAAAN,CAAA,MAAAK,EAAA;IAAAL,CAAA,MAAAM,EAAA;IAAAN,CAAA,MAAAQ,EAAA;EAAA;IAAAA,EAAA,GAAAR,CAAA;EAAA;EAAA,OATfQ,EASe;AAAA;AAInB,MAAMG,MAAM,GAAG/B,UAAU,CAACkC,MAAM,CAAC;EAC/BF,SAAS,EAAE;IACTG,IAAI,EAAE;EACR;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"search_screen.js","names":["useNavigation","React","useState","Keyboard","StyleSheet","View","KeyboardView","composeOptions","withMinimalBack","useDebouncedSearchTerm","SearchPromptBlankState","SearchField","SearchResultsList","jsx","_jsx","jsxs","_jsxs","SearchScreenOptions","navigation","title","animation","onPress","goBack","SearchScreen","$","_c","term","setTerm","debouncedTerm","t0","result","dismiss","type","navigate","conversation_id","Number","id","extra","conversationId","initial_message_id","openResult","t1","t2","length","t3","children","style","styles","container","testID","create","flex"],"sources":["../../../src/screens/search/search_screen.tsx"],"sourcesContent":["import { ParamListBase, useNavigation } from '@react-navigation/native'\nimport {\n  NativeStackNavigationOptions,\n  NativeStackScreenProps,\n} from '@react-navigation/native-stack'\nimport React, { useState } from 'react'\nimport { Keyboard, StyleSheet, View } from 'react-native'\nimport { KeyboardView } from '../../components'\nimport {\n  composeOptions,\n  withMinimalBack,\n} from '../../components/display/platform_modal_header_buttons'\nimport { useDebouncedSearchTerm } from '../../hooks/use_debounced_search_term'\nimport type { SearchResultResource } from '../../types/resources/search_result'\nimport { SearchPromptBlankState } from './components/search_blank_states'\nimport { SearchField } from './components/search_field'\nimport { SearchResultsList } from './components/search_results_list'\n\nexport const SearchScreenOptions = ({\n  navigation,\n}: NativeStackScreenProps<ParamListBase>): NativeStackNavigationOptions =>\n  composeOptions(\n    { title: 'Search', animation: 'fade' },\n    withMinimalBack({ onPress: () => navigation.goBack() })\n  )\n\nexport function SearchScreen() {\n  const navigation = useNavigation()\n  const [term, setTerm] = useState('')\n  const debouncedTerm = useDebouncedSearchTerm(term)\n\n  const openResult = (result: SearchResultResource) => {\n    Keyboard.dismiss()\n\n    if (result.type === 'conversation') {\n      navigation.navigate('Conversation', {\n        conversation_id: Number(result.id),\n        title: result.title,\n      })\n    } else {\n      navigation.navigate('Conversation', {\n        conversation_id: result.extra.conversationId,\n        initial_message_id: result.id,\n        title: result.title,\n      })\n    }\n  }\n\n  return (\n    <KeyboardView>\n      <View style={styles.container} testID=\"search-screen\">\n        <SearchField term={term} onChange={setTerm} />\n        {debouncedTerm.length > 0 ? (\n          <SearchResultsList key={debouncedTerm} term={debouncedTerm} onSelect={openResult} />\n        ) : (\n          <SearchPromptBlankState />\n        )}\n      </View>\n    </KeyboardView>\n  )\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n  },\n})\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "4.3.1-rc.0",
+  "version": "4.4.0-rc.0",
   "description": "",
   "repository": {
     "type": "git",
@@ -84,5 +84,5 @@
     "sf-symbols-typescript": "^2.2.0",
     "typescript": "~6.0.3"
   },
-  "gitHead": "98d7eda39e22a531267c748456a1ad9034d80d5a"
+  "gitHead": "0539b5f633f3d60712eb79c502ca354180a9f0ac"
 }

package/src/screens/search/__tests__/search_screen.test.tsx

@@ -1,8 +1,19 @@
 import { act, fireEvent, render } from '@testing-library/react-native'
 import React from 'react'
+import { Keyboard } from 'react-native'
 import type { useSearchResults } from '../../../hooks/use_search_results'
+import type {
+  ConversationSearchResultResource,
+  MessageSearchResultResource,
+} from '../../../types/resources/search_result'
 import { SearchScreen } from '../search_screen'
 
+const mockNavigate = jest.fn()
+jest.mock('@react-navigation/native', () => ({
+  ...jest.requireActual('@react-navigation/native'),
+  useNavigation: () => ({ navigate: mockNavigate }),
+}))
+
 const mockUseSearchResults = jest.fn<ReturnType<typeof useSearchResults>, [string]>()
 jest.mock('../../../hooks/use_search_results', () => ({
   useSearchResults: (term: string) => mockUseSearchResults(term),
@@ -14,8 +25,48 @@ jest.mock('../../../components/display/keyboard_view', () => ({
 
 const inputLabel = 'Search titles and messages'
 
+const conversationResult: ConversationSearchResultResource = {
+  type: 'conversation',
+  id: '42',
+  title: 'Budget Team',
+  url: '/conversations/42',
+  extra: { avatar: { previewAvatarUrls: [] } },
+}
+
+const messageResult: MessageSearchResultResource = {
+  type: 'message',
+  id: '01JMESSAGEULID',
+  title: 'Finance',
+  url: '/conversations/7/messages/01JMESSAGEULID',
+  extra: {
+    conversationId: 7,
+    authorName: 'Ann',
+    snippet: [{ text: 'budget', match: true }],
+    createdAt: '2026-01-01T00:00:00Z',
+    avatar: { previewAvatarUrls: [] },
+  },
+}
+
+const renderWithResults = () => {
+  mockUseSearchResults.mockReturnValue({
+    results: [conversationResult, messageResult],
+    failedTypes: [],
+    isPending: false,
+    isError: false,
+    isFetchNextPageError: false,
+    loadMore: jest.fn(),
+    hasNextPage: false,
+    isFetchingNextPage: false,
+  })
+  const view = render(<SearchScreen />)
+  fireEvent.changeText(view.getByLabelText(inputLabel), 'budget')
+  act(() => jest.advanceTimersByTime(200))
+  return view
+}
+
 beforeEach(() => {
   jest.useFakeTimers()
+  mockNavigate.mockReset()
   mockUseSearchResults.mockReset().mockReturnValue({
     results: [],
     failedTypes: [],
@@ -61,4 +112,29 @@ describe('SearchScreen', () => {
 
     expect(view.getByText('Search chat')).toBeTruthy()
   })
+
+  it('opens a conversation result at the latest message', () => {
+    const dismiss = jest.spyOn(Keyboard, 'dismiss')
+    const view = renderWithResults()
+
+    fireEvent.press(view.getByLabelText('Budget Team'))
+
+    expect(dismiss).toHaveBeenCalled()
+    expect(mockNavigate).toHaveBeenCalledWith('Conversation', {
+      conversation_id: 42,
+      title: 'Budget Team',
+    })
+  })
+
+  it('opens a message result anchored at that message', () => {
+    const view = renderWithResults()
+
+    fireEvent.press(view.getByLabelText(/^Finance, Ann: budget/))
+
+    expect(mockNavigate).toHaveBeenCalledWith('Conversation', {
+      conversation_id: 7,
+      initial_message_id: '01JMESSAGEULID',
+      title: 'Finance',
+    })
+  })
 })

package/src/screens/search/search_screen.tsx

@@ -1,17 +1,17 @@
-import { ParamListBase } from '@react-navigation/native'
+import { ParamListBase, useNavigation } from '@react-navigation/native'
 import {
   NativeStackNavigationOptions,
   NativeStackScreenProps,
 } from '@react-navigation/native-stack'
-import { noop } from 'lodash'
 import React, { useState } from 'react'
-import { StyleSheet, View } from 'react-native'
+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 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'
@@ -25,15 +25,33 @@ export const SearchScreenOptions = ({
   )
 
 export function SearchScreen() {
+  const navigation = useNavigation()
   const [term, setTerm] = useState('')
   const debouncedTerm = useDebouncedSearchTerm(term)
 
+  const openResult = (result: SearchResultResource) => {
+    Keyboard.dismiss()
+
+    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} />
         {debouncedTerm.length > 0 ? (
-          <SearchResultsList key={debouncedTerm} term={debouncedTerm} onSelect={noop} />
+          <SearchResultsList key={debouncedTerm} term={debouncedTerm} onSelect={openResult} />
         ) : (
           <SearchPromptBlankState />
         )}