@planningcenter/chat-react-native 4.3.0-rc.5 → 4.3.0-rc.7

package/build/types/resources/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/resources/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA;AACpC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,gBAAgB,CAAA;AAC9B,cAAc,2BAA2B,CAAA;AACzC,cAAc,yBAAyB,CAAA;AACvC,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/resources/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA;AACpC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,gBAAgB,CAAA;AAC9B,cAAc,2BAA2B,CAAA;AACzC,cAAc,yBAAyB,CAAA;AACvC,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA"}

package/build/types/resources/index.js

@@ -14,4 +14,5 @@ export * from './services';
 export * from './organization';
 export * from './group_membership';
 export * from './group_resource';
+export * from './search_result';
 //# sourceMappingURL=index.js.map

package/build/types/resources/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/types/resources/index.ts"],"sourcesContent":["export * from './analytics_metadata'\nexport * from './direct_message_affiliations'\nexport * from './direct_message_candidate'\nexport * from './conversation'\nexport * from './conversation_membership'\nexport * from './conversation_validate'\nexport * from './member'\nexport * from './message'\nexport * from './oauth_token'\nexport * from './person'\nexport * from './groups'\nexport * from './app_grant'\nexport * from './services'\nexport * from './organization'\nexport * from './group_membership'\nexport * from './group_resource'\n"],"mappings":"AAAA,cAAc,sBAAsB;AACpC,cAAc,+BAA+B;AAC7C,cAAc,4BAA4B;AAC1C,cAAc,gBAAgB;AAC9B,cAAc,2BAA2B;AACzC,cAAc,yBAAyB;AACvC,cAAc,UAAU;AACxB,cAAc,WAAW;AACzB,cAAc,eAAe;AAC7B,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,aAAa;AAC3B,cAAc,YAAY;AAC1B,cAAc,gBAAgB;AAC9B,cAAc,oBAAoB;AAClC,cAAc,kBAAkB","ignoreList":[]}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/types/resources/index.ts"],"sourcesContent":["export * from './analytics_metadata'\nexport * from './direct_message_affiliations'\nexport * from './direct_message_candidate'\nexport * from './conversation'\nexport * from './conversation_membership'\nexport * from './conversation_validate'\nexport * from './member'\nexport * from './message'\nexport * from './oauth_token'\nexport * from './person'\nexport * from './groups'\nexport * from './app_grant'\nexport * from './services'\nexport * from './organization'\nexport * from './group_membership'\nexport * from './group_resource'\nexport * from './search_result'\n"],"mappings":"AAAA,cAAc,sBAAsB;AACpC,cAAc,+BAA+B;AAC7C,cAAc,4BAA4B;AAC1C,cAAc,gBAAgB;AAC9B,cAAc,2BAA2B;AACzC,cAAc,yBAAyB;AACvC,cAAc,UAAU;AACxB,cAAc,WAAW;AACzB,cAAc,eAAe;AAC7B,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,aAAa;AAC3B,cAAc,YAAY;AAC1B,cAAc,gBAAgB;AAC9B,cAAc,oBAAoB;AAClC,cAAc,kBAAkB;AAChC,cAAc,iBAAiB","ignoreList":[]}

package/build/types/resources/search_result.d.ts

@@ -0,0 +1,29 @@
+import type { ConversationAvatarData } from './conversation';
+interface BaseSearchResultResource {
+    id: string;
+    title: string;
+    url: string;
+}
+export interface SnippetSegment {
+    text: string;
+    match: boolean;
+}
+export interface ConversationSearchResultResource extends BaseSearchResultResource {
+    type: 'conversation';
+    extra: {
+        avatar: ConversationAvatarData;
+    };
+}
+export interface MessageSearchResultResource extends BaseSearchResultResource {
+    type: 'message';
+    extra: {
+        conversationId: number;
+        authorName: string;
+        snippet: SnippetSegment[];
+        createdAt: string;
+        avatar: ConversationAvatarData;
+    };
+}
+export type SearchResultResource = ConversationSearchResultResource | MessageSearchResultResource;
+export {};
+//# sourceMappingURL=search_result.d.ts.map

