@planningcenter/chat-react-native 3.2.0-rc.9 → 3.3.0

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/message_form_attachment_image.tsx

@@ -0,0 +1,121 @@
+import React from 'react'
+import {
+  AnimatableNumericValue,
+  DimensionValue,
+  Image as ReactNativeImage,
+  StyleSheet,
+  View,
+} from 'react-native'
+import { FileAttachment } from '../../../hooks/use_attachment_uploader'
+import { useTheme } from '../../../hooks'
+import { Icon, IconButton, Spinner } from '../../display'
+
+interface Props {
+  uri: string
+  alt: string
+  status: FileAttachment['status']
+  width?: number
+  height?: number
+  removeAttachment: () => void
+}
+
+export function MessageFormAttachmentImage({ uri, alt, status, removeAttachment }: Props) {
+  function opacity() {
+    if (status === 'uploading') {
+      return 0.5
+    }
+    return 1
+  }
+  const styles = useStyles({
+    width: 50,
+    height: 50,
+    borderRadius: 8,
+  })
+  const loading = status === 'uploading'
+  const error = status === 'error'
+  const ready = status === 'success'
+
+  return (
+    <View
+      accessible={Boolean(alt)}
+      accessibilityRole="image"
+      accessibilityState={{ busy: loading }}
+    >
+      <ReactNativeImage source={{ uri }} style={[styles.image, { opacity: opacity() }]} alt={alt} />
+      {ready && (
+        <IconButton
+          name="general.x"
+          accessibilityLabel="Remove Attachment"
+          size="md"
+          style={styles.removeAttachmentIcon}
+          onPress={removeAttachment}
+        />
+      )}
+      {loading && (
+        <View style={[styles.loadingBackground]}>
+          <Spinner size={24} />
+        </View>
+      )}
+      {error && (
+        <View style={styles.errorBackground}>
+          <View style={styles.errorIconBackground}>
+            <Icon name="churchCenter.exclamationCircle" size={18} color="red" />
+          </View>
+        </View>
+      )}
+    </View>
+  )
+}
+
+interface Styles {
+  width: DimensionValue
+  height: DimensionValue
+  borderRadius: AnimatableNumericValue | string
+}
+
+const useStyles = ({ width, height, borderRadius }: Styles) => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    image: {
+      backgroundColor: colors.fillColorNeutral070,
+      width,
+      height,
+      borderRadius,
+    },
+    removeAttachmentIcon: {
+      position: 'absolute',
+      top: 4,
+      right: 4,
+      backgroundColor: 'rgba(255, 255, 255, 0.5)',
+      borderRadius: 24,
+      width: 24,
+      height: 24,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    loadingBackground: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      borderRadius,
+      width,
+      height,
+    },
+    errorBackground: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      borderRadius,
+      width,
+      height,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    errorIconBackground: {
+      backgroundColor: 'white',
+      padding: 2,
+      borderRadius: 50,
+    },
+  })
+}