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

package/src/contexts/chat_context.tsx

@@ -6,12 +6,12 @@ import { ENV, PartialToken, ResponseError, Session } from '../utils'
 import { ChatTheme, defaultTheme, DefaultTheme } from '../utils/theme'
 
 export type ChatContextValue = {
-  token?: PartialToken
-  onUnauthorizedResponse: (_response: ResponseError) => void
-  theme: ChatTheme
   env?: ENV
-  session: Session
   giphyApiKey?: string
+  onUnauthorizedResponse: (_response: ResponseError) => void
+  session: Session
+  theme: ChatTheme
+  token?: PartialToken
 }
 
 export interface ChatProviderProps extends Omit<ChatContextValue, 'client' | 'theme' | 'session'> {
@@ -19,12 +19,12 @@ export interface ChatProviderProps extends Omit<ChatContextValue, 'client' | 'th
 }
 
 export const ChatContext = createContext<ChatContextValue>({
-  theme: defaultTheme('light'),
-  token: undefined,
   env: undefined,
+  giphyApiKey: undefined,
   onUnauthorizedResponse: () => {},
   session: new Session(),
-  giphyApiKey: undefined,
+  theme: defaultTheme('light'),
+  token: undefined,
 })
 
 export function ChatProvider({ children, value }: { children: any; value: ChatProviderProps }) {

package/src/contexts/conversations_context.tsx

@@ -36,7 +36,7 @@ const ConversationsContext = createContext<ConversationsContextValue>({
 
 export const ConversationsContextProvider = ({
   children,
-  args,
+  args = {},
 }: PropsWithChildren<{ args: ConversationFiltersParams }>) => {
   const [activeConversationId, setActiveConversationId] = useState<number | undefined>()
   const { chat_group_graph_id, group_source_app_name } = args

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/groups/use_group_members_for_new_conversation.ts

@@ -0,0 +1,74 @@
+import { MemberBadge, MemberResource, ResourceObject } from '../../types'
+import { GroupsGroupMemberResource } from '../../types/resources/groups/groups_member_resource_with_person'
+import { useApiPaginator } from '../use_api'
+import { useCurrentPerson } from '../use_current_person'
+
+type UseApiPaginatorResult<T extends ResourceObject> = ReturnType<typeof useApiPaginator<T>>
+
+export type GroupMembersForNewConversationResult = Omit<
+  UseApiPaginatorResult<GroupsGroupMemberResource>, // We are passing our own "members" data shape
+  'data'
+> & {
+  data: MemberResource[]
+  adultMembers: MemberResource[]
+  childMembers: MemberResource[]
+}
+
+/**
+ * This is specifically for the new conversation screen because we assign
+ * the "Conversation owner" badge to the current person.
+ */
+export function useGroupMembersForNewConversation({ id }: { id: number }) {
+  const currentPerson = useCurrentPerson()
+  const response = useApiPaginator<GroupsGroupMemberResource>({
+    url: `/me/groups/${id}/memberships`,
+    data: {
+      perPage: 100,
+      include: ['person'],
+      fields: {
+        Membership: ['person, role'],
+        Person: ['avatar_url', 'name', 'first_name', 'last_name', 'child'],
+      },
+    },
+    app: 'groups',
+  })
+
+  const { data: memberships = [] } = response
+  const members: MemberResource[] = memberships.map(membership => {
+    const { person } = membership
+    return {
+      type: 'Member',
+      avatar: person.avatarUrl,
+      badges: buildBadges(membership, currentPerson.id),
+      child: person.child,
+      id: +person.id,
+      name: `${person.firstName} ${person.lastName}`,
+      source: [],
+      role: membership.role,
+    }
+  })
+  const adultMembers = members.filter(member => !member.child)
+  const childMembers = members.filter(member => member.child)
+
+  return {
+    ...response,
+    data: members,
+    adultMembers,
+    childMembers,
+  }
+}
+
+function buildBadges(
+  membership: GroupsGroupMemberResource,
+  currentPersonId: number
+): MemberBadge[] {
+  const { person } = membership
+  const badges = []
+  if (membership.role === 'leader') {
+    badges.push({ title: 'Leader' })
+  }
+  if (person.id === currentPersonId) {
+    badges.push({ title: 'Conversation owner' })
+  }
+  return badges
+}

package/src/hooks/groups/use_groups_conversation_create.ts

@@ -0,0 +1,50 @@
+import { useMutation } from '@tanstack/react-query'
+import { ApiResource, ConversationResource, ResourceObject } from '../../types'
+import { useApiClient } from '../use_api_client'
+
+interface Props {
+  groupId: number
+  title?: string
+  onSuccess: (conversationId: number) => void
+}
+
+export function useGroupsConversationCreate({ groupId, title, onSuccess }: Props) {
+  const apiClient = useApiClient()
+  return useMutation({
+    throwOnError: true,
+    onSuccess: result => {
+      onSuccess && onSuccess(result.data.id)
+    },
+    mutationFn: () =>
+      apiClient.groups
+        .post<ApiResource<ChatConversationPayload>>({
+          url: `/me/groups/${groupId}/chat_conversation_payload`,
+          data: {
+            data: {
+              type: '',
+              attributes: {
+                title,
+              },
+            },
+          },
+        })
+        .then(res => res.data.value)
+        .then(payload =>
+          apiClient.chat.post<ApiResource<ConversationResource>>({
+            url: '/me/conversations',
+            data: {
+              data: {
+                type: 'Conversation',
+                attributes: {
+                  payload,
+                },
+              },
+            },
+          })
+        ),
+  })
+}
+
+interface ChatConversationPayload extends ResourceObject {
+  value: string
+}

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

@@ -4,10 +4,10 @@ import {
   useInfiniteQuery,
   useQuery,
 } from '@tanstack/react-query'
-import { ApiCollection, ApiResource, ResourceObject } from '../types'
+import { ApiCollection, ApiError, ApiResource, ResourceObject } from '../types'
 import { GetRequest, RequestData } from '../utils/client/types'
 import { App, useApiClient } from './use_api_client'
-import { getRequestQueryKey } from './use_suspense_api'
+import { getRequestQueryKey, RequestQueryKey } from './use_suspense_api'
 
 interface ApiGetOptions extends GetRequest {
   app?: App
@@ -16,9 +16,15 @@ interface ApiGetOptions extends GetRequest {
 
 export const useApiGet = <T extends ResourceObject | ResourceObject[]>(args: ApiGetOptions) => {
   type Resource = ApiResource<T>
+  const apiClient = useApiClient()
 
-  const { data, ...query } = useQuery<Resource, Response>({
+  const { data, ...query } = useQuery<Resource, ApiError>({
     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>
+    },
     enabled: args.enabled,
   })
 
@@ -30,19 +36,19 @@ 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<
     ApiCollection<T>,
-    Response,
+    ApiError,
     InfiniteData<ApiCollection<T>>,
     any,
     Partial<RequestData> | undefined
@@ -56,7 +62,7 @@ export const useApiPaginator = <T extends ResourceObject>(
       const offset = pageParam?.offset || args.data.offset
       const data = { ...args.data, where, offset }
 
-      return apiClient[app].get({
+      return apiClient[app].get<ApiCollection<T>>({
         url: args.url,
         data,
       })

package/src/hooks/use_api_client.ts

@@ -1,6 +1,7 @@
 import { useContext, useMemo } from 'react'
 import { ChatContext } from '../contexts/chat_context'
 import { Client } from '../utils/client'
+import { Uri } from '../utils'
 
 export type App = 'chat' | 'groups' | 'services'
 const apps: App[] = ['chat', 'groups', 'services']
@@ -9,18 +10,21 @@ export type ApiClient = { [_K in App]: Client }
 
 export const useApiClient = () => {
   const { session, onUnauthorizedResponse } = useContext(ChatContext)
+
+  const uri = useMemo(() => new Uri({ session }), [session])
+
   const api = useMemo(
     () =>
       apps.reduce((acc, app) => {
         acc[app] = new Client({
-          app,
-          session,
+          root: uri.api(`/${app}/v2`),
+          defaultHeaders: uri.headers,
           version: '2018-11-01',
           onUnauthorizedResponse,
         })
         return acc
       }, {} as ApiClient),
-    [session, onUnauthorizedResponse]
+    [uri, onUnauthorizedResponse]
   )
 
   return api

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_conversation.ts

@@ -66,6 +66,7 @@ export const useConversationMute = ({ conversation_id }: { conversation_id: numb
       })
     },
     onSuccess: (response: ApiResource<ConversationResource>) => {
+      queryClient.invalidateQueries({ queryKey: ['/me/conversations'] })
       queryClient.setQueryData<ApiResource<ConversationResource>>(queryKey, prev => {
         if (!prev?.data) return prev
 

package/src/hooks/use_conversations_actions.ts

@@ -4,6 +4,7 @@ import { useConversationsContext } from '../contexts/conversations_context'
 import { ApiResource, ConversationResource } from '../types'
 import { useApiClient } from './use_api_client'
 import { useConversationsCache } from './use_conversations_cache'
+import { useCurrentPersonCache } from './use_current_person'
 
 export const useConversationsMarkRead = ({
   conversation,
@@ -12,14 +13,24 @@ export const useConversationsMarkRead = ({
 }) => {
   const apiClient = useApiClient()
   const { args } = useConversationsContext()
+  const currentPersonCache = useCurrentPersonCache()
   const { update, invalidate } = useConversationsCache(args)
 
+  function handlePersonUnreadCount(read: boolean) {
+    currentPersonCache.update({}, person => {
+      const currentUnread = person.unreadCount
+      const updatedUnread = read ? Math.max(currentUnread - 1, 0) : currentUnread + 1
+      return { ...person, unreadCount: updatedUnread }
+    })
+  }
+
   const { mutate: handleMarkRead, ...mutation } = useMutation({
     onMutate: async (read: boolean) => {
       update({
         ...conversation,
         unreadCount: read ? 0 : 1,
       })
+      handlePersonUnreadCount(read)
     },
     mutationKey: ['markRead', conversation.id],
     mutationFn: async (read: boolean) => {

package/src/hooks/use_conversations_jolt_events.ts

@@ -1,13 +1,14 @@
 import { JoltConversationEvent } from '../types/jolt_events'
 import { ConversationRequestArgs } from '../utils/request/conversation'
 import { useConversationsCache } from './use_conversations_cache'
-import { useCurrentPerson } from './use_current_person'
+import { useCurrentPerson, useCurrentPersonCache } from './use_current_person'
 import { useJoltChannel, useJoltEvent } from './use_jolt'
 
 export function useConversationsJoltEvents(args?: Partial<ConversationRequestArgs>) {
   const currentPerson = useCurrentPerson()
   const joltChannel = useJoltChannel(`chat.people.${currentPerson.id}`)
   const cache = useConversationsCache(args)
+  const currentPersonCache = useCurrentPersonCache()
 
   useJoltEvent(joltChannel, 'conversation.updated', (e: JoltConversationEvent) =>
     cache.fetchUpdate({ id: e.data.data.id })
@@ -18,4 +19,7 @@ export function useConversationsJoltEvents(args?: Partial<ConversationRequestArg
   useJoltEvent(joltChannel, 'conversation.destroyed', (e: JoltConversationEvent) =>
     cache.destroy({ id: e.data.data.id })
   )
+
+  useJoltEvent(joltChannel, 'STREAM_USER_UPDATED', currentPersonCache.invalidate) // Would be nice to have a non-stream chat event
+  useJoltEvent(joltChannel, 'conversation.read', currentPersonCache.invalidate)
 }

package/src/hooks/use_current_person.ts

@@ -1,15 +1,43 @@
+import { useQueryClient } from '@tanstack/react-query'
 import { CurrentPersonResource } from '../types'
-import { useSuspenseGet } from './use_suspense_api'
+import { getRequestQueryKey, useSuspenseGet } from './use_suspense_api'
+import { ApiResource } from '../types/api_primitives'
 
-export const useCurrentPerson = () => {
-  const { data: person } = useSuspenseGet<CurrentPersonResource>({
-    url: '/me',
-    data: {
-      fields: {
-        Person: ['id', 'name', 'avatar', 'can_chat', 'unread_count', 'pco_chat_enabled'],
-      },
+export const currentPersonRequestArgs = {
+  url: '/me',
+  data: {
+    fields: {
+      Person: ['id', 'name', 'avatar', 'can_chat', 'unread_count', 'pco_chat_enabled'],
     },
-  })
+  },
+}
+
+export const currentPersonQueryKey = getRequestQueryKey(currentPersonRequestArgs)
+
+export const useCurrentPerson = () => {
+  const { data: person } = useSuspenseGet<CurrentPersonResource>(currentPersonRequestArgs)
 
   return person
 }
+
+type ProcessRecord<T> = (record: T, update: Partial<T>) => T
+
+export const useCurrentPersonCache = () => {
+  const queryClient = useQueryClient()
+  const handleUpdate = (
+    update: Partial<CurrentPersonResource>,
+    processRecord: ProcessRecord<CurrentPersonResource> = (r, u) => ({ ...r, ...u })
+  ) => {
+    queryClient.setQueryData<ApiResource<CurrentPersonResource>>(currentPersonQueryKey, data => {
+      if (!data) return data
+
+      return { ...data, data: processRecord(data.data, update) }
+    })
+  }
+
+  const handleInvalidate = () => {
+    queryClient.invalidateQueries({ queryKey: currentPersonQueryKey })
+  }
+
+  return { update: handleUpdate, invalidate: handleInvalidate }
+}

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),
     })
   }