package/build/types/resources/search_result.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search_result.d.ts","sourceRoot":"","sources":["../../../src/types/resources/search_result.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAA;AAE5D,UAAU,wBAAwB;IAChC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;CACZ;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,OAAO,CAAA;CACf;AAED,MAAM,WAAW,gCAAiC,SAAQ,wBAAwB;IAChF,IAAI,EAAE,cAAc,CAAA;IACpB,KAAK,EAAE;QACL,MAAM,EAAE,sBAAsB,CAAA;KAC/B,CAAA;CACF;AAED,MAAM,WAAW,2BAA4B,SAAQ,wBAAwB;IAC3E,IAAI,EAAE,SAAS,CAAA;IACf,KAAK,EAAE;QACL,cAAc,EAAE,MAAM,CAAA;QACtB,UAAU,EAAE,MAAM,CAAA;QAClB,OAAO,EAAE,cAAc,EAAE,CAAA;QACzB,SAAS,EAAE,MAAM,CAAA;QACjB,MAAM,EAAE,sBAAsB,CAAA;KAC/B,CAAA;CACF;AAED,MAAM,MAAM,oBAAoB,GAAG,gCAAgC,GAAG,2BAA2B,CAAA"}

package/build/types/resources/search_result.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=search_result.js.map

package/build/types/resources/search_result.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search_result.js","names":[],"sources":["../../../src/types/resources/search_result.ts"],"sourcesContent":["import type { ConversationAvatarData } from './conversation'\n\ninterface BaseSearchResultResource {\n  id: string\n  title: string\n  url: string\n}\n\nexport interface SnippetSegment {\n  text: string\n  match: boolean\n}\n\nexport interface ConversationSearchResultResource extends BaseSearchResultResource {\n  type: 'conversation'\n  extra: {\n    avatar: ConversationAvatarData\n  }\n}\n\nexport interface MessageSearchResultResource extends BaseSearchResultResource {\n  type: 'message'\n  extra: {\n    conversationId: number\n    authorName: string\n    snippet: SnippetSegment[]\n    createdAt: string\n    avatar: ConversationAvatarData\n  }\n}\n\nexport type SearchResultResource = ConversationSearchResultResource | MessageSearchResultResource\n"],"mappings":"","ignoreList":[]}

package/build/utils/request/get_search_results.d.ts

@@ -0,0 +1,13 @@
+export declare const SEARCH_RESULTS_PAGE_SIZE = 20;
+export declare const getSearchResultsRequestArgs: (term: string) => {
+    url: string;
+    data: {
+        q: string;
+        perPage: number;
+        fields: {
+            SearchResult: string[];
+        };
+    };
+};
+export declare const getSearchResultsQueryKey: (term: string) => import("../..").RequestQueryKey;
+//# sourceMappingURL=get_search_results.d.ts.map

package/build/utils/request/get_search_results.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get_search_results.d.ts","sourceRoot":"","sources":["../../../src/utils/request/get_search_results.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,wBAAwB,KAAK,CAAA;AAE1C,eAAO,MAAM,2BAA2B,GAAI,MAAM,MAAM;;;;;;;;;CAavD,CAAA;AAED,eAAO,MAAM,wBAAwB,GAAI,MAAM,MAAM,oCAGpD,CAAA"}

package/build/utils/request/get_search_results.js

@@ -0,0 +1,20 @@
+import { getRequestQueryKey } from '../../hooks/use_suspense_api';
+export const SEARCH_RESULTS_PAGE_SIZE = 20;
+export const getSearchResultsRequestArgs = term => {
+  const url = '/search_results';
+  return {
+    url,
+    data: {
+      q: term,
+      perPage: SEARCH_RESULTS_PAGE_SIZE,
+      fields: {
+        SearchResult: ['type', 'title', 'url', 'extra']
+      }
+    }
+  };
+};
+export const getSearchResultsQueryKey = term => {
+  const requestArgs = getSearchResultsRequestArgs(term);
+  return getRequestQueryKey(requestArgs);
+};
+//# sourceMappingURL=get_search_results.js.map

