@planningcenter/chat-react-native 3.2.0-rc.15 → 3.2.0-rc.17

package/src/hooks/use_jolt.ts

@@ -8,10 +8,10 @@ import {
   JoltSubscription,
 } from '@planningcenter/jolt-client/dist/types/JoltSubscription'
 import { useQuery, useQueryClient, useSuspenseQuery } from '@tanstack/react-query'
-import { useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useChatContext } from '../contexts/chat_context'
 import { ApiResource } from '../types'
-import { Client } from '../utils'
+import { Client, Uri } from '../utils'
 
 interface JoltResponse {
   type: 'JoltToken'
@@ -22,28 +22,18 @@ interface JoltResponse {
 export const useJoltClient = (): JoltClient | undefined => {
   const { session } = useChatContext()
   const queryClient = useQueryClient()
+  const uri = useMemo(() => new Uri({ session }), [session])
   const apiClient = useMemo(
-    // Client that does not relay 401 errors
-    () => new Client({ app: 'chat', session, version: '2018-11-01' }),
-    [session]
+    () =>
+      new Client({
+        root: uri.api(`/chat/v2`),
+        defaultHeaders: uri.headers,
+        version: '2018-11-01',
+      }),
+    [uri]
   )
 
-  const { data: joltToken } = useSuspenseQuery<ApiResource<JoltResponse>>({
-    queryKey: ['jolt-token'],
-    queryFn: () => {
-      return apiClient.post({
-        url: '/me/jolt_authorize',
-        data: {
-          data: {
-            type: 'JoltToken',
-            attributes: {},
-          },
-        },
-      })
-    },
-  })
-
-  const fetchJoltToken = async () => {
+  const fetchJoltToken = useCallback(async () => {
     return apiClient.post<ApiResource<JoltResponse>>({
       url: '/me/jolt_authorize',
       data: {
@@ -53,11 +43,16 @@ export const useJoltClient = (): JoltClient | undefined => {
         },
       },
     })
-  }
+  }, [apiClient])
+
+  const { data: joltToken } = useSuspenseQuery<ApiResource<JoltResponse>>({
+    queryKey: ['jolt-token'],
+    queryFn: fetchJoltToken,
+  })
 
   const fetchAuthTokenFn: FetchAuthToken = () => {
     return queryClient.fetchQuery({
-      queryKey: ['jolt-token'],
+      queryKey: ['jolt-auth-token'],
       queryFn: () => fetchJoltToken().then(res => res.data.id),
     })
   }

package/src/hooks/use_message_create.ts

@@ -2,7 +2,7 @@ import { InfiniteData, useMutation } from '@tanstack/react-query'
 import { getMessagesQueryKey, getMessagesRequestArgs } from './use_conversation_messages'
 import { useApiClient } from './use_api_client'
 import { ApiCollection, ApiResource, MessageResource } from '../types'
-import { queryClient } from '../contexts/api_provider'
+import { chatQueryClient } from '../contexts/api_provider'
 import { updateOrCreateRecordInPagesData } from '../utils'
 import { DenormalizedAttachmentResourceForCreate } from '../types/resources/denormalized_attachment_resource'
 
@@ -42,7 +42,7 @@ export function useMessageCreate({ conversationId }: Props) {
       type QueryData = InfiniteData<ApiCollection<MessageResource>>
       const queryKey = getMessagesQueryKey({ conversation_id: conversationId })
 
-      queryClient.setQueryData<QueryData>(queryKey, data =>
+      chatQueryClient.setQueryData<QueryData>(queryKey, data =>
         updateOrCreateRecordInPagesData({
           data,
           record: updatedMessage,

package/src/hooks/use_suspense_api.ts

@@ -16,9 +16,15 @@ export const useSuspenseGet = <T extends ResourceObject | ResourceObject[]>(
   args: SuspenseGetOptions
 ) => {
   type Resource = ApiResource<T>
+  const apiClient = useApiClient()
 
   const { data, ...query } = useSuspenseQuery<Resource, Response>({
     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 { ...data, ...query }

package/src/index.tsx

@@ -1,5 +1,5 @@
 export * from './contexts/chat_context'
-export { ApiProvider } from './contexts/api_provider'
+export { ApiProvider, chatQueryClient } from './contexts/api_provider'
 export { DesignSystemScreen } from './screens'
 export * from './navigation'
 export * from './types'
@@ -10,5 +10,6 @@ export {
   ChatAdapters,
   ClipboardAdapter,
   Session,
+  Uri,
   platformFontWeightBold,
 } from './utils'

package/src/types/resources/oauth_token.ts

@@ -1,8 +1,8 @@
 export type OAuthToken = {
-  token_type: any
-  access_token: any
+  token_type: string
+  access_token: string
   created_at: number
-  expires_in: any
+  expires_in: number
   scope: string
-  refresh_token: any
+  refresh_token: string
 }

package/src/utils/client/client.ts

@@ -1,6 +1,4 @@
 import { ApiCollection, ApiError, ApiResource } from '../../types'
-import { Session } from '../session'
-import { Uri } from '../uri'
 import {
   concatRecords,
   ensureNoQueryParamsInDev,
@@ -22,28 +20,27 @@ type ClientArgs = {
   version: string
   defaultHeaders?: Record<string, string>
   onUnauthorizedResponse?: OnUnauthorizedResponse
-  session: Session
-  app: string
+  root?: string
 }
 
 export class Client {
   version: string = ''
   defaultHeaders: Record<string, string> = {}
-  uri: Uri
   onUnauthorizedResponse?: OnUnauthorizedResponse
+  root?: string
 
-  constructor({ version, defaultHeaders = {}, session, app, onUnauthorizedResponse }: ClientArgs) {
+  constructor({ version, defaultHeaders = {}, onUnauthorizedResponse, root }: ClientArgs) {
     this.version = version
-    this.uri = new Uri({ session, app })
     this.defaultHeaders = defaultHeaders
     this.onUnauthorizedResponse = onUnauthorizedResponse
+    this.root = root
   }
 
   async get<T extends ApiCollection | ApiResource>(args: GetRequest): Promise<T> {
     const { walk, ...data } = args.data
     const isWalking = Boolean(walk)
     const headers = { ...this.headers, ...args.headers }
-    const url = this.uri.appUrl(args.url)
+    const url = this.appUrl(args.url)
 
     await throwErrorIfQueryParams(url)
 
@@ -54,7 +51,7 @@ export class Client {
       data: d = { fields: {} },
       acc = { data: [], included: [], meta: {}, links: {} },
       ...options
-    }: WalkRequest): Promise<ApiCollection | ApiResource> => {
+    }: WalkRequest): Promise<T> => {
       return makeRequest({
         action: 'GET',
         data: d,
@@ -84,7 +81,7 @@ export class Client {
 
   async patch<T extends ApiCollection | ApiResource>(args: PatchRequest): Promise<T> {
     const headers = { ...this.headers, ...args.headers }
-    const url = this.uri.appUrl(args.url)
+    const url = this.appUrl(args.url)
 
     const requestArgs: MakeRequestArgs = { data: args.data, url, action: 'PATCH', headers }
 
@@ -95,7 +92,7 @@ export class Client {
 
   async post<T extends ApiCollection | ApiResource>(args: PostRequest): Promise<T> {
     const headers = { ...this.headers, ...args.headers }
-    const url = this.uri.appUrl(args.url)
+    const url = this.appUrl(args.url)
 
     const requestArgs: MakeRequestArgs = { ...args, data: args.data, url, action: 'POST', headers }
 
@@ -106,7 +103,7 @@ export class Client {
 
   async delete(args: DeleteRequest) {
     const headers = { ...this.headers, ...args.headers }
-    const url = this.uri.appUrl(args.url)
+    const url = this.appUrl(args.url)
 
     const requestArgs: MakeRequestArgs = { url, action: 'DELETE', headers }
 
@@ -133,12 +130,15 @@ export class Client {
     }
   }
 
+  appUrl(url: string) {
+    return `${this.root}${url}`
+  }
+
   get headers() {
     return {
       Accept: 'application/vnd.api+json',
       'Content-Type': 'application/json',
       'X-PCO-API-Version': this.version,
-      ...this.uri.headers,
       ...this.defaultHeaders,
     }
   }

package/src/utils/session.ts

@@ -1,28 +1,34 @@
 import { OAuthToken } from '../types'
 
 export type ENV = 'production' | 'staging' | 'development'
-
+export type OauthType = 'OAuth' | 'ChurchCenterOauth'
 export type PartialToken = Pick<OAuthToken, 'access_token'> & Partial<OAuthToken>
-export type SessionProps<T = PartialToken> = { env?: ENV; token?: T }
+export type SessionProps<T extends PartialToken> = { env?: ENV; token?: T; type?: OauthType }
 
 /**
  * Session class to track the environment and token
  * Not intended to make network requests or handle authentication
  */
-export class Session<T = PartialToken> {
+export class Session<T extends PartialToken = PartialToken> {
   env: ENV
   token: T | undefined
+  type: OauthType
 
   constructor(props?: SessionProps<T>) {
-    const { env = 'production', token } = props || {}
+    const { env = 'production', token, type } = props || {}
     this.env = env
     this.token = token
+    this.type = type || 'OAuth'
   }
 
   get isAuthenticated() {
     return Boolean(this.token)
   }
 
+  get isChurchCenterToken() {
+    return this.type === 'ChurchCenterOauth'
+  }
+
   toString() {
     return JSON.stringify({ env: this.env, token: this.token })
   }

package/src/utils/uri.ts

@@ -7,13 +7,16 @@ const systemVersion = DeviceInfo.getSystemVersion()
 const readableVersion = DeviceInfo.getReadableVersion()
 const appName = DeviceInfo.getApplicationName()
 
+type Graph = 'churchcenter' | 'planningcenter'
 export class Uri {
   session: Session
+  graph: Graph = 'planningcenter'
   app?: string
 
-  constructor({ session, app }: { session: Session; app?: string }) {
+  constructor({ session, app, graph }: { session: Session; app?: string; graph?: Graph }) {
     this.session = session
     this.app = app
+    this.graph = graph || 'planningcenter'
   }
 
   get schema() {
@@ -25,18 +28,39 @@ export class Uri {
   }
 
   get host() {
+    return `${this.subdomain}.${this.domain}.${this.tld}`
+  }
+
+  get subdomain() {
     switch (this.env) {
-      case 'production':
-        return 'api.planningcenteronline.com'
       case 'staging':
-        return 'api-staging.planningcenteronline.com'
+        return this.isChurchCenter ? 'api.staging' : 'api-staging'
+      default:
+        return 'api'
+    }
+  }
+
+  get domain(): 'pco' | 'planningcenteronline' | 'churchcenter' {
+    if (this.isChurchCenter) {
+      return 'churchcenter'
+    }
+
+    return this.env === 'development' ? 'pco' : 'planningcenteronline'
+  }
+
+  get tld() {
+    switch (this.env) {
       case 'development':
-        return 'api.pco.test'
+        return 'test'
       default:
-        return 'api.planningcenteronline.com'
+        return 'com'
     }
   }
 
+  get isChurchCenter() {
+    return this.session.isChurchCenterToken
+  }
+
   get env() {
     return this.session?.env || 'production'
   }