@planningcenter/chat-react-native 1.5.0 → 1.5.1-qa-22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "1.5.0",
+  "version": "1.5.1-qa-22.0",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -17,7 +17,6 @@
     "prepublishOnly": "expo-module prepublishOnly"
   },
   "dependencies": {
-    "@planningcenter/chat-core": "^1.5.0",
     "fast-text-encoding": "^1.0.6",
     "jest-fetch-mock": "^3.0.3",
     "lodash-inflection": "^1.5.0",
@@ -45,5 +44,5 @@
     "prettier": "^3.4.2",
     "typescript": "<5.6.0"
   },
-  "gitHead": "66c448543e4702f8f692332f1abef17017994d1e"
+  "gitHead": "e15259014cecb56e087edf1f905dce3c059fcfde"
 }

package/src/__tests__/client.ts

@@ -3,26 +3,13 @@ import Client from '../utils/client/client'
 import { Session } from '../utils/session'
 import DefaultFixtures from '../__utils__/fixtures/defaults'
 import { BASE_URL } from '../__utils__/handlers'
+import { OAuthToken } from '../types'
 
 const APP_BASE_URL = BASE_URL
 
-let session = new Session({ env: 'development' })
-
-const client = new Client({
-  app: 'chat',
-  version: '2018-11-01',
-  session,
-})
-
-const clientWithDefaultHeaders = new Client({
-  app: 'chat',
-  version: '2018-11-01',
-  defaultHeaders: {
-    'X-Custom-Default-Header': 'important data',
-  },
-  session,
-})
-
+let session: Session
+let client: Client
+let clientWithDefaultHeaders: Client
 let fetchSpy: jest.SpyInstance
 
 beforeAll(() => MockServer.server().listen())
