@planningcenter/chat-react-native 3.2.0-rc.25 → 3.2.0-rc.27

package/src/hooks/attachments/supported_extensions.ts

@@ -0,0 +1,47 @@
+export const SUPPORTED_EXTENSIONS = [
+  '.3ga',
+  '.3gp',
+  '.aac',
+  '.amr',
+  '.avi',
+  '.bmp',
+  '.doc',
+  '.docx',
+  '.gif',
+  '.h263',
+  '.h264',
+  '.heic',
+  '.heif',
+  '.jpeg',
+  '.jpg',
+  '.key',
+  '.m4a',
+  '.m4b',
+  '.m4p',
+  '.m4r',
+  '.m4v',
+  '.mkv',
+  '.mov',
+  '.mp3',
+  '.mp4',
+  '.mp4-latm',
+  '.mpeg',
+  '.mpeg4',
+  '.mpg',
+  '.numbers',
+  '.ogg',
+  '.pages',
+  '.pdf',
+  '.png',
+  '.ppt',
+  '.pptx',
+  '.rtf',
+  '.txt',
+  '.vcf',
+  '.wav',
+  '.webm',
+  '.webp',
+  '.wmv',
+  '.xls',
+  '.xlsx',
+]

package/src/hooks/index.ts

@@ -6,3 +6,7 @@ export * from './use_font_scale'
 export * from './use_create_android_ripple_color'
 export * from './use_chat_permissions'
 export * from './use_api_client'
+export * from './use_groups_groups'
+export * from './use_groups'
+export * from './use_api'
+export * from './use_api_client'

package/src/hooks/use_api.ts

@@ -36,14 +36,14 @@ type NextMeta = Partial<{
   idLt: string
 }>
 