package/build/utils/request/get_search_results.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get_search_results.js","names":["getRequestQueryKey","SEARCH_RESULTS_PAGE_SIZE","getSearchResultsRequestArgs","term","url","data","q","perPage","fields","SearchResult","getSearchResultsQueryKey","requestArgs"],"sources":["../../../src/utils/request/get_search_results.ts"],"sourcesContent":["import { getRequestQueryKey } from '../../hooks/use_suspense_api'\n\nexport const SEARCH_RESULTS_PAGE_SIZE = 20\n\nexport const getSearchResultsRequestArgs = (term: string) => {\n  const url = '/search_results'\n\n  return {\n    url,\n    data: {\n      q: term,\n      perPage: SEARCH_RESULTS_PAGE_SIZE,\n      fields: {\n        SearchResult: ['type', 'title', 'url', 'extra'],\n      },\n    },\n  }\n}\n\nexport const getSearchResultsQueryKey = (term: string) => {\n  const requestArgs = getSearchResultsRequestArgs(term)\n  return getRequestQueryKey(requestArgs)\n}\n"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,8BAA8B;AAEjE,OAAO,MAAMC,wBAAwB,GAAG,EAAE;AAE1C,OAAO,MAAMC,2BAA2B,GAAIC,IAAY,IAAK;EAC3D,MAAMC,GAAG,GAAG,iBAAiB;EAE7B,OAAO;IACLA,GAAG;IACHC,IAAI,EAAE;MACJC,CAAC,EAAEH,IAAI;MACPI,OAAO,EAAEN,wBAAwB;MACjCO,MAAM,EAAE;QACNC,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO;MAChD;IACF;EACF,CAAC;AACH,CAAC;AAED,OAAO,MAAMC,wBAAwB,GAAIP,IAAY,IAAK;EACxD,MAAMQ,WAAW,GAAGT,2BAA2B,CAACC,IAAI,CAAC;EACrD,OAAOH,kBAAkB,CAACW,WAAW,CAAC;AACxC,CAAC","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "4.3.0-rc.5",
+  "version": "4.3.0-rc.7",
   "description": "",
   "repository": {
     "type": "git",
@@ -84,5 +84,5 @@
     "sf-symbols-typescript": "^2.2.0",
     "typescript": "~6.0.3"
   },
-  "gitHead": "8d02d907c0983af0f216cfa4a11b4b8698a1eb16"
+  "gitHead": "0709c9d5b579af4f138ca1fd067b4e7f180768a6"
 }

package/src/components/display/conversation_avatar.tsx

@@ -1,21 +1,12 @@
 import React from 'react'
 import type { ViewStyle } from 'react-native'
-import type { ConversationResource } from '../../types'
+import type { ConversationAvatarData } from '../../types'
 import AvatarPrimitive, { type AvatarRootProps } from '../primitive/avatar_primitive'
 import { AvatarGroup } from './avatar_group'
 import { EmojiAvatar } from './emoji_avatar'
 import { type IconString } from './icon'
 import { IconAvatar } from './icon_avatar'
 
-type ConversationAvatarData = Pick<
-  ConversationResource,
-  | 'customAvatarType'
-  | 'customAvatarKey'
-  | 'customAvatarColor'
-  | 'customAvatarImageUrl'
-  | 'previewAvatarUrls'
->
-
 type ResolvedAvatar =
   | { kind: 'image'; url: string }
   | { kind: 'icon'; iconKey: string; color: string | null }

package/src/navigation/index.tsx

@@ -72,6 +72,7 @@ import { NotFound } from '../screens/not_found'
 import { NotificationSettingsScreen } from '../screens/notification_settings_screen'
 import { PreferredAppSelectionScreen } from '../screens/preferred_app_selection_screen'
 import { ReactionsScreen, ReactionsScreenOptions } from '../screens/reactions_screen'
