@planningcenter/chat-react-native 4.0.1-qa-staging.2 → 4.0.1-qa-staging.4

package/build/utils/time.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"time.d.ts","sourceRoot":"","sources":["../../src/utils/time.ts"],"names":[],"mappings":"AAAA,KAAK,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAA;AAE/C,wBAAgB,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,MAAM,CAS1D;AAED,eAAO,MAAM,YAAY,QAAqB,CAAA;AAC9C,eAAO,MAAM,YAAY,QAAqB,CAAA;AAC9C,eAAO,MAAM,cAAc,QAAsB,CAAA;AACjD,eAAO,MAAM,QAAQ,QAAmB,CAAA"}
+{"version":3,"file":"time.d.ts","sourceRoot":"","sources":["../../src/utils/time.ts"],"names":[],"mappings":"AAAA,KAAK,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAA;AAE/C,wBAAgB,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,MAAM,CAS1D;AAED,eAAO,MAAM,YAAY,QAAqB,CAAA;AAC9C,eAAO,MAAM,UAAU,QAAqB,CAAA;AAC5C,eAAO,MAAM,YAAY,QAAqB,CAAA;AAC9C,eAAO,MAAM,cAAc,QAAsB,CAAA;AACjD,eAAO,MAAM,QAAQ,QAAmB,CAAA"}

package/build/utils/time.js

@@ -9,6 +9,7 @@ export function toMs(value, unit) {
   }
 }
 export const FIVE_SECONDS = toMs(5, 'seconds');
+export const ONE_MINUTE = toMs(1, 'minutes');
 export const FIVE_MINUTES = toMs(5, 'minutes');
 export const THIRTY_MINUTES = toMs(30, 'minutes');
 export const ONE_HOUR = toMs(1, 'hours');

package/build/utils/time.js.map

@@ -1 +1 @@
-{"version":3,"file":"time.js","names":["toMs","value","unit","FIVE_SECONDS","FIVE_MINUTES","THIRTY_MINUTES","ONE_HOUR"],"sources":["../../src/utils/time.ts"],"sourcesContent":["type TimeUnit = 'hours' | 'minutes' | 'seconds'\n\nexport function toMs(value: number, unit: TimeUnit): number {\n  switch (unit) {\n    case 'hours':\n      return value * 60 * 60 * 1000\n    case 'minutes':\n      return value * 60 * 1000\n    case 'seconds':\n      return value * 1000\n  }\n}\n\nexport const FIVE_SECONDS = toMs(5, 'seconds')\nexport const FIVE_MINUTES = toMs(5, 'minutes')\nexport const THIRTY_MINUTES = toMs(30, 'minutes')\nexport const ONE_HOUR = toMs(1, 'hours')\n"],"mappings":"AAEA,OAAO,SAASA,IAAIA,CAACC,KAAa,EAAEC,IAAc,EAAU;EAC1D,QAAQA,IAAI;IACV,KAAK,OAAO;MACV,OAAOD,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI;IAC/B,KAAK,SAAS;MACZ,OAAOA,KAAK,GAAG,EAAE,GAAG,IAAI;IAC1B,KAAK,SAAS;MACZ,OAAOA,KAAK,GAAG,IAAI;EACvB;AACF;AAEA,OAAO,MAAME,YAAY,GAAGH,IAAI,CAAC,CAAC,EAAE,SAAS,CAAC;AAC9C,OAAO,MAAMI,YAAY,GAAGJ,IAAI,CAAC,CAAC,EAAE,SAAS,CAAC;AAC9C,OAAO,MAAMK,cAAc,GAAGL,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC;AACjD,OAAO,MAAMM,QAAQ,GAAGN,IAAI,CAAC,CAAC,EAAE,OAAO,CAAC","ignoreList":[]}
+{"version":3,"file":"time.js","names":["toMs","value","unit","FIVE_SECONDS","ONE_MINUTE","FIVE_MINUTES","THIRTY_MINUTES","ONE_HOUR"],"sources":["../../src/utils/time.ts"],"sourcesContent":["type TimeUnit = 'hours' | 'minutes' | 'seconds'\n\nexport function toMs(value: number, unit: TimeUnit): number {\n  switch (unit) {\n    case 'hours':\n      return value * 60 * 60 * 1000\n    case 'minutes':\n      return value * 60 * 1000\n    case 'seconds':\n      return value * 1000\n  }\n}\n\nexport const FIVE_SECONDS = toMs(5, 'seconds')\nexport const ONE_MINUTE = toMs(1, 'minutes')\nexport const FIVE_MINUTES = toMs(5, 'minutes')\nexport const THIRTY_MINUTES = toMs(30, 'minutes')\nexport const ONE_HOUR = toMs(1, 'hours')\n"],"mappings":"AAEA,OAAO,SAASA,IAAIA,CAACC,KAAa,EAAEC,IAAc,EAAU;EAC1D,QAAQA,IAAI;IACV,KAAK,OAAO;MACV,OAAOD,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI;IAC/B,KAAK,SAAS;MACZ,OAAOA,KAAK,GAAG,EAAE,GAAG,IAAI;IAC1B,KAAK,SAAS;MACZ,OAAOA,KAAK,GAAG,IAAI;EACvB;AACF;AAEA,OAAO,MAAME,YAAY,GAAGH,IAAI,CAAC,CAAC,EAAE,SAAS,CAAC;AAC9C,OAAO,MAAMI,UAAU,GAAGJ,IAAI,CAAC,CAAC,EAAE,SAAS,CAAC;AAC5C,OAAO,MAAMK,YAAY,GAAGL,IAAI,CAAC,CAAC,EAAE,SAAS,CAAC;AAC9C,OAAO,MAAMM,cAAc,GAAGN,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC;AACjD,OAAO,MAAMO,QAAQ,GAAGP,IAAI,CAAC,CAAC,EAAE,OAAO,CAAC","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "4.0.1-qa-staging.2",
+  "version": "4.0.1-qa-staging.4",
   "description": "",
   "repository": {
     "type": "git",
@@ -33,7 +33,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^7.2.0",
     "@fortawesome/react-native-fontawesome": "^0.3.2",
-    "@planningcenter/emoji-keyboard": "4.0.1-qa-staging.2",
+    "@planningcenter/emoji-keyboard": "4.0.1-qa-staging.4",
     "lodash-inflection": "^1.5.0"
   },
   "peerDependencies": {
@@ -84,5 +84,5 @@
     "sf-symbols-typescript": "^2.2.0",
     "typescript": "~6.0.3"
   },
-  "gitHead": "092bd6133bddee97b0fbdaab954d5a0984988a56"
+  "gitHead": "a7faa8fb4d6db21faac3abab923e22e66ffbbb70"
 }