-export type SuspensePaginatorOptions = Omit<
+export type PaginatorOptions = Omit<
   AnyUseSuspenseInfiniteQueryOptions,
   'getNextPageParam' | 'initialPageParam' | 'queryFn' | 'queryKey'
 >
 
 export const useApiPaginator = <T extends ResourceObject>(
   args: ApiGetOptions,
-  opts?: SuspensePaginatorOptions
+  opts?: PaginatorOptions
 ) => {
   const apiClient = useApiClient()
   const query = useInfiniteQuery<

package/src/hooks/use_attachment_uploader.ts

@@ -0,0 +1,179 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { SUPPORTED_EXTENSIONS } from './attachments/supported_extensions'
+import { FileForUploadClient, useUploadClient } from './use_upload_client'
+import { useApiClient } from './use_api_client'
+import { ApiResource } from '../types'
+
+type AttachmentStatus = 'uploading' | 'success' | 'error'
+
+interface AttachmentFile extends FileForUploadClient {
+  size: number
+  width?: number
+  height?: number
+}
+
+export interface FileAttachment {
+  id?: string
+  file: AttachmentFile
+  status: AttachmentStatus
+}
+
+interface UploadState {
+  [fileName: string]: {
+    status: AttachmentStatus
+    id?: string
+  }
+}
+
+interface FileError {
+  file_type?: string[]
+  file_size?: boolean
+}
+
+const MAX_FILE_SIZE_IN_MB = 50
+const MAX_FILE_SIZE_IN_BYTES = MAX_FILE_SIZE_IN_MB * 1024 * 1024
+const MAX_NUMBER_OF_ATTACHMENTS = 10
+
+export function useAttachmentUploader({ conversationId }: { conversationId: number }) {
+  const apiClient = useApiClient()
+  const uploadApi = useUploadClient()
+  const [attachments, setAttachments] = useState<FileAttachment[]>([])
+  const uploadState = useRef<UploadState>({})
+  const [lastUploadId, setLastUploadId] = useState<string>()
+  const numberOfAttachments = attachments.length
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
+
+  const handleFilesAttached = useCallback(
+    (files: AttachmentFile[]) => {
+      const fileErrors = {} as FileError
+
+      const validFiles = files.filter(file => {
+        const extension = file.name.split('.').pop() as string
+        const isValidExtension = SUPPORTED_EXTENSIONS.includes(`.${extension}`)
+        const isValidFileSize = file.size <= MAX_FILE_SIZE_IN_BYTES
+
+        if (!isValidExtension) {
+          fileErrors.file_type ||= []
+          fileErrors.file_type.push(extension)
+        }
+        if (!isValidFileSize) {
+          fileErrors.file_size = true
+        }
+
+        return isValidFileSize && isValidExtension
+      })
+
+      const errorMessages: string[] = []
+      if (fileErrors.file_type) {
+        errorMessages.push(
+          `The following file types are not supported: ${fileErrors.file_type.join(', ')}`
+        )
+      }
+      if (fileErrors.file_size) {
+        errorMessages.push(`File size exceeds ${MAX_FILE_SIZE_IN_MB} MB`)
+      }
+      if (numberOfAttachments + validFiles.length > MAX_NUMBER_OF_ATTACHMENTS) {
+        errorMessages.push(`You can't attach more than ${MAX_NUMBER_OF_ATTACHMENTS} files at once.`)
+      }
+      if (errorMessages.length > 0) {
+        setErrorMessage(errorMessages.join('\n'))
+        return
+      }
+
+      const newAttachments: FileAttachment[] = validFiles.map(file => ({
+        file,
+        status: 'uploading',
+      }))
+
+      if (newAttachments && newAttachments.length > 0) {
+        setAttachments(prevAttachments => [...prevAttachments, ...newAttachments])
+
+        newAttachments.forEach(attachment => {
+          uploadApi
+            .uploadFile(attachment.file)
+            .then(({ id: uploadedFileId }) =>
+              apiClient.chat.post<ApiResource<MessageAttachmentResource>>({
+                url: `/me/conversations/${conversationId}/message_attachments`,
+                data: {
+                  data: {
+                    type: 'MessageAttachment',
+                    attributes: { uploaded_file_id: uploadedFileId },
+                  },
+                },
+              })
+            )
+            .then(({ data: { id: messageAttachmentId } }) => {
+              uploadState.current[attachment.file.name] = {
+                status: 'success',
+                id: messageAttachmentId,
+              }
+              setLastUploadId(messageAttachmentId)
+            })
+            .catch(() => {
+              uploadState.current[attachment.file.name] = {
+                status: 'error',
+              }
+              setLastUploadId(attachment.file.name)
+            })
+        })
+      }
+    },
+    [numberOfAttachments, uploadApi, apiClient.chat, conversationId]
+  )
+
+  useEffect(() => {
+    if (!lastUploadId) return
+
+    setLastUploadId(undefined)
+    setAttachments(
+      attachments.map(attachment => {
+        const state = uploadState.current[attachment.file.name]
+        if (state) {
+          return { ...attachment, id: state.id, status: state.status }
+        }
+        return attachment
+      })
+    )
+  }, [attachments, lastUploadId])
+
+  const removeAttachment = useCallback((attachment: FileAttachment) => {
+    setAttachments(prevAttachments =>
+      prevAttachments.filter(a => a.file.uri !== attachment.file.uri)
+    )
+  }, [])
+
+  const reset = useCallback(() => {
+    setAttachments([])
+    setErrorMessage(null)
+  }, [])
+
+  const pendingUploads = attachments.filter(a => a.status === 'uploading').length > 0
+
+  const attachmentIds = useMemo(
+    () => attachments.filter(a => a.status === 'success' && a.id).map(a => a.id as string),
+    [attachments]
+  )
+
+  return {
+    attachments,
+    attachmentIds,
+    handleFilesAttached,
+    removeAttachment,
+    reset,
+    pendingUploads,
+    errorMessage,
+    remainingAttachable: MAX_NUMBER_OF_ATTACHMENTS - numberOfAttachments,
+  }
+}
+
+interface MessageAttachmentResource {
+  type: 'MessageAttachment'
+  id: string
+  uploadedFileId: string
+  filename: string
+  messageSortKey: string
+  metadata: Record<string, unknown>
+  checksum: string
+  contentType: string
+  byteSize: number
+}

package/src/hooks/use_upload_client.ts

@@ -0,0 +1,67 @@
+import { useContext, useMemo } from 'react'
+import { ChatContext } from '../contexts/chat_context'
+import { UploadUri } from '../utils/upload_uri'
+import { Client } from '../utils'
+
+export interface FileForUploadClient {
+  uri: string
+  name: string
+  type: string // Should be a MIME type
+}
+
+export const useUploadClient = () => {
+  const { session, onUnauthorizedResponse } = useContext(ChatContext)
+
+  const uri = useMemo(() => new UploadUri({ session }), [session])
+
+  const api = useMemo(
+    () =>
+      new UploadClient({
+        version: '2025-05-16', // not really needed, but required by the Client constructor
+        root: uri.baseUrl,
+        defaultHeaders: uri.headers,
+        onUnauthorizedResponse,
+      }),
+    [uri, onUnauthorizedResponse]
+  )
+
+  return api
+}
+
+class UploadClient extends Client {
+  async uploadFile(file: FileForUploadClient): Promise<UploadedResource> {
+    const formData = new FormData()
+    formData.append('file', file as unknown as Blob)
+
+    const response = await fetch(`${this.root}/v2/files`, {
+      method: 'POST',
+      headers: this.headers,
+      body: formData,
+    })
+
+    if (!response.ok) {
+      return this.handleNotOk(response)
+    }
+
+    const jsonResponse = await response.json()
+
+    return jsonResponse.data[0]
+  }
+}
+
+interface UploadedResource {
+  id: string
+  type: string
+  attributes: {
+    organization_id: string
+    person_id: string
+    md5: string
+    created_at: string
+    expires_at: string
+    source_ip: string
+    name: string
+    content_type: string
+    file_size: number
+    location: string
+  }
+}

package/src/index.tsx

@@ -4,6 +4,7 @@ export { DesignSystemScreen } from './screens'
 export * from './navigation'
 export * from './types'
 export * from './utils/client'
+export { GroupConversations } from './components'
 
 export {
   TemporaryDefaultColorsType,

package/src/navigation/index.tsx

@@ -70,14 +70,11 @@ export const NewConversationStack = createNativeStackNavigator({
     },
     ConversationNew: {
       screen: ConversationNewScreen,
-      options: ({ navigation, route }) => ({
+      options: ({ navigation }) => ({
         title: 'New conversation',
         headerLeft: () => null,
         headerRight: (props: NativeStackHeaderRightProps) => (
-          <HeaderRightButton
-            {...props}
-            onPress={() => navigation.popTo('Conversations', route.params)}
-          >
+          <HeaderRightButton {...props} onPress={() => navigation.getParent()?.goBack()}>
             Cancel
           </HeaderRightButton>
         ),

package/src/screens/conversation_new/components/groups_form.tsx

@@ -3,23 +3,24 @@ import React, { useCallback, useMemo, useState } from 'react'
 import { Platform, StyleSheet, TextInput, View } from 'react-native'
 import { Banner, ChildNotice, Heading, Text } from '../../../components'
 import { ActionButton } from '../../../components/display/action_button'
-import { useCurrentPerson, useSuspenseGet } from '../../../hooks'
-import { GroupsGroupResource } from '../../../types'
-import { Divider, FormList } from './form_list'
-import { pluralize } from '../../../utils'
 import { KeyboardView } from '../../../components/display/keyboard_view'
+import { useCurrentPerson, useSuspenseGet, useTheme } from '../../../hooks'
 import {
-  useGroupMembersForNewConversation,
   GroupMembersForNewConversationResult,
+  useGroupMembersForNewConversation,
 } from '../../../hooks/groups/use_group_members_for_new_conversation'
 import { useGroupsConversationCreate } from '../../../hooks/groups/use_groups_conversation_create'
-import { useTheme } from '../../../hooks'
+import { GroupsGroupResource } from '../../../types'
+import { GraphId } from '../../../types/resources/group_resource'
+import { pluralize } from '../../../utils'
+import { Divider, FormList } from './form_list'
 
 type GroupsFormProps = {
   groupId: number
+  chat_group_graph_id?: GraphId
 }
 
-export const GroupsForm = ({ groupId }: GroupsFormProps) => {
+export const GroupsForm = ({ groupId, chat_group_graph_id }: GroupsFormProps) => {
   const navigation = useNavigation()
   const [title, setTitle] = useState<string>()
   const { data: group } = useSuspenseGet<GroupsGroupResource>({
@@ -36,16 +37,15 @@ export const GroupsForm = ({ groupId }: GroupsFormProps) => {
 
   const redirectToConversation = useCallback(
     (conversationId: number) => {
-      // exit from the create stack
-      navigation.getParent()?.goBack()
       // navigate to the conversation screen
       navigation.dispatch(
-        StackActions.push('Conversation', {
+        StackActions.popTo('Conversation', {
           conversation_id: conversationId,
+          chat_group_graph_id,
         })
       )
     },
-    [navigation]
+    [chat_group_graph_id, navigation]
   )
 
   const { mutate: handleSave } = useGroupsConversationCreate({

package/src/screens/conversation_new/conversation_new_screen.tsx

@@ -16,11 +16,15 @@ type ConversationNewScreenProps = StaticScreenProps<{
 }>
 
 export const ConversationNewScreen = ({ route }: ConversationNewScreenProps) => {
-  const { group_id, team_ids, source_app_name, plan_id } = route.params
+  const { group_id, team_ids, source_app_name, plan_id, chat_group_graph_id } = route.params
 
   switch (source_app_name) {
     case 'Groups':
-      return group_id ? <GroupsForm groupId={group_id} /> : <SourceAppErrorCard />
+      return group_id ? (
+        <GroupsForm groupId={group_id} chat_group_graph_id={chat_group_graph_id} />
+      ) : (
+        <SourceAppErrorCard />
+      )
     case 'Services':
       return <TeamsForm initialTeamIds={team_ids} initialPlanId={plan_id} />
     default:

package/src/screens/conversation_screen.tsx

@@ -2,6 +2,8 @@
 import { date as formatDate } from '@planningcenter/datetime-fmt'
 import { HeaderTitle, HeaderTitleProps, PlatformPressable } from '@react-navigation/elements'
 import {
+  CommonActions,
+  RouteProp,
   StaticScreenProps,
   useNavigation,
   useTheme as useNavigationTheme,
@@ -38,6 +40,7 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
   const { messages, refetch, isRefetching, fetchNextPage } = useConversationMessages({
     conversation_id,
   })
+  useEnsureConversationsRouteExists()
   const messagesWithSeparators = groupMessages(messages)
 
   // Seems to be necessary to define this way so we get the route picked up
@@ -70,7 +73,7 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
           onEndReached={() => fetchNextPage()}
         />
         <MessageForm.Root conversation={conversation}>
-          {/* <MessageForm.AttachmentPicker /> */}
+          <MessageForm.AttachmentPicker />
           <MessageForm.Commands />
           <MessageForm.TextInput />
           <MessageForm.SubmitButton />
@@ -232,3 +235,30 @@ const useStyles = () => {
     },
   })
 }
+
+/**
+ * useEnsureConversationsRouteExists
+ */
+const useEnsureConversationsRouteExists = () => {
+  const navigation = useNavigation()
+  const { params } = useRoute<RouteProp<ConversationScreenProps['route']>>()
+
+  useEffect(() => {
+    const navigationState = navigation.getState()
+    const routes = navigationState?.routes || []
+    const conversationsRoute = routes.find(r => r.name === 'Conversations')
+
+    if (conversationsRoute) return
+
+    navigation.dispatch(state => {
+      return CommonActions.reset({
+        ...state,
+        routes: [
+          { name: 'Conversations', params: { chat_group_graph_id: params?.chat_group_graph_id } },
+          ...routes,
+        ],
+        index: state.index + 1,
+      })
+    })
+  }, [navigation, params?.chat_group_graph_id])
+}

package/src/screens/conversations/conversations_screen.tsx

@@ -21,7 +21,7 @@ export function ConversationsScreen({ route }: ConversationScreenProps) {
   const canCreateConversations = useCanCreateConversations()
   const styles = useStyles()
 
-  const { chat_group_graph_id } = route.params
+  const { chat_group_graph_id } = route.params || {}
   const { sourceAppName, sourceId } = destructureChatGroupGraphId(chat_group_graph_id)
 
   const handleNewConversationNavigation = () => {

package/src/utils/native_adapters/configuration.ts

@@ -1,11 +1,13 @@
 import { AudioAdapter } from './audio'
 import { ClipboardAdapter } from './clipboard'
+import { ImagePickerAdapter } from './image_picker'
 import { VideoAdapter } from './video'
 
 type ChatConfigurations = {
   clipboard: ClipboardAdapter
   audio: AudioAdapter
   video: VideoAdapter
+  imagePicker: ImagePickerAdapter
 }
 
 export class ChatAdapters {
@@ -13,6 +15,7 @@ export class ChatAdapters {
     Clipboard = configurations.clipboard
     Audio = configurations.audio
     Video = configurations.video
+    ImagePicker = configurations.imagePicker
   }
 }
 
@@ -45,4 +48,15 @@ let Video: VideoAdapter = new VideoAdapter({
   ),
 })
 
-export { Clipboard, Audio, Video }
+let ImagePicker: ImagePickerAdapter = new ImagePickerAdapter({
+  openCameraAsync: async () => {
+    methodMissing()
+    return { canceled: true, assets: null }
+  },
+  openImageLibraryAsync: async () => {
+    methodMissing()
+    return { canceled: true, assets: null }
+  },
+})
+
+export { Clipboard, Audio, Video, ImagePicker }

package/src/utils/native_adapters/image_picker.ts

@@ -0,0 +1,31 @@
+export type ImagePickerAsset = {
+  uri: string
+  assetId?: string | null
+  width: number
+  height: number
+  mimeType?: string
+  fileName?: string | null
+  fileSize?: number
+}
+
+type ImagePickerSuccessResult = {
+  canceled: false
+  assets: ImagePickerAsset[]
+}
+
+type ImagePickerCanceledResult = {
+  canceled: true
+  assets: null
+}
+
+export type ImagePickerResult = ImagePickerSuccessResult | ImagePickerCanceledResult
+
+export class ImagePickerAdapter {
+  openCameraAsync: () => Promise<ImagePickerResult>
+  openImageLibraryAsync: () => Promise<ImagePickerResult>
+
+  constructor(methods: ImagePickerAdapter) {
+    this.openCameraAsync = methods.openCameraAsync
+    this.openImageLibraryAsync = methods.openImageLibraryAsync
+  }
+}

package/src/utils/native_adapters/index.ts

@@ -1,4 +1,5 @@
 export * from './clipboard'
 export * from './configuration'
 export * from './audio'
+export * from './image_picker'
 export * from './video'

package/src/utils/upload_uri.ts

@@ -0,0 +1,69 @@
+import DeviceInfo from 'react-native-device-info'
+import { Session } from './session'
+const brand = DeviceInfo.getBrand()
+const model = DeviceInfo.getModel()
+const systemName = DeviceInfo.getSystemName()
+const systemVersion = DeviceInfo.getSystemVersion()
+const readableVersion = DeviceInfo.getReadableVersion()
+const appName = DeviceInfo.getApplicationName()
+
+/**
+ * This is for accessing https://github.com/planningcenter/upload
+ */
+export class UploadUri {
+  session: Session
+  app?: string
+
+  constructor({ session }: { session: Session }) {
+    this.session = session
+  }
+
+  get schema() {
+    if (this.env === 'development') {
+      return 'http'
+    } else {
+      return 'https'
+    }
+  }
+
+  get host() {
+    return `${this.subdomain}.${this.domain}.${this.tld}`
+  }
+
+  get subdomain() {
+    switch (this.env) {
+      case 'staging':
+        return 'upload-staging'
+      default:
+        return 'upload'
+    }
+  }
+
+  get domain(): 'pco' | 'planningcenteronline' {
+    return this.env === 'development' ? 'pco' : 'planningcenteronline'
+  }
+
+  get tld() {
+    switch (this.env) {
+      case 'development':
+        return 'test'
+      default:
+        return 'com'
+    }
+  }
+
+  get env() {
+    return this.session?.env || 'production'
+  }
+
+  get baseUrl() {
+    return `${this.schema}://${this.host}`
+  }
+
+  get headers() {
+    return {
+      'User-Agent': `${appName}/${readableVersion} (${brand}, ${model}, ${systemName}, ${systemVersion})`,
+      Authorization: `Bearer ${this.session.token?.access_token}`,
+    }
+  }
+}