+import { SearchScreen, SearchScreenOptions } from '../screens/search/search_screen'
 import { SendGiphyScreen, SendGiphyScreenOptions } from '../screens/send_giphy_screen'
 import { SettingsScreen } from '../screens/settings_screen'
 import {
@@ -186,6 +187,10 @@ export const ChatStack = createNativeStackNavigator({
       screen: ConversationFiltersScreen,
       options: ConversationFiltersScreenOptions,
     },
+    Search: {
+      screen: SearchScreen,
+      options: SearchScreenOptions,
+    },
     Conversation: {
       screen: ConversationScreen,
       options: ({ route, navigation }) =>

package/src/screens/conversations/components/__tests__/search_list_header_component.test.tsx

@@ -0,0 +1,62 @@
+import { fireEvent, render } from '@testing-library/react-native'
+import React from 'react'
+import { SearchListHeaderComponent } from '../search_list_header_component'
+
+const mockNavigate = jest.fn()
+
+jest.mock('@react-navigation/native', () => ({
+  ...jest.requireActual('@react-navigation/native'),
+  useNavigation: () => ({ setParams: jest.fn(), navigate: mockNavigate }),
+  useRoute: () => ({ params: {} }),
+}))
+
+jest.mock('../../../../hooks/use_groups', () => ({
+  useCanDisplayGroups: () => true,
+}))
+jest.mock('../../../../hooks/use_direct_messages_eligible', () => ({
+  useDirectMessagesEligible: () => true,
+}))
+jest.mock('../../../../hooks/use_has_direct_messages', () => ({
+  useHasDirectMessages: () => true,
+}))
+jest.mock('../../../../hooks/use_chat_permissions', () => ({
+  useCanCreateConversations: () => true,
+}))
+jest.mock('../../../../hooks/use_new_conversation_entry', () => ({
+  useNewConversationEntry: () => 'select_type',
+}))
+jest.mock('../../../../hooks/use_current_person', () => ({
+  useCurrentPersonCache: () => ({ update: jest.fn() }),
+}))
+jest.mock('../../../../hooks/use_conversations_actions', () => ({
+  useMarkAllRead: () => ({ markAllRead: jest.fn(), isPending: false }),
+}))
+jest.mock('../../../../hooks/use_new_conversation_from_filter', () => ({
+  useNewConversationFromFilter: () => undefined,
+}))
+jest.mock('../../../../hooks/use_api', () => ({
+  useApiGet: () => ({ data: undefined }),
+}))
+
+describe('SearchListHeaderComponent search button', () => {
+  beforeEach(() => mockNavigate.mockClear())
+
+  it('navigates to Search on press', () => {
+    const view = render(<SearchListHeaderComponent />)
+
+    fireEvent.press(view.getByTestId('conversations-search-button'))
+
+    expect(mockNavigate).toHaveBeenCalledTimes(1)
+    expect(mockNavigate).toHaveBeenCalledWith('Search')
+  })
+
+  it('renders the search button after the other actions', () => {
+    const view = render(<SearchListHeaderComponent />)
+
+    const buttons = view.getAllByRole('button').map(button => button.props.accessibilityLabel)
+
+    expect(buttons.indexOf('Search')).toBeGreaterThanOrEqual(0)
+    expect(buttons.indexOf('Search')).toBeGreaterThan(buttons.indexOf('Chat settings'))
+    expect(buttons.indexOf('Search')).toBeGreaterThan(buttons.indexOf('New conversation'))
+  })
+})

package/src/screens/conversations/components/search_list_header_component.tsx

@@ -110,6 +110,10 @@ export const SearchListHeaderComponent = () => {
     [navigation]
   )
 
+  const handleSearch = useCallback(() => {
+    navigation.navigate('Search')
+  }, [navigation])
+
   const handleChatSettings = useCallback(() => {
     navigation.navigate('ChatSettings', {})
   }, [navigation])
@@ -188,6 +192,13 @@ export const SearchListHeaderComponent = () => {
               maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
             />
           )}
+          <ListHeaderActionButton
+            name="general.search"
+            onPress={handleSearch}
+            accessibilityLabel="Search"
+            testID="conversations-search-button"
+            maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+          />
           {shouldShowHeaderFiltersButton && <ToggleButton {...moreFiltersButtonProps} />}
         </View>
       </View>

package/src/screens/search/search_screen.tsx

@@ -0,0 +1,29 @@
+import { ParamListBase } from '@react-navigation/native'
+import {
+  NativeStackNavigationOptions,
+  NativeStackScreenProps,
+} from '@react-navigation/native-stack'
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import {
+  composeOptions,
+  withMinimalBack,
+} from '../../components/display/platform_modal_header_buttons'
+
+export const SearchScreenOptions = ({
+  navigation,
+}: NativeStackScreenProps<ParamListBase>): NativeStackNavigationOptions =>
+  composeOptions(
+    { title: 'Search', animation: 'fade' },
+    withMinimalBack({ onPress: () => navigation.goBack() })
+  )
+
+export function SearchScreen() {
+  return <View style={styles.container} testID="search-screen" />
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+})

package/src/types/resources/conversation.ts

@@ -46,3 +46,12 @@ export interface ConversationResource {
   unreadReaction: boolean
   updatedAt: string
 }
+
+export type ConversationAvatarData = Pick<
+  ConversationResource,
+  | 'customAvatarType'
+  | 'customAvatarKey'
+  | 'customAvatarColor'
+  | 'customAvatarImageUrl'
+  | 'previewAvatarUrls'
+>

package/src/types/resources/index.ts

@@ -14,3 +14,4 @@ export * from './services'
 export * from './organization'
 export * from './group_membership'
 export * from './group_resource'
+export * from './search_result'

package/src/types/resources/search_result.ts

@@ -0,0 +1,32 @@
+import type { ConversationAvatarData } from './conversation'
+
+interface BaseSearchResultResource {
+  id: string
+  title: string
+  url: string
+}
+
+export interface SnippetSegment {
+  text: string
+  match: boolean
+}
+
+export interface ConversationSearchResultResource extends BaseSearchResultResource {
+  type: 'conversation'
+  extra: {
+    avatar: ConversationAvatarData
+  }
+}
+
+export interface MessageSearchResultResource extends BaseSearchResultResource {
+  type: 'message'
+  extra: {
+    conversationId: number
+    authorName: string
+    snippet: SnippetSegment[]
+    createdAt: string
+    avatar: ConversationAvatarData
+  }
+}
+
+export type SearchResultResource = ConversationSearchResultResource | MessageSearchResultResource

package/src/utils/__tests__/get_search_results.test.ts

@@ -0,0 +1,24 @@
+import {
+  getSearchResultsQueryKey,
+  getSearchResultsRequestArgs,
+} from '../request/get_search_results'
+
+describe('getSearchResultsRequestArgs', () => {
+  it('requests the first page of search results for the term', () => {
+    expect(getSearchResultsRequestArgs('potluck')).toEqual({
+      url: '/search_results',
+      data: {
+        q: 'potluck',
+        perPage: 20,
+        fields: { SearchResult: ['type', 'title', 'url', 'extra'] },
+      },
+    })
+  })
+})
+
+describe('getSearchResultsQueryKey', () => {
+  it('changes with the term', () => {
+    expect(getSearchResultsQueryKey('potluck')).not.toEqual(getSearchResultsQueryKey('picnic'))
+    expect(getSearchResultsQueryKey('potluck')).toEqual(getSearchResultsQueryKey('potluck'))
+  })
+})

package/src/utils/request/get_search_results.ts

@@ -0,0 +1,23 @@
+import { getRequestQueryKey } from '../../hooks/use_suspense_api'
+
+export const SEARCH_RESULTS_PAGE_SIZE = 20
+
+export const getSearchResultsRequestArgs = (term: string) => {
+  const url = '/search_results'
+
+  return {
+    url,
+    data: {
+      q: term,
+      perPage: SEARCH_RESULTS_PAGE_SIZE,
+      fields: {
+        SearchResult: ['type', 'title', 'url', 'extra'],
+      },
+    },
+  }
+}
+
+export const getSearchResultsQueryKey = (term: string) => {
+  const requestArgs = getSearchResultsRequestArgs(term)
+  return getRequestQueryKey(requestArgs)
+}