@planningcenter/chat-react-native 3.21.2-rc.4 → 3.22.0-rc.0

package/src/components/conversation/message_attachments.tsx

@@ -10,6 +10,7 @@ import { GiphyAttachment } from './attachments/giphy_attachment'
 import { GenericFileAttachment } from './attachments/generic_file_attachment'
 import { ExpandedLink } from './attachments/expanded_link'
 import { ImageAttachment, type MetaProps } from './attachments/image_attachment'
+import { useDeletingIds } from '../../hooks'
 
 export function MessageAttachments(props: {
   attachments: DenormalizedAttachmentResource[]
@@ -19,6 +20,7 @@ export function MessageAttachments(props: {
 }) {
   const styles = useStyles()
   const { attachments, metaProps, onMessageAttachmentLongPress, onMessageLongPress } = props
+  const deletingAttachmentIds = useDeletingIds('deleteAttachment')
   if (!attachments || attachments.length === 0) return null
 
   const imageAttachments = attachments.filter(
@@ -40,6 +42,7 @@ export function MessageAttachments(props: {
             currentImageIndex={index}
             metaProps={metaProps}
             onMessageAttachmentLongPress={onMessageAttachmentLongPress}
+            isDeleting={deletingAttachmentIds.has(image.id)}
           />
         ))}
 
@@ -51,6 +54,7 @@ export function MessageAttachments(props: {
                 key={`${attachment.id}-${index}`}
                 attachment={attachment}
                 onMessageAttachmentLongPress={onMessageAttachmentLongPress}
+                isDeleting={deletingAttachmentIds.has(attachment.id)}
               />
             )
           case 'giphy':
@@ -80,9 +84,11 @@ export function MessageAttachments(props: {
 function MessageAttachment({
   attachment,
   onMessageAttachmentLongPress,
+  isDeleting,
 }: {
   attachment: DenormalizedMessageAttachmentResource
   onMessageAttachmentLongPress: (attachment: DenormalizedMessageAttachmentResource) => void
+  isDeleting: boolean
 }) {
   const { attributes } = attachment
   const contentType = attributes?.contentType
@@ -94,6 +100,7 @@ function MessageAttachment({
         <VideoAttachment
           attachment={attachment}
           onMessageAttachmentLongPress={onMessageAttachmentLongPress}
+          isDeleting={isDeleting}
         />
       )
     case 'audio':
@@ -101,6 +108,7 @@ function MessageAttachment({
         <AudioAttachment
           attachment={attachment}
           onMessageAttachmentLongPress={onMessageAttachmentLongPress}
+          isDeleting={isDeleting}
         />
       )
     case 'application':
@@ -108,6 +116,7 @@ function MessageAttachment({
         <GenericFileAttachment
           attachment={attachment}
           onMessageAttachmentLongPress={onMessageAttachmentLongPress}
+          isDeleting={isDeleting}
         />
       )
     default:

package/src/contexts/session_context.tsx

@@ -0,0 +1,234 @@
+import { Session, ENV } from '../utils'
+import { FailedResponse, OAuthToken } from '../types'
+import { chatQueryClient } from './api_provider'
+import { QueryClient, useMutation } from '@tanstack/react-query'
+import React, {
+  createContext,
+  PropsWithChildren,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
+import { Alert } from 'react-native'
+import { useStorage } from '../hooks/use_storage'
+import { StorageAdapter } from '../utils/native_adapters/storage_adapter'
+
+export type SessionContextValue = {
+  env: ENV
+  setEnv: (_env: ENV) => void
+  session: Session
+  token: OAuthToken | undefined
+  handleUnauthorizedResponse: (_response: FailedResponse) => void
+  logout: () => void
+  setToken: (_token: OAuthToken) => void
+}
+
+export const SessionContext = createContext<SessionContextValue>({
+  env: 'production',
+  setEnv: () => null,
+  session: new Session(),
+  token: undefined,
+  handleUnauthorizedResponse: () => null,
+  logout: () => null,
+  setToken: () => null,
+})
+
+type Sessions = Record<ENV, string>
+const environments: ENV[] = ['production', 'staging', 'development']
+
+const initialSessions = environments.reduce((acc, env) => {
+  const sessionProps = { env, token: undefined }
+
+  acc[env] = new Session(sessionProps).toString()
+
+  return acc
+}, {} as Sessions)
+
+export type SessionContextConfig = {
+  // Storage adapters
+  storage: StorageAdapter // For non-sensitive data (env preference)
+  secureStorage: StorageAdapter // For sensitive data (tokens/sessions)
+
+  // Functional callbacks
+  refreshTokenFn: (params: { refresh_token: string; env: ENV }) => Promise<OAuthToken>
+  onLogout: () => void | Promise<void>
+
+  // Optional configuration
+  storageKeys?: {
+    env?: string
+    sessions?: string
+  }
+  alertConfig?: {
+    title?: string
+    message?: string
+    retryText?: string
+    logoutText?: string
+  }
+  defaultEnv?: ENV
+}
+
+export function SessionContextProvider({
+  children,
+  queryClient,
+  config,
+}: PropsWithChildren<{ queryClient: QueryClient; config: SessionContextConfig }>) {
+  const {
+    storage,
+    secureStorage,
+    refreshTokenFn,
+    onLogout,
+    storageKeys = {},
+    alertConfig = {},
+    defaultEnv = 'production',
+  } = config
+
+  const envKey = storageKeys.env || 'env'
+  const sessionsKey = storageKeys.sessions || 'sessions-storage'
+
+  const [env, setEnv] = useStorage<ENV>(storage, envKey, defaultEnv)
+  const [sessions, setSessions] = useStorage<Sessions>(secureStorage, sessionsKey, initialSessions)
+  const [alertShown, setAlertShown] = useState(false)
+  const session = useMemo(() => Session.hydrate<OAuthToken>(sessions[env]), [sessions, env])
+  const { token } = session
+
+  const {
+    mutate: refreshToken,
+    isPending: isRefreshingToken,
+    isError: isRefreshError,
+  } = useMutation({
+    mutationKey: ['refresh-token', token?.refresh_token],
+    mutationFn: () => {
+      if (!token?.refresh_token) {
+        return Promise.reject(new Error('Refresh token is required'))
+      }
+      return refreshTokenFn({ refresh_token: token.refresh_token, env: session.env }).then(
+        handleTokenUpdate
+      )
+    },
+    onError: (t: Partial<FailedResponse>) => {
+      handleRefreshFailed(t)
+    },
+  })
+
+  const handleClearQueryClient = useCallback(() => {
+    chatQueryClient.clear()
+    queryClient.clear()
+  }, [queryClient])
+
+  const handleSetEnv = useCallback(
+    (_env: ENV) => {
+      setEnv(_env)
+      handleClearQueryClient()
+    },
+    [handleClearQueryClient, setEnv]
+  )
+
+  const handleLogout = useCallback(async () => {
+    handleClearQueryClient()
+
+    return setSessions({
+      ...sessions,
+      [env]: new Session({ env }).toString(),
+    }).then(() => onLogout())
+  }, [env, sessions, setSessions, handleClearQueryClient, onLogout])
+
+  const handleTokenUpdate = useCallback(
+    (t: OAuthToken) => {
+      if (!t || !session) return t
+
+      session.token = t
+
+      return setSessions({
+        ...sessions,
+        [env]: session?.toString(),
+      }).then(() => t)
+    },
+    [env, session, sessions, setSessions]
+  )
+
+  const handleRefreshFailed = useCallback(
+    (t: Partial<FailedResponse>) => {
+      if (t.status !== 401) return
+      // If we didn't fail because of an unauthorized response ( 401 ),
+      // it could be because we were unable to store the token.
+      // Do not log out.
+
+      const { errors = [] } = t
+      // The code for a forced logout is "capuchin"
+      const isForcedLogout = errors.some((e: { detail?: string }) =>
+        /capuchin/i.test(e.detail || '')
+      )
+
+      if (isForcedLogout) {
+        handleLogout()
+      }
+    },
+    [handleLogout]
+  )
+
+  const handleUnauthorizedResponse = useCallback(
+    async (response: FailedResponse) => {
+      const { errors = [] } = response
+
+      const isUnauthorized = errors.some((e: { detail?: string }) =>
+        /TRASH_PANDA/i.test(e.detail || '')
+      )
+
+      if (isUnauthorized) return
+
+      const isForcedLogout = errors.some((e: { detail?: string }) =>
+        /capuchin/i.test(e.detail || '')
+      )
+      const isExpiredToken = errors.some((e: { detail?: string }) => /baboon/i.test(e.detail || ''))
+
+      if (!isRefreshingToken || isExpiredToken || isForcedLogout) {
+        refreshToken()
+      }
+    },
+    [refreshToken, isRefreshingToken]
+  )
+
+  const sessionContextValue: SessionContextValue = {
+    env: session.env,
+    token: session.token,
+    session,
+    logout: handleLogout,
+    setToken: handleTokenUpdate,
+    handleUnauthorizedResponse,
+    setEnv: handleSetEnv,
+  }
+
+  const alertTitle = alertConfig.title || 'Oops'
+  const alertMessage = alertConfig.message || 'Something went wrong with your login!'
+  const retryText = alertConfig.retryText || 'Keep trying'
+  const logoutText = alertConfig.logoutText || 'Logout'
+
+  useEffect(() => {
+    if (isRefreshError && !alertShown && token?.refresh_token) {
+      setAlertShown(true)
+      Alert.alert(alertTitle, alertMessage, [
+        {
+          text: retryText,
+          onPress: () => {
+            refreshToken()
+            setAlertShown(false)
+          },
+        },
+        { text: logoutText, onPress: () => handleLogout() },
+      ])
+    }
+  }, [
+    isRefreshError,
+    handleLogout,
+    alertShown,
+    refreshToken,
+    token?.refresh_token,
+    alertTitle,
+    alertMessage,
+    retryText,
+    logoutText,
+  ])
+
+  return <SessionContext.Provider value={sessionContextValue}>{children}</SessionContext.Provider>
+}

package/src/hooks/index.ts

@@ -3,6 +3,7 @@ export * from './use_animated_message_background_color'
 export * from './use_theme'
 export * from './use_suspense_api'
 export * from './use_current_person'
+export * from './use_deleting_ids'
 export * from './use_font_scale'
 export * from './use_create_android_ripple_color'
 export * from './use_chat_permissions'

package/src/hooks/use_deleting_ids.ts

@@ -0,0 +1,22 @@
+import { useMutationState } from '@tanstack/react-query'
+import { useMemo } from 'react'
+
+type DeletableResourceEvent = 'deleteAttachment'
+
+export function useDeletingIds(event: DeletableResourceEvent): Set<string> {
+  const ids = useMutationState({
+    filters: {
+      mutationKey: [event],
+      status: 'pending',
+    },
+    select: mutation => {
+      // Extract the item ID from the mutation key: [ event, id ]
+      const key = mutation.options.mutationKey
+      return key && Array.isArray(key) && typeof key[1] === 'string' ? key[1] : null
+    },
+  })
+
+  return useMemo(() => {
+    return new Set(ids.filter(id => id !== null))
+  }, [ids])
+}

package/src/screens/attachment_actions/attachment_actions_screen.tsx

@@ -44,10 +44,17 @@ export function AttachmentActionsScreen({ route }: AttachmentActionsScreenProps)
       'Are you sure you want to permanently delete this attachment?',
       [
         { text: 'Cancel', style: 'cancel' },
-        { text: 'Delete', style: 'destructive', onPress: () => handleDeleteAttachment() },
+        {
+          text: 'Delete',
+          style: 'destructive',
+          onPress: () => {
+            handleDeleteAttachment()
+            navigation.goBack()
+          },
+        },
       ]
     )
-  }, [attachmentName, handleDeleteAttachment])
+  }, [attachmentName, handleDeleteAttachment, navigation])
 
   const handleOpenInBrowser = () => {
     Linking.openURL(attachmentUrl)

package/src/screens/attachment_actions/hooks/useDeleteAttachment.tsx

@@ -1,5 +1,4 @@
 import { Alert } from 'react-native'
-import { useNavigation } from '@react-navigation/native'
 import { useMutation } from '@tanstack/react-query'
 import { useApiClient } from '../../../hooks/use_api_client'
 import { useCallback } from 'react'
@@ -18,7 +17,6 @@ export function useDeleteAttachment({
   attachmentName,
 }: UseDeleteAttachmentProps) {
   const apiClient = useApiClient()
-  const navigation = useNavigation()
   const { refetch } = useConversationMessages({ conversation_id }, { refetchOnMount: false })
 
   const deleteAttachment = useCallback(() => {
@@ -29,10 +27,10 @@ export function useDeleteAttachment({
 
   const { mutate: handleDeleteAttachment } = useMutation({
     mutationFn: deleteAttachment,
+    mutationKey: ['deleteAttachment', attachmentId],
     onSuccess: () => {
       refetch()
       Haptic.notificationSuccess()
-      navigation.goBack()
     },
     onError: () => {
       Alert.alert(