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

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_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_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/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/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`,