@planningcenter/chat-react-native 3.2.0-rc.2 → 3.2.0-rc.21

package/src/__tests__/utils/cache/page_mutations.ts

@@ -1,5 +1,6 @@
 import {
   deleteRecordInPagesData,
+  updateAllRecordsInPagesData,
   updateOrCreateRecordInPagesData,
   updateRecordInPagesData,
 } from '../../../utils/'
@@ -28,11 +29,44 @@ const data = {
   ],
 }
 
-describe('updateRecordInPagesData', () => {
+describe('updateAllRecordsInPagesData', () => {
+  it('should update all records in the pages data', () => {
+    const result = updateAllRecordsInPagesData({
+      data,
+      processRecord: r => ({ ...r, text: 'updated ' + r.text }),
+    })
+
+    expect(result).toEqual({
+      pageParams: {},
+      pages: [
+        {
+          data: [
+            { id: '1', type: 'Message', text: 'updated message 1' },
+            { id: '2', type: 'Message', text: 'updated message 2' },
+          ],
+          included: [],
+          links: {},
+          meta: { count: 2, totalCount: 2 },
+        },
+        {
+          data: [
+            { id: '3', type: 'Message', text: 'updated message 3' },
+            { id: '4', type: 'Message', text: 'updated message 4' },
+          ],
+          included: [],
+          links: {},
+          meta: { count: 2, totalCount: 2 },
+        },
+      ],
+    })
+  })
+})
+
+describe('updateOrCreateRecordInPagesData', () => {
   it('should update the record in the pages data', () => {
     const id = '3'
     const record = createRecord({ id })
-    const result = updateRecordInPagesData({ data, record })
+    const result = updateOrCreateRecordInPagesData({ data, record })
 
     expect(result).toEqual({
       pageParams: {},
@@ -63,7 +97,7 @@ describe('updateRecordInPagesData', () => {
     const id = '2'
     const record = createRecord({ id })
 
-    const result = updateRecordInPagesData<typeof record>({
+    const result = updateOrCreateRecordInPagesData<typeof record>({
       data,
       record,
       processRecord: r => ({ ...r, text: 'updated ' + r.text }),
@@ -93,20 +127,9 @@ describe('updateRecordInPagesData', () => {
       ],
     })
   })
-
-  it('should skip the record if it does not exist', () => {
-    const id = '5'
-    const record = createRecord({ id })
-    const result = updateRecordInPagesData<typeof record>({
-      data,
-      record,
-      processRecord: r => ({ ...r, text: 'updated ' + r.text }),
-    })
-    expect(result).toEqual(data)
-  })
 })
 
-describe('updateOrCreateRecordInPagesData', () => {
+describe('updateOrCreateRecordInPagesData function', () => {
   it('should update the record in the pages data', () => {
     const id = '3'
     const record = createRecord({ id })
@@ -207,6 +230,17 @@ describe('updateOrCreateRecordInPagesData', () => {
       ],
     })
   })
+
+  it('should skip the record if it does not exist', () => {
+    const id = '5'
+    const record = createRecord({ id })
+    const result = updateRecordInPagesData<typeof record>({
+      data,
+      record,
+      processRecord: r => ({ ...r, text: 'updated ' + r.text }),
+    })
+    expect(result).toEqual(data)
+  })
 })
 
 describe('deleteRecordInPagesData', () => {

package/src/__tests__/{client.ts → utils/client.ts}

@@ -1,13 +1,10 @@
-import MockServer from '../__utils__/server'
-import Client from '../utils/client/client'
-import { Session } from '../utils/session'
-import DefaultFixtures from '../__utils__/fixtures/defaults'
-import { BASE_URL } from '../__utils__/handlers'
-import { ApiError, OAuthToken } from '../types'
+import MockServer from '../../__utils__/server'
+import Client from '../../utils/client/client'
+import DefaultFixtures from '../../__utils__/fixtures/defaults'
+import { BASE_URL } from '../../__utils__/handlers'
+import { ApiError } from '../../types'
 
 const APP_BASE_URL = BASE_URL
-
-let session: Session
 let client: Client
 let clientWithDefaultHeaders: Client
 let fetchSpy: jest.SpyInstance
@@ -21,20 +18,17 @@ const onUnauthorizedResponse = jest.fn()
 beforeEach(() => {
   jest.clearAllMocks()
   fetchSpy = jest.spyOn(globalThis, 'fetch')
-  session = new Session({ env: 'development' })
   client = new Client({
-    app: 'chat',
     version: '2018-11-01',
-    session,
+    root: APP_BASE_URL,
     onUnauthorizedResponse,
   })
   clientWithDefaultHeaders = new Client({
-    app: 'chat',
     version: '2018-11-01',
+    root: APP_BASE_URL,
     defaultHeaders: {
       'X-Custom-Default-Header': 'important data',
     },
-    session,
     onUnauthorizedResponse,
   })
 })
@@ -345,96 +339,6 @@ describe('delete', () => {
   })
 })
 
-describe('url switching', () => {
-  it('Changes to session switches the base url', async () => {
-    const devBase = 'http://api.pco.test/chat/v2'
-    const prodBase = 'https://api.planningcenteronline.com/chat/v2'
-    const stagingBase = 'https://api-staging.planningcenteronline.com/chat/v2'
-
-    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',
-      onUnauthorizedResponse: () => {},
-    })
-
-    await newClient.get({
-      url: '/records',
-      data: { fields: { Record: ['id'] } },
-    })
-
-    expect(fetchSpy).toHaveBeenCalledWith(
-      devBase + '/records?fields[Record]=id&per_page=100',
-      expect.any(Object)
-    )
-
-    session.env = 'staging'
-
-    await newClient.get({
-      url: '/records',
-      data: { fields: { Record: ['id'] } },
-    })
-
-    expect(fetchSpy).toHaveBeenLastCalledWith(
-      'https://api-staging.planningcenteronline.com/chat/v2' +
-        '/records?fields[Record]=id&per_page=100',
-      expect.any(Object)
-    )
-
-    session.env = 'production'
-
-    await newClient.get({
-      url: '/records',
-      data: { fields: { Record: ['id'] } },
-    })
-
-    expect(fetchSpy).toHaveBeenLastCalledWith(
-      'https://api.planningcenteronline.com/chat/v2' + '/records?fields[Record]=id&per_page=100',
-      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',
-    })
-  })
-})
-
 describe('error handling', () => {
   describe('401 errors', () => {
     it('defaults', async () => {
@@ -466,15 +370,3 @@ describe('error handling', () => {
     }
   })
 })
-
-const requestHeadersShouldContain = ({
-  headers,
-  key,
-  value,
-}: {
-  headers: Record<string, unknown>
-  key: string
-  value: unknown
-}) => {
-  expect(headers[key]).toContain(value)
-}

package/src/__tests__/{session.ts → utils/session.ts}

@@ -1,12 +1,12 @@
-import { OAuthToken } from '../types'
-import { Session } from '../utils/session'
+import { OAuthToken } from '../../types'
+import { Session } from '../../utils/session'
 
 const token: OAuthToken = {
   access_token: 'access_token',
   refresh_token: 'refresh_token',
-  token_type: undefined,
+  token_type: 'undefined',
   created_at: 0,
-  expires_in: undefined,
+  expires_in: 0,
   scope: '',
 }
 

package/src/__tests__/utils/uri.ts

@@ -0,0 +1,107 @@
+import { Uri } from '../../utils'
+
+describe('URI', () => {
+  it('should be defined', () => {
+    expect(Uri).toBeDefined()
+  })
+
+  it('should create a new instance', () => {
+    const uri = new Uri({
+      session: {
+        env: 'production',
+        token: undefined,
+        type: 'OAuth',
+        isAuthenticated: false,
+        isChurchCenterToken: false,
+      },
+    })
+    expect(uri).toBeDefined()
+  })
+
+  describe('baseUrl', () => {
+    describe('planning center', () => {
+      it('should return the correct base URL for production', () => {
+        const uri = new Uri({
+          session: {
+            env: 'production',
+            token: undefined,
+            type: 'OAuth',
+            isAuthenticated: false,
+            isChurchCenterToken: false,
+          },
+        })
+        expect(uri.baseUrl).toBe('https://api.planningcenteronline.com')
+      })
+
+      it('should return the correct base URL for staging', () => {
+        const uri = new Uri({
+          session: {
+            env: 'staging',
+            token: undefined,
+            type: 'OAuth',
+            isAuthenticated: false,
+            isChurchCenterToken: false,
+          },
+        })
+        expect(uri.baseUrl).toBe('https://api-staging.planningcenteronline.com')
+      })
+
+      it('should return the correct base URL for development', () => {
+        const uri = new Uri({
+          session: {
+            env: 'development',
+            token: undefined,
+            type: 'OAuth',
+            isAuthenticated: false,
+            isChurchCenterToken: false,
+          },
+        })
+        expect(uri.baseUrl).toBe('http://api.pco.test')
+      })
+    })
+
+    describe('church center', () => {
+      it('should return the correct base URL for production', () => {
+        const uri = new Uri({
+          session: {
+            env: 'production',
+            token: undefined,
+            type: 'ChurchCenterOauth',
+            isAuthenticated: false,
+            isChurchCenterToken: true,
+          },
+          graph: 'churchcenter',
+        })
+        expect(uri.baseUrl).toBe('https://api.churchcenter.com')
+      })
+
+      it('should return the correct base URL for staging', () => {
+        const uri = new Uri({
+          session: {
+            env: 'staging',
+            token: undefined,
+            type: 'ChurchCenterOauth',
+            isAuthenticated: false,
+            isChurchCenterToken: true,
+          },
+          graph: 'churchcenter',
+        })
+        expect(uri.baseUrl).toBe('https://api.staging.churchcenter.com')
+      })
+
+      it('should return the correct base URL for development', () => {
+        const uri = new Uri({
+          session: {
+            env: 'development',
+            token: undefined,
+            type: 'ChurchCenterOauth',
+            isAuthenticated: false,
+            isChurchCenterToken: true,
+          },
+          graph: 'churchcenter',
+        })
+        expect(uri.baseUrl).toBe('http://api.churchcenter.test')
+      })
+    })
+  })
+})

package/src/components/conversation/message_form.tsx

@@ -1,13 +1,12 @@
-import { useTheme as useNavigationTheme } from '@react-navigation/native'
-import { InfiniteData, useMutation, useQueryClient } from '@tanstack/react-query'
-import React from 'react'
+import { useNavigation, useTheme as useNavigationTheme, useRoute } from '@react-navigation/native'
+import React, { useContext, useEffect, useState } from 'react'
 import { StyleSheet, TextInput, View, ViewProps } from 'react-native'
-import { IconButton } from '../../components'
+import { IconButton, Text } from '../../components'
 import { useTheme } from '../../hooks'
-import { useApiClient } from '../../hooks/use_api_client'
-import { getMessagesQueryKey, getMessagesRequestArgs } from '../../hooks/use_conversation_messages'
-import { ApiCollection, ApiResource, ConversationResource, MessageResource } from '../../types'
-import { updateOrCreateRecordInPagesData } from '../../utils'
+import { ConversationResource } from '../../types'
+import { useMessageCreate } from '../../hooks/use_message_create'
+import { ConversationScreenProps } from '../../screens/conversation_screen'
+import { ChatContext } from '../../contexts/chat_context'
 
 export const MessageForm = {
   Root: MessageFormRoot,
@@ -26,51 +25,77 @@ const MessageFormContext = React.createContext({
   setText: (_text: string) => {},
   onSubmit: () => {},
   disabled: false,
+  canGiphy: false,
+  usingGiphy: false,
+  setUsingGiphy: (_usingGiphy: boolean) => {},
 })
 
 function MessageFormRoot({ conversation, children }: MessagesFormRootProps) {
+  const { giphyApiKey } = useContext(ChatContext)
+  const canGiphy = !!giphyApiKey
   const styles = useMessageFormStyles()
   const [text, setText] = React.useState('')
-  const apiClient = useApiClient()
-  const queryClient = useQueryClient()
-
-  const { mutate, isPending } = useMutation({
-    mutationFn: async () => {
-      const requestParams = getMessagesRequestArgs({ conversation_id: conversation.id })
-      const fieldsWithValueJoined = Object.fromEntries(
-        Object.entries(requestParams.data.fields).map(([k, v]) => [k, v.join(',')])
-      )
-
-      return apiClient.chat.post<ApiResource<MessageResource>>({
-        url: `/me/conversations/${conversation.id}/messages`,
-        data: {
-          ...requestParams.data,
-          data: {
-            type: 'Message',
-            attributes: { text },
-          },
-          fields: fieldsWithValueJoined,
-        },
-      })
-    },
-    onSuccess: (result: ApiResource<MessageResource>) => {
-      const updatedMessage = result.data
-      type QueryData = InfiniteData<ApiCollection<MessageResource>>
-      const queryKey = getMessagesQueryKey({ conversation_id: conversation.id })
-
+  const [usingGiphy, setUsingGiphy] = useState(false)
+  const navigation = useNavigation()
+  const route = useRoute() as ConversationScreenProps['route']
+  const { status, isPending, reset, mutate } = useMessageCreate({ conversationId: conversation.id })
+
+  useEffect(() => {
+    if (canGiphy && !usingGiphy && text.startsWith('/giphy ')) {
+      setUsingGiphy(true)
       setText('')
-      queryClient.setQueryData<QueryData>(queryKey, data =>
-        updateOrCreateRecordInPagesData({
-          data,
-          record: updatedMessage,
-        })
-      )
-    },
-  })
+    }
+  }, [canGiphy, text, usingGiphy])
+
+  useEffect(() => {
+    switch (status) {
+      case 'success':
+        setText('')
+        reset()
+        break
+    }
+  }, [reset, status])
+
+  useEffect(() => {
+    if (route.params.clear_input) {
+      setText('')
+      setUsingGiphy(false)
+      navigation.setParams({ ...route.params, clear_input: false })
+    }
+  }, [navigation, route.params])
+
+  const canSubmit = (() => {
+    if (isPending) return false
+    if (text.length > 0) return true
+    return false
+  })()
+  const disabled = !canSubmit
+
+  const handleSubmit = () => {
+    if (!canSubmit) return
+
+    if (canGiphy && usingGiphy) {
+      TextInput.State.blurTextInput(TextInput.State.currentlyFocusedInput())
+      navigation.navigate('SendGiphy', {
+        conversation_id: conversation.id,
+        search_term: text,
+      })
+    } else {
+      mutate({ text })
+    }
+  }
 
   return (
     <MessageFormContext.Provider
-      value={{ text, setText, onSubmit: () => mutate(), disabled: isPending }}
+      value={{
+        text,
+        setText,
+        onSubmit: handleSubmit,
+        disabled,
+        canGiphy,
+        usingGiphy,
+        setUsingGiphy,
+      }}
     >
       <View style={styles.textInputContainer}>{children}</View>
     </MessageFormContext.Provider>
@@ -79,38 +104,51 @@ function MessageFormRoot({ conversation, children }: MessagesFormRootProps) {
 
 function MessageFormInput() {
   const styles = useMessageFormStyles()
-  const { text, setText, onSubmit } = React.useContext(MessageFormContext)
+  const { text, setText, onSubmit, usingGiphy } = React.useContext(MessageFormContext)
 
   return (
-    <TextInput
-      aria-disabled={true}
-      placeholder="Send a message"
-      onChangeText={setText}
-      value={text}
-      style={styles.textInput}
-      onSubmitEditing={onSubmit}
-    />
+    <View style={styles.textInput}>
+      {usingGiphy ? (
+        <View style={styles.giphyBadge}>
+          <Text>/Giphy</Text>
+        </View>
+      ) : null}
+
+      <TextInput
+        aria-disabled={true}
+        placeholder="Send a message"
+        onChangeText={setText}
+        value={text}
+        onSubmitEditing={onSubmit}
+      />
+    </View>
   )
 }
 
 function MessageFormSubmitBtn() {
   const styles = useMessageFormStyles()
-  const { onSubmit, disabled } = React.useContext(MessageFormContext)
+  const { onSubmit, disabled, usingGiphy } = React.useContext(MessageFormContext)
 
   return (
     <IconButton
       disabled={disabled}
-      accessibilityLabel="Send message"
+      accessibilityLabel={usingGiphy ? 'Search Giphy' : 'Send message'}
       size="md"
       appearance="neutral"
       style={styles.textInputSend}
-      name={'general.upArrow'}
+      name={usingGiphy ? 'general.search' : 'general.upArrow'}
       onPress={onSubmit}
     />
   )
 }
 
 function MessageFormAttachmentPicker() {
+  const { usingGiphy } = React.useContext(MessageFormContext)
+
+  if (usingGiphy) {
+    return null
+  }
+
   return (
     <IconButton
       accessibilityLabel="Shazam"
@@ -122,8 +160,32 @@ function MessageFormAttachmentPicker() {
 }
 
 function MessageFormCommands() {
+  const { canGiphy, usingGiphy, setUsingGiphy } = React.useContext(MessageFormContext)
+
+  if (!canGiphy) {
+    return null
+  }
+
+  if (usingGiphy) {
+    return (
+      <IconButton
+        accessibilityLabel="Exit Giphy Search"
+        size="md"
+        appearance="neutral"
+        name={'general.x'}
+        onPress={() => setUsingGiphy(false)}
+      />
+    )
+  }
+
   return (
-    <IconButton accessibilityLabel="Shazam" size="md" appearance="neutral" name={'general.bolt'} />
+    <IconButton
+      accessibilityLabel="Search Giphy"
+      size="md"
+      appearance="neutral"
+      name={'general.bolt'}
+      onPress={() => setUsingGiphy(true)}
+    />
   )
 }
 
@@ -148,12 +210,19 @@ const useMessageFormStyles = () => {
       paddingHorizontal: 20,
       borderColor: theme.colors.fillColorNeutral050Base,
       flex: 1,
+      flexDirection: 'row',
+      gap: 12,
+    },
+    giphyBadge: {
+      backgroundColor: theme.colors.fillColorNeutral050Base,
+      borderRadius: 24,
+      padding: 8,
+      paddingHorizontal: 12,
     },
     textInputSend: {
       borderRadius: 24,
       height: 36,
       width: 36,
-      backgroundColor: theme.colors.fillColorNeutral040,
     },
   })
 }

package/src/components/conversations/action_toggle_button.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Pressable, StyleSheet, type PressableProps } from 'react-native'
+import { StyleSheet } from 'react-native'
+import { Pressable, type PressableProps } from 'react-native-gesture-handler'
 import { Icon, IconString, Spinner, Text } from '../display'
 import { useCreateAndroidRippleColor, useTheme } from '../../hooks'
 import { platformFontWeightMedium, platformPressedOpacityStyle } from '../../utils/styles'