@@ -32,6 +19,22 @@ afterAll(() => MockServer.server().close())
 beforeEach(() => {
   jest.clearAllMocks()
   fetchSpy = jest.spyOn(globalThis, 'fetch')
+  session = new Session({ env: 'development' })
+  client = new Client({
+    app: 'chat',
+    version: '2018-11-01',
+    session,
+    onTokenExpired: () => {},
+  })
+  clientWithDefaultHeaders = new Client({
+    app: 'chat',
+    version: '2018-11-01',
+    defaultHeaders: {
+      'X-Custom-Default-Header': 'important data',
+    },
+    session,
+    onTokenExpired: () => {},
+  })
 })
 
 describe('get', () => {
@@ -341,13 +344,14 @@ describe('url switching', () => {
     const prodBase = 'https://api.planningcenteronline.com/chat/v2'
     const stagingBase = 'https://api-staging.planningcenteronline.com/chat/v2'
 
-    MockServer.get(prodBase + '/records', {}, 200)
-    MockServer.get(stagingBase + '/records', {}, 200)
+    MockServer.get(prodBase + '/records', {}, 200, { once: true })
+    MockServer.get(stagingBase + '/records', {}, 200, { once: true })
 
     const newClient = new Client({
       app: 'chat',
       session,
       version: '2018-11-01',
+      onTokenExpired: () => {},
     })
 
     await newClient.get({
@@ -385,4 +389,53 @@ describe('url switching', () => {
       expect.any(Object)
     )
   })
+
+  it('Changes to session switches the base url with custom headers', async () => {
+    const token: OAuthToken = {
+      access_token: 'foo',
+      token_type: undefined,
+      created_at: 0,
+      expires_in: undefined,
+      scope: '',
+      refresh_token: undefined,
+    }
+
+    session.token = token
+
+    await client.get({
+      url: '/records',
+      data: { fields: { Record: ['id'] } },
+    })
+
+    requestHeadersShouldContain({
+      ...fetchSpy.mock.calls[0][1],
+      key: 'Authorization',
+      value: 'foo',
+    })
+
+    session.token.access_token = 'bar'
+
+    await client.get({
+      url: '/records',
+      data: { fields: { Record: ['id'] } },
+    })
+
+    requestHeadersShouldContain({
+      ...fetchSpy.mock.calls[1][1],
+      key: 'Authorization',
+      value: 'bar',
+    })
+  })
 })
+
+const requestHeadersShouldContain = ({
+  headers,
+  key,
+  value,
+}: {
+  headers: Record<string, unknown>
+  key: string
+  value: unknown
+}) => {
+  expect(headers[key]).toContain(value)
+}

package/src/__tests__/session.ts

@@ -25,17 +25,6 @@ describe('Session', () => {
     })
   })
 
-  describe('urls', () => {
-    it('should return the correct base url', () => {
-      const session = new Session({ env: 'production' })
-      expect(session.baseUrl).toBe('https://api.planningcenteronline.com')
-      session.env = 'development'
-      expect(session.baseUrl).toBe('http://api.pco.test')
-      session.env = 'staging'
-      expect(session.baseUrl).toBe('https://api-staging.planningcenteronline.com')
-    })
-  })
-
   describe('hydrate', () => {
     describe('success', () => {
       it('should return a hydrated Session instance', () => {

package/src/__utils__/handlers.ts

@@ -1,6 +1,6 @@
 import { http, HttpResponse } from 'msw'
 import DefaultFixtures from './fixtures/defaults'
-import { JSONAPIResponse } from '@planningcenter/chat-core'
+import { JSONAPIResponse } from '../types'
 
 export const BASE_URL = 'http://api.pco.test/chat/v2'
 

package/src/components/conversations.tsx

@@ -1,27 +1,43 @@
-import { ConversationResource, JSONAPICollection } from '@planningcenter/chat-core'
 import { useNavigation } from '@react-navigation/native'
-import { useSuspenseQuery } from '@tanstack/react-query'
 import React from 'react'
 import { FlatList, Pressable, StyleSheet } from 'react-native'
 import { useTheme } from '../hooks'
-import { Text } from './display'
-
-type ConversationsResponse = JSONAPICollection<ConversationResource>
+import { useSuspensePaginator } from '../hooks/use_api'
+import { ConversationResource } from '../types'
+import { GetRequest } from '../utils/client/types'
+import { Heading, Text } from './display'
 
 export const Conversations = () => {
   const styles = useStyles()
-  const { data: conversations } = useSuspenseQuery<ConversationsResponse>({
-    queryKey: ['/chat/v2/me/conversations'],
-  })
+  const request: GetRequest = {
+    url: '/me/conversations',
+    data: {
+      perPage: 20,
+      order: '-last_message',
+      fields: {
+        Conversation: [
+          'title',
+          'last_message_created_at',
+          'last_message_author_name',
+          'last_message_text_preview',
+          'unread_count',
+        ],
+      },
+    },
+  }
+  const { data: conversations, fetchNextPage } = useSuspensePaginator<ConversationResource>(request)
+
+  // TODO: Filter using the API
+  const nonEmptyConversations = conversations.filter(c => c.lastMessageTextPreview) || []
+
   const navigation = useNavigation()
 
   return (
     <FlatList
-      data={conversations?.data}
+      data={nonEmptyConversations}
       contentContainerStyle={styles.container}
       style={styles.scrollView}
       ListEmptyComponent={<Text>No conversations found</Text>}
-      ListHeaderComponent={<Text style={styles.foo}>Conversations</Text>}
       renderItem={({ item }) => (
         <Pressable
           onPress={() =>
@@ -31,9 +47,15 @@ export const Conversations = () => {
             })
           }
         >
-          <Text style={styles.listItem}>{item.attributes.title}</Text>
+          <Heading numberOfLines={1} variant="h3">
+            {item.title}
+          </Heading>
+          <Text style={styles.listItem}>
+            {item.lastMessageAuthorName}: {item.lastMessageTextPreview}
+          </Text>
         </Pressable>
       )}
+      onEndReached={() => fetchNextPage()}
     />
   )
 }

package/src/components/index.tsx

@@ -1,2 +1,3 @@
 export * from './conversations'
 export * from './error_boundary'
+export * from './display'

package/src/contexts/api_provider.tsx

@@ -1,30 +1,19 @@
-import { JSONAPIResponse } from '@planningcenter/chat-core'
 import { QueryClient, QueryClientProvider, QueryKey } from '@tanstack/react-query'
 import React, { useEffect } from 'react'
 import { ViewProps } from 'react-native'
-import { OAuthToken } from '../types'
-import apiRequest from '../utils/api'
-import { ENV, session } from '../utils/session'
-import Uri from '../utils/uri'
+import { Client } from '../utils'
+import { GetRequest } from '../utils/client/types'
 
-let handleTokenExpired: () => void
+let apiClient: Client | undefined
 
 const defaultQueryFn = ({ queryKey }: { queryKey: QueryKey }) => {
-  if (!session.token) {
+  if (!apiClient) {
     throw new Error('No token present')
   }
 
-  const uri = new Uri({ session })
-  const url = uri.api(queryKey[0])
-
-  return apiRequest<JSONAPIResponse>(url)
-    .then(r => r.json)
-    .catch(error => {
-      if (error.message === 'Token expired') {
-        handleTokenExpired()
-      }
-      return null
-    })
+  const data = queryKey[0] as GetRequest
+
+  return apiClient.get(data)
 }
 
 export const queryClient = new QueryClient({
@@ -37,17 +26,19 @@ export const queryClient = new QueryClient({
 
 export function ApiProvider({
   children,
-  env = 'production',
-  token,
-  onTokenExpired,
-}: ViewProps & { env?: ENV; token?: OAuthToken; onTokenExpired: () => void }) {
-  session.env = env
-  session.token = token
-  handleTokenExpired = onTokenExpired
+  client,
+  sessionChanged,
+}: ViewProps & { client: Client; sessionChanged: boolean }) {
+  useEffect(() => {
+    apiClient = client
+  }, [client])
 
+  // TODO: CREATE CALLBACK TO INVALIDATE QUERIES
   useEffect(() => {
+    if (!sessionChanged) return
+
     queryClient.invalidateQueries()
-  }, [env, token])
+  }, [sessionChanged])
 
   return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
 }

package/src/contexts/chat_context.tsx

@@ -1,39 +1,93 @@
 import { merge } from 'lodash'
-import React, { createContext, useMemo } from 'react'
+import React, { createContext, useEffect, useMemo, useRef } from 'react'
 import { ColorSchemeName, useColorScheme } from 'react-native'
 import { DeepPartial, OAuthToken } from '../types'
 import { defaultTheme, DefaultTheme } from '../utils/theme'
 import { aliasTokensColorMap } from '../vendor/tapestry/alias_tokens_color_map'
 import { ApiProvider } from './api_provider'
+import { Client, ENV, Session } from '../utils'
 
-type ContextValue = {
+type ChatContextValue = {
   token?: OAuthToken
   onTokenExpired: () => void
   theme: any
-  env?: 'production' | 'staging' | 'development'
+  env?: ENV
+  client: Client
 }
 
-export const ChatContext = createContext<ContextValue>({
+const defaultChatClient = new Client({
+  app: 'chat',
+  session: new Session(),
+  version: '2018-11-01',
+  onTokenExpired: () => null,
+})
+
+export const ChatContext = createContext<ChatContextValue>({
   theme: undefined,
   token: undefined,
   env: undefined,
   onTokenExpired: () => {},
+  client: defaultChatClient,
 })
 
-export function ChatProvider({ children, value }: { children: any; value: ContextValue }) {
+export function ChatProvider({
+  children,
+  value,
+}: {
+  children: any
+  value: Omit<ChatContextValue, 'client'>
+}) {
+  const { env, token, onTokenExpired } = value
   const theme = useCreateChatTheme(value.theme)
+  const session = useMemo(() => new Session({ token, env }), [env, token])
+  const client = useMemo(
+    () =>
+      new Client({
+        app: 'chat',
+        session,
+        version: '2018-11-01',
+        onTokenExpired,
+      }),
+    [onTokenExpired, session]
+  )
+  const sessionChanged = useSessionChanged({ token, env })
+
+  const contextValue: ChatContextValue = {
+    env,
+    token,
+    onTokenExpired,
+    theme,
+    client,
+  }
 
   if (!Object.keys(value.token || {}).length) return null
 
   return (
-    <ChatContext.Provider value={{ ...value, theme }}>
-      <ApiProvider env={value.env} token={value.token} onTokenExpired={value.onTokenExpired}>
+    <ChatContext.Provider value={contextValue}>
+      <ApiProvider sessionChanged={sessionChanged} client={client}>
         {children}
       </ApiProvider>
     </ChatContext.Provider>
   )
 }
 
+function useSessionChanged(value: Pick<ChatContextValue, 'token' | 'env'>): boolean {
+  const { token: newToken, env: newEnv } = value
+  const { token: prevToken, env: prevEnv } = usePrevious<typeof value>(value)
+
+  return Boolean(prevToken && newToken !== prevToken) || Boolean(prevEnv && newEnv !== prevEnv)
+}
+
+function usePrevious<T>(value) {
+  const ref = useRef<T>(value)
+
+  useEffect(() => {
+    ref.current = value
+  }, [value])
+
+  return ref.current
+}
+
 interface CreateChatThemeProps {
   theme?: DeepPartial<DefaultTheme>
   colorScheme?: ColorSchemeName

package/src/hooks/index.ts

@@ -1,2 +1,4 @@
 export * from './use_async_storage'
 export * from './use_theme'
+export * from './use_api'
+export * from './use_current_person'

package/src/hooks/use_api.ts

@@ -0,0 +1,60 @@
+import { InfiniteData, useSuspenseInfiniteQuery, useSuspenseQuery } from '@tanstack/react-query'
+import { useContext } from 'react'
+import { ChatContext } from '../contexts'
+import { ApiCollection, ApiResource, ResourceObject } from '../types'
+import { GetRequest, RequestData } from '../utils/client/types'
+
+export const useSuspenseGet = <T extends ResourceObject | ResourceObject[]>(args: GetRequest) => {
+  type Resource = T extends ResourceObject ? ApiResource<T> : ApiCollection<T>
+
+  const { data, ...query } = useSuspenseQuery<Resource, Response>({
+    queryKey: [args],
+  })
+
+  return { ...data, ...query }
+}
+
+type NextMeta = Partial<{
+  offset: string
+  idLt: string
+}>
+
+export const useSuspensePaginator = <T extends ResourceObject>(args: GetRequest) => {
+  const { client } = useContext(ChatContext)
+  const query = useSuspenseInfiniteQuery<
+    ApiCollection<T>,
+    Response,
+    InfiniteData<ApiCollection<T>>,
+    any,
+    Partial<RequestData> | undefined
+  >({
+    queryKey: [args.url, args.data],
+    queryFn: ({ pageParam }) => {
+      const pageParmWhere = pageParam?.where || {}
+      const argsWhere = args.data.where || {}
+      const where = { ...argsWhere, ...pageParmWhere }
+
+      const offset = pageParam?.offset || args.data.offset
+      const data = { ...args.data, where, offset }
+
+      return client.get({
+        url: args.url,
+        data,
+      })
+    },
+    initialPageParam: {} as Partial<RequestData>,
+    getNextPageParam: lastPage => {
+      const next: NextMeta = lastPage.meta?.next || {}
+      const { offset, idLt } = next
+
+      if (idLt) return { where: { id_lt: idLt } }
+      if (offset) return { offset: Number(offset) }
+
+      return undefined
+    },
+  })
+
+  const data: T[] = query.data?.pages.flatMap(page => page.data) || []
+
+  return { ...query, data }
+}

package/src/hooks/use_current_person.ts

@@ -0,0 +1,15 @@
+import { PersonResource } from '../types'
+import { useSuspenseGet } from './use_api'
+
+export const useCurrentPerson = () => {
+  const { data: person } = useSuspenseGet<PersonResource>({
+    url: '/me',
+    data: {
+      fields: {
+        Person: ['id', 'name', 'avatar', 'unread_count', 'pco_chat_enabled'],
+      },
+    },
+  })
+
+  return person
+}

package/src/navigation/index.tsx

@@ -5,7 +5,8 @@ import { NotFound } from '../screens/not_found'
 import { ScreenLayout } from './screenLayout'
 import { ConversationsScreen } from '../screens/conversations_screen'
 import { ConversationScreen } from '../screens/conversation_screen'
-import { HeaderBackButton } from '@react-navigation/elements'
+import { HeaderBackButton, PlatformPressable } from '@react-navigation/elements'
+import { Icon } from '../components'
 
 export const ChatStack = createNativeStackNavigator({
   screenLayout: ScreenLayout,
@@ -13,9 +14,18 @@ export const ChatStack = createNativeStackNavigator({
     Conversations: {
       screen: ConversationsScreen,
       options: ({ route, navigation }) => ({
-        headerTitle: (route.params as { title?: string })?.title ?? 'Conversations',
-        // This goes back on the parent so it doesn't automatically show up on the first screen
-        headerLeft: () => <HeaderBackButton onPress={navigation.goBack} />,
+        headerTitle: (route.params as { title?: string })?.title ?? 'Chat',
+        headerLeft: () => (
+          <PlatformPressable onPress={() => null}>
+            <Icon name="general.threeReducingHorizontalBars" size={18} />
+          </PlatformPressable>
+        ),
+        headerRight: () => (
+          <HeaderBackButton
+            onPress={navigation.goBack}
+            backImage={() => <Icon name="general.x" size={18} />}
+          />
+        ),
       }),
     },
     Conversation: {

package/src/screens/conversation_screen.tsx

@@ -1,7 +1,10 @@
-import { StaticScreenProps } from '@react-navigation/native'
-import React from 'react'
-import { StyleSheet, View } from 'react-native'
+import { StaticScreenProps, useNavigation } from '@react-navigation/native'
+import React, { useEffect } from 'react'
+import { FlatList, SafeAreaView, StyleSheet, TextInput, View } from 'react-native'
 import { Text } from '../components/display'
+import { useSuspenseGet, useSuspensePaginator } from '../hooks/use_api'
+import { ConversationResource, MessageResource } from '../types'
+import { useTheme } from '../hooks'
 
 export type ConversationScreenProps = StaticScreenProps<{
   conversation_id: string
@@ -9,17 +12,90 @@ export type ConversationScreenProps = StaticScreenProps<{
 }>
 
 export function ConversationScreen({ route }: ConversationScreenProps) {
+  const navigation = useNavigation()
+  const { conversation_id } = route.params
+
+  const { data: conversation } = useSuspenseGet<ConversationResource>({
+    url: `/me/conversations/${conversation_id}`,
+    data: {
+      fields: {
+        Conversation: ['title'],
+      },
+    },
+  })
+
+  const { data, refetch, isRefetching, fetchNextPage } = useSuspensePaginator<MessageResource>({
+    url: `/me/conversations/${conversation_id}/messages`,
+    data: {
+      perPage: 25,
+      fields: {
+        Message: ['text', 'mine'],
+      },
+    },
+  })
+
+  useEffect(() => {
+    navigation.setOptions({ title: conversation?.title })
+  }, [conversation, conversation_id, navigation])
+
   return (
-    <View style={styles.container}>
-      <Text>{JSON.stringify(route.params, null, 2)}</Text>
-    </View>
+    <SafeAreaView style={styles.container}>
+      <FlatList
+        inverted
+        contentContainerStyle={styles.listContainer}
+        refreshing={isRefetching}
+        onRefresh={refetch}
+        data={data}
+        keyExtractor={item => item.id}
+        renderItem={({ item }) => <Message {...item} />}
+        onEndReached={() => fetchNextPage()}
+      />
+      <View style={styles.textInputContainer}>
+        <TextInput
+          aria-disabled={true}
+          placeholder="Send a message"
+          onChangeText={() => console.log('TODO: Implement sending a message')}
+          value=""
+          style={styles.textInput}
+        />
+      </View>
+    </SafeAreaView>
   )
 }
 
+function Message(message: MessageResource) {
+  const { text } = message
+  const styles = useMessageStyles(message)
+
+  return <Text style={styles.message}>{text}</Text>
+}
+
+const useMessageStyles = ({ mine }: MessageResource) => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    message: {
+      alignSelf: mine ? 'flex-end' : 'flex-start',
+      backgroundColor: mine ? colors.fillColorNeutral040 : colors.fillColorNeutral050Base,
+      borderRadius: 16,
+      borderBottomLeftRadius: mine ? 16 : 0,
+      borderBottomRightRadius: mine ? 0 : 16,
+      padding: 12,
+      color: colors.textColorDefaultPrimary,
+    },
+  })
+}
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: 'center',
-    gap: 8,
   },
+  listContainer: {
+    gap: 12,
+    paddingHorizontal: 16,
+    paddingTop: 12,
+  },
+  textInputContainer: { borderTopWidth: 1, padding: 12 },
+  textInput: { borderRadius: 16, borderWidth: 1, padding: 12 },
 })

package/src/screens/not_found.tsx

@@ -6,7 +6,7 @@ export function NotFound() {
   return (
     <View style={styles.container}>
       <Text>404</Text>
-      <Button screen="Conversations">Go to Home</Button>
+      <Button href="Conversations">Go to Home</Button>
     </View>
   )
 }

package/src/types/api_primitives.ts

@@ -0,0 +1,24 @@
+export interface ResourceObject {
+  id: string
+  type: string
+}
+
+export type ApiResource<Type = ResourceObject> = {
+  data: Type
+  links: Record<string, string>
+  meta: Record<string, unknown>
+}
+
+export type ApiCollection<Type = ResourceObject> = {
+  data: Type[]
+  links: Record<string, string>
+  meta: CollectionMeta
+}
+
+interface CollectionMeta {
+  count: number
+  totalCount: number
+  next?: Record<string, unknown>
+  parent?: ResourceObject
+  [attributeName: string]: unknown
+}

package/src/types/index.ts

@@ -0,0 +1,3 @@
+export * from './api_primitives'
+export * from './resources'
+export * from './utils'