package/src/__tests__/hooks/use_features.test.ts

@@ -0,0 +1,61 @@
+import { buildTestQueryClient } from '../../__utils__/query_client'
+import type { ApiClient } from '../../hooks/use_api_client'
+import { featuresQueryOptions } from '../../hooks/use_features'
+
+const features = {
+  data: [{ type: 'Feature', id: '1', name: 'ROLLOUT_search', enabled: true }],
+  links: {},
+  meta: { count: 1, totalCount: 1 },
+}
+
+const buildClient = (get: jest.Mock) => ({ chat: { get } }) as unknown as ApiClient
+
+const fetchTwice = async (get: jest.Mock, secondsBetween: number) => {
+  const queryClient = buildTestQueryClient()
+  const options = featuresQueryOptions(buildClient(get))
+
+  await queryClient.fetchQuery(options)
+  jest.advanceTimersByTime(secondsBetween * 1000)
+  await queryClient.fetchQuery(options)
+}
+
+describe('featuresQueryOptions', () => {
+  beforeEach(() => {
+    jest.useFakeTimers()
+  })
+
+  afterEach(() => {
+    jest.useRealTimers()
+  })
+
+  it('keeps successful flags fresh for five minutes', async () => {
+    const get = jest.fn().mockResolvedValue(features)
+
+    await fetchTwice(get, 4 * 60)
+
+    expect(get).toHaveBeenCalledTimes(1)
+  })
+
+  it('refetches right away after a failed fetch', async () => {
+    const get = jest.fn().mockRejectedValue({ status: 503 })
+
+    await fetchTwice(get, 1)
+
+    expect(get).toHaveBeenCalledTimes(2)
+  })
+
+  it('backs off for a minute after a 429', async () => {
+    const get = jest.fn().mockRejectedValue({ status: 429 })
+    const queryClient = buildTestQueryClient()
+    const options = featuresQueryOptions(buildClient(get))
+
+    await queryClient.fetchQuery(options)
+    jest.advanceTimersByTime(30 * 1000)
+    await queryClient.fetchQuery(options)
+    expect(get).toHaveBeenCalledTimes(1)
+
+    jest.advanceTimersByTime(31 * 1000)
+    await queryClient.fetchQuery(options)
+    expect(get).toHaveBeenCalledTimes(2)
+  })
+})

