@planningcenter/chat-react-native 3.41.0-rc.0 → 3.41.1-qa-799.0

package/src/contexts/api_provider.tsx

@@ -12,6 +12,7 @@ import { useAppState } from '../hooks/use_app_state'
 import { appGrantsRequestArgs } from '../hooks/use_chat_permissions'
 import { getRequestQueryKey, RequestQueryKey } from '../hooks/use_suspense_api'
 import { emitAuthRefresh } from '../utils/auth_events'
+import { ResponseError } from '../utils/response_error'
 import { ChatContext, ChatContextValue } from './chat_context'
 
 let apiClient: ApiClient | undefined
@@ -26,11 +27,21 @@ const defaultQueryFn = ({ queryKey }: { queryKey: QueryKey }) => {
   return apiClient[app].get({ url, data, headers })
 }
 
+const configuredRetry = (failureCount: number, error: any) => {
+  if (is429Error(error)) return false
+
+  return failureCount < 3
+}
+
+const is429Error = (error: any): boolean => {
+  return error instanceof ResponseError && error.status === 429
+}
+
 export const chatQueryClient = new QueryClient({
   defaultOptions: {
     queries: {
       queryFn: defaultQueryFn,
-      retry: 3,
+      retry: configuredRetry,
     },
   },
 })
@@ -98,7 +109,10 @@ function useSessionChanged(value: Pick<ChatContextValue, 'token' | 'env'>): bool
   const tokenChanged = Boolean(
     prevToken?.access_token && newToken?.access_token !== prevToken?.access_token
   )