package/src/components/conversation/message.tsx

@@ -107,9 +107,14 @@ export const Message = memo(function MessageRow({
   const messageIsReplyLabel = replyToReplyRootMessage ? 'Reply' : ''
   const attachmentLabel = some(attachments) ? pluralize(attachments.length, 'attachment') : ''
   const replyCountLabel = isReplyRootMessage ? replyCountText : ''
+  const saveStatusLabel = error
+    ? `Failed to ${isPersisted ? 'edit' : 'send'}`
+    : pending
+      ? messagePendingLabel
+      : ''
   const accessibilityLabel = `${author?.name || ''} ${messageIsReplyLabel} ${attachmentLabel} ${
     messageText || ''
-  } ${timestamp} ${replyCountLabel}`
+  } ${saveStatusLabel} ${timestamp} ${replyCountLabel}`
 
   useEffect(() => {
     if (pending) {

package/src/contexts/api_provider.tsx

@@ -10,6 +10,7 @@ import { ViewProps } from 'react-native'
 import { ApiClient, useApiClient } from '../hooks/use_api_client'
 import { useAppState } from '../hooks/use_app_state'
 import { appGrantsRequestArgs } from '../hooks/use_chat_permissions'
+import { featuresQueryOptions } from '../hooks/use_features'
 import { getRequestQueryKey, RequestQueryKey } from '../hooks/use_suspense_api'
 import { emitAuthRefresh } from '../utils/auth_events'
 import { ResponseError } from '../utils/response_error'
@@ -81,10 +82,13 @@ export function ApiProvider({ children }: ViewProps) {
 // This needs to live in the provider so that it can access the api client
 // and the chat query client
 const PrefetchQueries = () => {
+  const client = useApiClient()
+
   usePrefetchQuery({
     queryKey: getRequestQueryKey(appGrantsRequestArgs),
     queryFn: defaultQueryFn,
   })
+  usePrefetchQuery(featuresQueryOptions(client))
 
   return null
 }

package/src/hooks/use_features.ts

@@ -1,26 +1,20 @@
-import { useSuspenseQuery } from '@tanstack/react-query'
+import { queryOptions, useSuspenseQuery } from '@tanstack/react-query'
 import { useCallback } from 'react'
 import { ApiCollection } from '../types'
 import type { FeatureResource } from '../types/resources/feature_resource'
 import { getFeaturesRequestArgs, getFeaturesQueryKey } from '../utils/request/get_features'
-import { FIVE_MINUTES } from '../utils/time'
-import { useApiClient } from './use_api_client'
+import { FIVE_MINUTES, ONE_MINUTE } from '../utils/time'
+import { ApiClient, useApiClient } from './use_api_client'
 
 type FeatureName = (typeof availableFeatures)[keyof typeof availableFeatures]
 
+type FeaturesCollection = ApiCollection<FeatureResource> & {
+  failure?: { status?: number }
+}
+
 export function useFeatures() {
   const apiClient = useApiClient()
-  const requestArgs = getFeaturesRequestArgs()
-
-  const { data } = useSuspenseQuery({
-    queryKey: getFeaturesQueryKey(),
-    queryFn: () => {
-      return apiClient.chat
-        .get<ApiCollection<FeatureResource>>(requestArgs)
-        .catch(() => stableEmptyFeatures)
-    },
-    staleTime: FIVE_MINUTES,
-  })
+  const { data } = useSuspenseQuery(featuresQueryOptions(apiClient))
 
   const features = data.data
 
@@ -36,6 +30,23 @@ export function useFeatures() {
   }
 }
 
+export const featuresQueryOptions = (apiClient: ApiClient) =>
+  queryOptions({
+    queryKey: getFeaturesQueryKey(),
+    queryFn: (): Promise<FeaturesCollection> => {
+      return apiClient.chat
+        .get<ApiCollection<FeatureResource>>(getFeaturesRequestArgs())
+        .catch(error => ({ ...stableEmptyFeatures, failure: { status: error?.status } }))
+    },
+    staleTime: query => {
+      const failure = query.state.data?.failure
+      if (!failure) return FIVE_MINUTES
+
+      return failure.status === 429 ? ONE_MINUTE : 0
+    },
+    gcTime: Infinity,
+  })
+
 export const availableFeatures = {
   gender_specific_conversations: 'ROLLOUT_gender_specific_conversations',
   message_reporting: 'ROLLOUT_MOBILE_message_reporting',
@@ -44,6 +55,7 @@ export const availableFeatures = {
   conversation_safety_lock: 'ROLLOUT_conversation_safety_lock',
   video_moderation: 'ROLLOUT_MOBILE_video_moderation',
   dm_search_clear_fix: 'ROLLOUT_MOBILE_dm_search_clear_fix',
+  search: 'ROLLOUT_search',
 } as const satisfies Record<string, `ROLLOUT_${string}`>
 
 const stableEmptyFeatures: ApiCollection<FeatureResource> = {

package/src/screens/conversation_new/components/groups_form.tsx

@@ -212,9 +212,11 @@ function FormContent({
       </View>
       <Divider />
       <Pressable style={styles.titleSection} onPress={handleTitleSectionPress}>
-        <Heading variant="h3">Title</Heading>
+        <Heading variant="h3">
+          Title <Text style={styles.required}>*</Text>
+        </Heading>
         <AutoFocusAwareTextInput
-          placeholder="Topic of conversation (required)"
+          placeholder="Topic of conversation"
           value={title}
           onChangeText={setTitle}
           style={styles.titleInput}
@@ -291,6 +293,9 @@ const useStyles = () => {
       fontSize: 18,
       color: colors.textColorDefaultPrimary,
     },
+    required: {
+      color: colors.statusErrorText,
+    },
     memberSection: {
       padding: sectionPadding,
       paddingBottom: 0,

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

@@ -0,0 +1,32 @@
+import { fireEvent, render } from '@testing-library/react-native'
+import React from 'react'
+import { ChatGroupBadge } from '../chat_group_badge'
+
+const mockSetParams = jest.fn()
+
+jest.mock('@react-navigation/native', () => ({
+  ...jest.requireActual('@react-navigation/native'),
+  useNavigation: () => ({ setParams: mockSetParams }),
+  useRoute: () => ({
+    params: { chat_group_graph_id: 'Groups/Group/1', title: 'Waco Family Group' },
+  }),
+}))
+
+jest.mock('../../../../hooks/use_api', () => ({
+  useApiGet: () => ({ data: { name: 'Waco Family Group' } }),
+}))
+
+describe('ChatGroupBadge', () => {
+  it('clears the group filter and its title when dismissed', () => {
+    const view = render(<ChatGroupBadge rowPaddingHorizontal={16} />)
+
+    fireEvent.press(view.getByText('Waco Family Group'))
+
+    expect(mockSetParams).toHaveBeenCalledTimes(1)
+    expect(mockSetParams.mock.calls[0][0]).toStrictEqual({
+      title: undefined,
+      chat_group_graph_id: undefined,
+      group_source_app_name: undefined,
+    })
+  })
+})

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

@@ -0,0 +1,66 @@
+import { fireEvent, render } from '@testing-library/react-native'
+import React from 'react'
+import { ListHeaderComponent } from '../list_header_component'
+
+const mockSetParams = jest.fn()
+
+jest.mock('@react-navigation/native', () => ({
+  ...jest.requireActual('@react-navigation/native'),
+  useNavigation: () => ({ setParams: mockSetParams, navigate: jest.fn() }),
+  useRoute: () => ({
+    params: { chat_group_graph_id: 'Groups/Group/1', title: 'Waco Family Group' },
+  }),
+}))
+
+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: () => false,
+}))
+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 }),
+}))
+
+const clearedFilter = {
+  title: undefined,
+  chat_group_graph_id: undefined,
+  group_source_app_name: undefined,
+  show_direct_messages: undefined,
+}
+
+describe('ListHeaderComponent filter toggles', () => {
+  beforeEach(() => mockSetParams.mockClear())
+
+  it.each([
+    ['Show all conversations', clearedFilter],
+    ['Filter to group conversations', { ...clearedFilter, group_source_app_name: 'Groups' }],
+    ['Filter to team conversations', { ...clearedFilter, group_source_app_name: 'Services' }],
+    ['Filter to direct message conversations', { ...clearedFilter, show_direct_messages: true }],
+  ])('%s drops the group title along with the group filter', (label, expected) => {
+    const view = render(<ListHeaderComponent />)
+
+    fireEvent.press(view.getByLabelText(label))
+
+    expect(mockSetParams).toHaveBeenCalledTimes(1)
+    expect(mockSetParams.mock.calls[0][0]).toStrictEqual(expected)
+  })
+})

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

@@ -18,6 +18,7 @@ export const ChatGroupBadge = ({ rowPaddingHorizontal }: { rowPaddingHorizontal:
 
   const handleBadgePress = useCallback(() => {
     navigation.setParams({
+      title: undefined,
       chat_group_graph_id: undefined,
       group_source_app_name: undefined,
     })

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

@@ -17,6 +17,7 @@ import { useNewConversationFromFilter } from '../../../hooks/use_new_conversatio
 import { GraphId } from '../../../types/resources/group_resource'
 import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../../utils'
 import { Haptic } from '../../../utils/native_adapters'
+import { ConversationFiltersParams } from '../../conversation_filters/screen_props'
 import { ConversationsScreenProps } from '../conversations_screen'
 import { ChatGroupBadge } from './chat_group_badge'
 import { ListHeaderActionButton } from './list_header_action_button'
@@ -96,6 +97,19 @@ export const ListHeaderComponent = () => {
     }
   }, [navigation, route.params, entryMode, newConversationFromFilter])
 
+  const handleSetFilter = useCallback(
+    (params: ConversationFiltersParams) => {
+      navigation.setParams({
+        title: undefined,
+        chat_group_graph_id: undefined,
+        group_source_app_name: undefined,
+        show_direct_messages: undefined,
+        ...params,
+      })
+    },
+    [navigation]
+  )
+
   const handleChatSettings = useCallback(() => {
     navigation.navigate('ChatSettings', {})
   }, [navigation])
@@ -187,13 +201,7 @@ export const ListHeaderComponent = () => {
           <ToggleButton
             title={FilterTypes.All}
             active={active === FilterTypes.All}
-            onPress={() =>
-              navigation.setParams({
-                chat_group_graph_id: undefined,
-                group_source_app_name: undefined,
-                show_direct_messages: undefined,
-              })
-            }
+            onPress={() => handleSetFilter({})}
             accessibilityLabel="Show all conversations"
             style={styles.filterButton}
           />
@@ -201,13 +209,7 @@ export const ListHeaderComponent = () => {
             <ToggleButton
               title={FilterTypes.Groups}
               active={active === FilterTypes.Groups}
-              onPress={() =>
-                navigation.setParams({
-                  chat_group_graph_id: undefined,
-                  group_source_app_name: 'Groups',
-                  show_direct_messages: undefined,
-                })
-              }
+              onPress={() => handleSetFilter({ group_source_app_name: 'Groups' })}
               accessibilityLabel="Filter to group conversations"
               style={styles.filterButton}
             />
@@ -216,13 +218,7 @@ export const ListHeaderComponent = () => {
             <ToggleButton
               title={FilterTypes.Teams}
               active={active === FilterTypes.Teams}
-              onPress={() =>
-                navigation.setParams({
-                  chat_group_graph_id: undefined,
-                  group_source_app_name: 'Services',
-                  show_direct_messages: undefined,
-                })
-              }
+              onPress={() => handleSetFilter({ group_source_app_name: 'Services' })}
               accessibilityLabel="Filter to team conversations"
               style={styles.filterButton}
             />
@@ -231,13 +227,7 @@ export const ListHeaderComponent = () => {
             <ToggleButton
               title={FilterTypes.DMs}
               active={active === FilterTypes.DMs}
-              onPress={() =>
-                navigation.setParams({
-                  chat_group_graph_id: undefined,
-                  group_source_app_name: undefined,
-                  show_direct_messages: true,
-                })
-              }
+              onPress={() => handleSetFilter({ show_direct_messages: true })}
               accessibilityLabel="Filter to direct message conversations"
               style={styles.filterButton}
             />