-  return tokenChanged || Boolean(prevEnv && newEnv !== prevEnv)
+
+  const envChanged = Boolean(prevEnv && newEnv !== prevEnv)
+
+  return tokenChanged || envChanged
 }
 
 function usePrevious<T>(value: T): T {

package/src/contexts/conversations_context.tsx

@@ -4,9 +4,11 @@ import {
   InfiniteData,
 } from '@tanstack/react-query'
 import React, { createContext, PropsWithChildren, useContext, useMemo, useState } from 'react'
+import { ApiGetQueryOptions } from '../hooks'
 import { useConversations, UseConversationsValue } from '../hooks/use_conversations'
 import { ConversationFiltersParams } from '../screens/conversation_filters/screen_props'
 import { ApiCollection, ConversationResource } from '../types'
+import { ResponseError } from '../utils/response_error'
 
 interface ConversationsContextValue extends UseConversationsValue {
   activeConversationId?: number
@@ -37,15 +39,22 @@ const ConversationsContext = createContext<ConversationsContextValue>({
 export const ConversationsContextProvider = ({
   children,
   args = {},
-}: PropsWithChildren<{ args: ConversationFiltersParams }>) => {
+  opts: paginatorOptions,
+}: PropsWithChildren<{
+  args: ConversationFiltersParams
+  opts?: ApiGetQueryOptions
+}>) => {
   const [activeConversationId, setActiveConversationId] = useState<number | undefined>()
   const { chat_group_graph_id, group_source_app_name, show_direct_messages } = args
 
-  const query = useConversations({
-    chat_group_graph_id,
-    group_source_app_name,
-    show_direct_messages,
-  })
+  const query = useConversations(
+    {
+      chat_group_graph_id,
+      group_source_app_name,
+      show_direct_messages,
+    },
+    paginatorOptions
+  )
 
   const value = useMemo(
     () => ({
@@ -63,7 +72,10 @@ export const ConversationsContextProvider = ({
 function fetchNextPage(
   _options?: FetchNextPageOptions
 ): Promise<
-  InfiniteQueryObserverResult<InfiniteData<ApiCollection<ConversationResource>, unknown>, Response>
+  InfiniteQueryObserverResult<
+    InfiniteData<ApiCollection<ConversationResource>, unknown>,
+    ResponseError
+  >
 > {
   throw new Error('Function not implemented.')
 }

package/src/hooks/use_api.ts

@@ -1,66 +1,60 @@
-import {
-  AnyUseSuspenseInfiniteQueryOptions,
-  InfiniteData,
-  useInfiniteQuery,
-  useQuery,
-} from '@tanstack/react-query'
+import { InfiniteData, useInfiniteQuery, useQuery } from '@tanstack/react-query'
 import { useContext } from 'react'
 import { ChatContext } from '../contexts/chat_context'
-import { ApiCollection, ApiResource, FailedResponse, ResourceObject } from '../types'
+import { ApiCollection, ApiResource, ResourceObject } from '../types'
 import { GetRequest, RequestData } from '../utils/client'
+import { ResponseError, throwResponseError } from '../utils/response_error'
 import { getNextPageParamFromMeta } from './paginator_meta'
 import { App, useApiClient } from './use_api_client'
 import { getRequestQueryKey, RequestQueryKey } from './use_suspense_api'
 
 interface ApiGetOptions extends GetRequest {
   app?: App
-  enabled?: boolean
 }
 
-type UseApiGetOptions = {
+export type ApiGetQueryOptions = {
   staleTime?: number
   gcTime?: number
+  enabled?: boolean
+  throwOnError?: boolean | ((error: ResponseError) => boolean)
 }
 
 export const useApiGet = <T extends ResourceObject | ResourceObject[]>(
   args: ApiGetOptions,
-  opts?: UseApiGetOptions
+  opts?: ApiGetQueryOptions
 ) => {
   type Resource = ApiResource<T>
   const { session } = useContext(ChatContext)
   const apiClient = useApiClient()
 
-  const enabled = !!session.token?.access_token && (args.enabled ?? true)
+  const enabled = !!session.token?.access_token && (opts?.enabled ?? true)
 
-  const { data, ...query } = useQuery<Resource, FailedResponse>({
+  const { data, ...query } = useQuery<Resource, ResponseError>({
     queryKey: getRequestQueryKey(args),
     queryFn: ({ queryKey }) => {
       const [url, d, headers, app = 'chat'] = queryKey as RequestQueryKey
 
-      return apiClient[app].get({ url, data: d, headers }) as Promise<Resource>
+      return (apiClient[app].get({ url, data: d, headers }) as Promise<Resource>).catch(
+        throwResponseError
+      )
     },
-    enabled,
     ...opts,
+    enabled,
   })
 
   return { ...data, ...query }
 }
 
-export type PaginatorOptions = Omit<
-  AnyUseSuspenseInfiniteQueryOptions,
-  'getNextPageParam' | 'initialPageParam' | 'queryFn' | 'queryKey'
->
-
 export const useApiPaginator = <T extends ResourceObject>(
   args: ApiGetOptions,
-  opts?: PaginatorOptions
+  opts?: ApiGetQueryOptions
 ) => {
   const { session } = useContext(ChatContext)
   const apiClient = useApiClient()
-  const enabled = !!session.token?.access_token && (args.enabled ?? true)
+  const enabled = !!session.token?.access_token && (opts?.enabled ?? true)
   const query = useInfiniteQuery<
     ApiCollection<T>,
-    FailedResponse,
+    ResponseError,
     InfiniteData<ApiCollection<T>>,
     any,
     Partial<RequestData> | undefined
@@ -74,15 +68,12 @@ export const useApiPaginator = <T extends ResourceObject>(
       const offset = pageParam?.offset || args.data.offset
       const data = { ...args.data, where, offset }
 
-      return apiClient[app].get<ApiCollection<T>>({
-        url: args.url,
-        data,
-      })
+      return apiClient[app].get<ApiCollection<T>>({ url: args.url, data }).catch(throwResponseError)
     },
     initialPageParam: {} as Partial<RequestData>,
     getNextPageParam: lastPage => getNextPageParamFromMeta(lastPage.meta?.next),
-    enabled,
     ...(opts || {}),
+    enabled,
   })
 
   const data: T[] = query.data?.pages?.flatMap(page => page.data) || []

package/src/hooks/use_auto_dismiss_keyboard.ts

@@ -0,0 +1,11 @@
+import { useIsFocused } from '@react-navigation/native'
+import { useEffect } from 'react'
+import { Keyboard, Platform } from 'react-native'
+
+export function useAutoDismissKeyboard() {
+  const isFocused = useIsFocused()
+  useEffect(() => {
+    if (Platform.OS !== 'android') return
+    if (!isFocused) Keyboard.dismiss()
+  }, [isFocused])
+}

package/src/hooks/use_conversation_message.ts

@@ -15,10 +15,7 @@ export const useConversationMessage = ({
     data: message,
     isError,
     isLoading,
-  } = useApiGet<MessageResource>({
-    ...getMessageRequestArgs({ conversation_id, messageId }),
-    enabled,
-  })
+  } = useApiGet<MessageResource>(getMessageRequestArgs({ conversation_id, messageId }), { enabled })
   const queryKey = getMessageQueryKey({ conversation_id, messageId })
 
   return { message, isError, isLoading, queryKey }

package/src/hooks/use_conversations.ts

@@ -2,11 +2,12 @@ import { InfiniteData, UseInfiniteQueryResult } from '@tanstack/react-query'
 import { useMemo } from 'react'
 import { ApiCollection, ConversationResource } from '../types'
 import { ConversationRequestArgs, getConversationsRequestArgs } from '../utils/request/conversation'
-import { useApiPaginator } from './use_api'
+import { ResponseError } from '../utils/response_error'
+import { ApiGetQueryOptions, useApiPaginator } from './use_api'
 
 export type ConversationPaginationResult = UseInfiniteQueryResult<
   InfiniteData<ApiCollection<ConversationResource>, unknown>,
-  Response
+  ResponseError
 >
 
 export type UseConversationsValue = Pick<
@@ -24,9 +25,12 @@ export type UseConversationsValue = Pick<
   refetch: () => Promise<any>
 }
 
-export function useConversations(args?: Partial<ConversationRequestArgs>): UseConversationsValue {
+export function useConversations(
+  args?: Partial<ConversationRequestArgs>,
+  opts?: ApiGetQueryOptions
+): UseConversationsValue {
   const requestArgs = getConversationsRequestArgs(args)
-  const { data, ...rest } = useApiPaginator<ConversationResource>(requestArgs)
+  const { data, ...rest } = useApiPaginator<ConversationResource>(requestArgs, opts)
 
   const conversations = useMemo(() => data.sort(sortByLastMessage), [data])
 

package/src/hooks/use_my_gender.ts

@@ -16,18 +16,20 @@ export function useMyGender() {
   const { featureEnabled } = useFeatures()
   const isFeatureEnabled = featureEnabled(availableFeatures.gender_specific_conversations)
 
-  const { data, isFetching } = useApiGet<PersonWithGender>({
-    url: '/me',
-    enabled: isFeatureEnabled,
-    data: {
-      include: ['gender'],
-      fields: {
-        Person: ['gender'],
-        Gender: ['value'],
+  const { data, isFetching } = useApiGet<PersonWithGender>(
+    {
+      url: '/me',
+      data: {
+        include: ['gender'],
+        fields: {
+          Person: ['gender'],
+          Gender: ['value'],
+        },
       },
+      app: 'people',
     },
-    app: 'people',
-  })
+    { enabled: isFeatureEnabled }
+  )
 
   const gender = data?.gender
   const genderValue = gender?.value ?? null

package/src/hooks/use_new_conversation_entry.ts

@@ -1,20 +1,44 @@
 import { useMemo } from 'react'
 import { useAppGrants } from './use_chat_permissions'
 
-export type NewConversationEntryMode = 'select_type' | 'groups' | 'teams' | 'none'
+export type NewConversationEntryMode =
+  | 'select_type'
+  | 'groups'
+  | 'teams'
+  | 'direct_message'
+  | 'none'
 
-export function useNewConversationEntry(): NewConversationEntryMode {
+export function useConversationTypeAccess() {
   const appGrants = useAppGrants()
 
+  return useMemo(
+    () => ({
+      canCreateGroupsConversations: appGrants.data?.some(
+        g => g.createConversations && g.appName === 'Groups'
+      ),
+      canCreateServicesConversations: appGrants.data?.some(
+        g => g.createConversations && g.appName === 'Services'
+      ),
+      canCreateDirectMessages: appGrants.data?.some(
+        g => g.createConversations && g.appName === 'Chat'
+      ),
+    }),
+    [appGrants.data]
+  )
+}
+
+export function useNewConversationEntry(): NewConversationEntryMode {
+  const { canCreateGroupsConversations, canCreateServicesConversations, canCreateDirectMessages } =
+    useConversationTypeAccess()
+
   return useMemo(() => {
-    const canCreateGroupsConversations = appGrants.data?.some(
-      g => g.createConversations && g.appName === 'Groups'
-    )
-    const canCreateServicesConversations = appGrants.data?.some(
-      g => g.createConversations && g.appName === 'Services'
-    )
-
-    if (canCreateGroupsConversations && canCreateServicesConversations) {
+    const availableCount = [
+      canCreateGroupsConversations,
+      canCreateServicesConversations,
+      canCreateDirectMessages,
+    ].filter(Boolean).length
+
+    if (availableCount > 1) {
       return 'select_type'
     }
 
@@ -26,6 +50,10 @@ export function useNewConversationEntry(): NewConversationEntryMode {
       return 'teams'
     }
 
+    if (canCreateDirectMessages) {
+      return 'direct_message'
+    }
+
     return 'none'
-  }, [appGrants.data])
+  }, [canCreateGroupsConversations, canCreateServicesConversations, canCreateDirectMessages])
 }

package/src/hooks/use_new_conversation_from_filter.ts

@@ -25,19 +25,19 @@ export function useNewConversationFromFilter(
   const isGroupsGroup = sourceAppName === 'Groups' && sourceType === 'Group'
   const isServicesTeam = sourceAppName === 'Services' && sourceType === 'Team'
 
-  const { data: group } = useApiGet<GroupResource>({
-    url: `/me/groups/${chatGroupGraphId}`,
-    data: { fields: { Group: ['name'] } },
-    enabled: !!chatGroupGraphId,
-    app: 'chat',
-  })
+  const { data: group } = useApiGet<GroupResource>(
+    { url: `/me/groups/${chatGroupGraphId}`, data: { fields: { Group: ['name'] } }, app: 'chat' },
+    { enabled: !!chatGroupGraphId }
+  )
 
-  const { data: groupsGroup } = useApiGet<GroupsGroupResource>({
-    url: `/me/groups/${sourceId}`,
-    data: { fields: { Group: ['can_create_conversation'] } },
-    enabled: isGroupsGroup && !!sourceId,
-    app: 'groups',
-  })
+  const { data: groupsGroup } = useApiGet<GroupsGroupResource>(
+    {
+      url: `/me/groups/${sourceId}`,
+      data: { fields: { Group: ['can_create_conversation'] } },
+      app: 'groups',
+    },
+    { enabled: isGroupsGroup && !!sourceId }
+  )
 
   return useMemo(() => {
     if (isGroupsGroup && group?.name && sourceId) {

package/src/hooks/use_people_person.ts

@@ -16,18 +16,20 @@ interface PeoplePerson extends ResourceObject {
 }
 
 export const usePeoplePerson = (person?: { id: number }) => {
-  const { data: peoplePerson } = useApiGet<PeoplePerson>({
-    url: `/people/${person?.id}`,
-    enabled: Boolean(person?.id),
-    data: {
-      include: ['emails'],
-      fields: {
-        Person: ['id', 'name', 'avatar', 'emails'],
-        Email: ['address', 'primary'],
+  const { data: peoplePerson } = useApiGet<PeoplePerson>(
+    {
+      url: `/people/${person?.id}`,
+      data: {
+        include: ['emails'],
+        fields: {
+          Person: ['id', 'name', 'avatar', 'emails'],
+          Email: ['address', 'primary'],
+        },
       },
+      app: 'people',
     },
-    app: 'people',
-  })
+    { enabled: Boolean(person?.id) }
+  )
 
   return peoplePerson
 }

package/src/screens/conversation_screen.tsx

@@ -28,6 +28,7 @@ import { KeyboardView } from '../components/display/keyboard_view'
 import BlankState from '../components/primitive/blank_state_primitive'
 import { ConversationContextProvider } from '../contexts/conversation_context'
 import { useTheme } from '../hooks'
+import { useAutoDismissKeyboard } from '../hooks/use_auto_dismiss_keyboard'
 import { useConversation } from '../hooks/use_conversation'
 import { useConversationJoltEvents } from '../hooks/use_conversation_jolt_events'
 import { useConversationMessages } from '../hooks/use_conversation_messages'
@@ -130,6 +131,8 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
     })
   }, [])
 
+  useAutoDismissKeyboard()
+
   useEffect(() => {
     if (reply_root_id) {
       navigation.setParams({

package/src/screens/conversation_select_recipients/conversation_new_entry_screen.tsx

@@ -16,6 +16,7 @@ type NewConversationStackParamList = {
   ConversationNewEntry: ConversationSelectRecipientsParams | undefined
   ConversationSelectGroupRecipients: ConversationSelectRecipientsParams | undefined
   ConversationSelectTeamsILeadRecipients: ConversationSelectRecipientsParams | undefined
+  ConversationSelectDirectMessageRecipients: ConversationSelectRecipientsParams | undefined
 }
 
 export const ConversationNewEntryScreen = ({ route }: ConversationSelectRecipientsScreenProps) => {
@@ -34,6 +35,11 @@ export const ConversationNewEntryScreen = ({ route }: ConversationSelectRecipien
       return
     }
 
+    if (entryMode === 'direct_message') {
+      navigation.replace('ConversationSelectDirectMessageRecipients', route.params)
+      return
+    }
+
     if (entryMode === 'none') {
       navigation.goBack()
       return

package/src/screens/conversation_select_recipients/conversation_select_direct_message_recipients_screen.tsx

@@ -10,6 +10,7 @@ import { useDirectMessageAffiliations } from '../../hooks/direct_messages/use_di
 import { useDirectMessageCandidates } from '../../hooks/direct_messages/use_direct_message_candidates'
 import { useDirectMessageConversationValidate } from '../../hooks/direct_messages/use_direct_message_conversation_validate'
 import { useFindOrCreateDirectMessageConversation } from '../../hooks/direct_messages/use_find_or_create_direct_message_conversation'
+import { useAutoDismissKeyboard } from '../../hooks/use_auto_dismiss_keyboard'
 import { DirectMessageCandidateResource } from '../../types/resources/direct_message_candidate'
 import { ConversationSelectRecipientsScreenProps } from './types/screen_props'
 
@@ -26,6 +27,8 @@ export function ConversationSelectDirectMessageRecipientsScreen(
     new Map()
   )
 
+  useAutoDismissKeyboard()
+
   useEffect(() => {
     const timer = setTimeout(() => setDebouncedTerm(searchTerm), 200)
     return () => clearTimeout(timer)

package/src/screens/conversation_select_type_screen.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'
 import { useCurrentPerson } from '../hooks/use_current_person'
 import { availableFeatures, useFeatures } from '../hooks/use_features'
-import { useNewConversationEntry } from '../hooks/use_new_conversation_entry'
+import { useConversationTypeAccess } from '../hooks/use_new_conversation_entry'
 import type { NewConversationFromFilter } from '../hooks/use_new_conversation_from_filter'
 import { AppName } from '../types/resources/app_name'
 import { GraphId } from '../types/resources/group_resource'
@@ -26,15 +26,14 @@ type NewConversationTypeScreen =
 
 export function ConversationSelectTypeScreen({ route }: ConversationSelectTypeScreenProps) {
   const navigation = useNavigation()
-  const entryMode = useNewConversationEntry()
+  const { canCreateGroupsConversations, canCreateServicesConversations } =
+    useConversationTypeAccess()
   const { featureEnabled } = useFeatures()
   const { directMessagesDisabled, under_18 } = useCurrentPerson()
   const { newConversationFromFilter, chat_group_graph_id, group_source_app_name } =
     route.params || {}
 
   const filterParams = { chat_group_graph_id, group_source_app_name }
-  const canCreateGroups = entryMode === 'select_type' || entryMode === 'groups'
-  const canCreateTeams = entryMode === 'select_type' || entryMode === 'teams'
   const dmFeatureEnabled = featureEnabled(availableFeatures.direct_messages_eap)
 
   const handleFilterPress = () => {
@@ -89,14 +88,14 @@ export function ConversationSelectTypeScreen({ route }: ConversationSelectTypeSc
           accessibilityHint="Creates a conversation pre-scoped to the current filter"
         />
       )}
-      {canCreateGroups && (
+      {canCreateGroupsConversations && (
         <FormSheet.Action
           title="Group"
           onPress={handleGroupPress}
           accessibilityHint="Opens group selection screen"
         />
       )}
-      {canCreateTeams && (
+      {canCreateServicesConversations && (
         <FormSheet.Action
           title="Team"
           onPress={handleTeamPress}

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

@@ -11,16 +11,10 @@ export const ChatGroupBadge = ({ rowPaddingHorizontal }: { rowPaddingHorizontal:
   const navigation = useNavigation()
   const route = useRoute<RouteProp<ConversationsScreenProps['route']>>()
   const { chat_group_graph_id } = route.params || {}
-  const { data: group } = useApiGet<GroupResource>({
-    url: `/me/groups/${chat_group_graph_id}`,
-    data: {
-      fields: {
-        Group: [],
-      },
-    },
-    enabled: !!chat_group_graph_id,
-    app: 'chat',
-  })
+  const { data: group } = useApiGet<GroupResource>(
+    { url: `/me/groups/${chat_group_graph_id}`, data: { fields: { Group: [] } }, app: 'chat' },
+    { enabled: !!chat_group_graph_id }
+  )
 
   const handleBadgePress = useCallback(() => {
     navigation.setParams({

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

@@ -87,6 +87,13 @@ export const ListHeaderComponent = () => {
         params: { ...route.params },
       })
     }
+
+    if (entryMode === 'direct_message') {
+      return navigation.navigate('New', {
+        screen: 'ConversationSelectDirectMessageRecipients',
+        params: { ...route.params },
+      })
+    }
   }, [navigation, route.params, entryMode, newConversationFromFilter])
 
   const handleChatSettings = useCallback(() => {

package/src/screens/conversations/conversations_screen.tsx

@@ -22,7 +22,7 @@ export function ConversationsScreen({ route }: ConversationsScreenProps) {
 
   return (
     <View style={styles.container}>
-      <ConversationsContextProvider args={route.params}>
+      <ConversationsContextProvider args={route.params} opts={{ throwOnError: true }}>
         <Conversations ListHeaderComponent={ListHeaderComponent} />
       </ConversationsContextProvider>
     </View>

package/src/utils/performance_tracking.ts

@@ -89,6 +89,8 @@ async function sendPerformanceMetric(
   apiClient: ApiClient,
   metric: PerformanceMetric
 ): Promise<void> {
+  if (__DEV__) return
+
   try {
     await apiClient.chat.post({
       url: `/me/metrics`,