@planningcenter/chat-react-native 3.39.1-rc.0 → 3.39.1-rc.2

package/src/hooks/use_attachment_uploader.ts

@@ -21,9 +21,11 @@ export interface FileError {
 export function useAttachmentUploader({
   conversationId,
   draftAttachments,
+  onFlaggedInMessageForm,
 }: {
   conversationId: number
   draftAttachments?: FileAttachment[]
+  onFlaggedInMessageForm?: (id: string) => void
 }) {
   const apiClient = useApiClient()
   const uploadApi = useUploadClient()
@@ -31,18 +33,26 @@ export function useAttachmentUploader({
     useChatConfiguration()
   const maxFileSizeInMb = Number((maxFileSizeInBytes / (1024 * 1024)).toFixed(1))
   const [attachments, setAttachments] = useState<FileAttachment[]>(() => draftAttachments || [])
+  const attachmentsRef = useRef<FileAttachment[]>(draftAttachments ?? [])
   const uploadState = useRef<FileUploadState>({})
   const [lastUploadId, setLastUploadId] = useState<string>()
   const numberOfAttachments = attachments.length
   const [errorMessage, setErrorMessage] = useState<string | null>(null)
 
+  useEffect(() => {
+    attachmentsRef.current = attachments
+  }, [attachments])
+
   const { data: currentPerson } = useApiGet<CurrentPersonResource>(currentPersonRequestArgs)
   const joltChannel = useJoltChannel(`chat.people.${currentPerson?.id}`, Boolean(currentPerson?.id))
   useJoltEvent(joltChannel, 'attachment.flagged', (e: AttachmentFlaggedEvent) => {
     const flaggedId = e.data.data.attachment_id
-    setAttachments(prev =>
-      prev.map(a => (a.id === flaggedId ? { ...a, flagged: true, status: 'error' } : a))
-    )
+    if (attachmentsRef.current.some(a => a.id === flaggedId)) {
+      setAttachments(prev =>
+        prev.map(a => (a.id === flaggedId ? { ...a, flagged: true, status: 'error' } : a))
+      )
+      onFlaggedInMessageForm?.(flaggedId)
+    }
   })
 
   const handleFilesAttached = useCallback(

package/src/hooks/use_video_moderation_jolt_events.ts

@@ -0,0 +1,46 @@
+import debounce from 'lodash/debounce'
+import { useCallback, useEffect, useMemo, useRef } from 'react'
+import { Alert } from 'react-native'
+import type { CurrentPersonResource } from '../types'
+import type { AttachmentFlaggedEvent } from '../types/jolt_events/attachment_events'
+import { useApiGet } from './use_api'
+import { currentPersonRequestArgs } from './use_current_person'
+import { useJoltChannel, useJoltEvent } from './use_jolt'
+
+const DEBOUNCE_MS = 500
+
+export function useVideoModerationJoltEvents() {
+  const { data: currentPerson } = useApiGet<CurrentPersonResource>(currentPersonRequestArgs)
+  const joltChannel = useJoltChannel(`chat.people.${currentPerson?.id}`, Boolean(currentPerson?.id))
+  const pendingIdsRef = useRef<Set<string>>(new Set())
+
+  const flushAlert = useMemo(
+    () =>
+      debounce(() => {
+        const count = pendingIdsRef.current.size
+        if (count === 0) return
+        pendingIdsRef.current.clear()
+        Alert.alert(
+          'Video removed',
+          count === 1
+            ? "A video you uploaded was flagged because it doesn't meet our content guidelines."
+            : "Some videos you uploaded were flagged because they don't meet our content guidelines."
+        )
+      }, DEBOUNCE_MS),
+    []
+  )
+
+  useEffect(() => () => flushAlert.cancel(), [flushAlert])
+
+  const markHandledByMessageForm = useCallback((id: string) => {
+    pendingIdsRef.current.delete(id)
+  }, [])
+
+  useJoltEvent(joltChannel, 'attachment.flagged', (e: AttachmentFlaggedEvent) => {
+    if (!e.data.data.content_type.startsWith('video/')) return
+    pendingIdsRef.current.add(e.data.data.attachment_id)
+    flushAlert()
+  })
+
+  return { markHandledByMessageForm }
+}

package/src/screens/conversation_screen.tsx

@@ -38,6 +38,7 @@ import {
   normalizeAnalyticsMetadata,
   usePublishProductAnalyticsEvent,
 } from '../hooks/use_product_analytics'
+import { useVideoModerationJoltEvents } from '../hooks/use_video_moderation_jolt_events'
 import { ConversationResource } from '../types/resources/conversation'
 import { ConversationBadgeResource } from '../types/resources/conversation_badge'
 import { MessageResource } from '../types/resources/message'
@@ -94,6 +95,7 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
   })
   useConversationJoltEvents({ conversationId: conversation_id })
   useConversationMessagesJoltEvents({ conversationId: conversation_id })
+  const { markHandledByMessageForm } = useVideoModerationJoltEvents()
   useEnsureConversationsRouteExists()
   useMarkLatestMessageRead({ conversation, messages })
   const messagesWithSeparators = groupMessages({
@@ -223,6 +225,7 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
           replyRootAuthorFirstName={replyRootAuthorFirstName}
           replyRootId={reply_root_id}
           currentlyEditingMessage={currentlyEditingMessage}
+          onFlaggedInMessageForm={markHandledByMessageForm}
         />
       </KeyboardView>
     </View>
@@ -235,6 +238,7 @@ interface ConversationBottomBarProps {
   replyRootAuthorFirstName: string | undefined
   replyRootId: string | null | undefined
   currentlyEditingMessage: MessageResource | undefined
+  onFlaggedInMessageForm?: (id: string) => void
 }
 
 function ConversationBottomBar({
@@ -243,6 +247,7 @@ function ConversationBottomBar({
   replyRootAuthorFirstName,
   replyRootId,
   currentlyEditingMessage,
+  onFlaggedInMessageForm,
 }: ConversationBottomBarProps) {
   if (conversation.disabled)
     return <ConversationDisabledBanner disabledReason={conversation.disabledReason} />
@@ -253,6 +258,7 @@ function ConversationBottomBar({
       conversation={conversation}
       replyRootId={replyRootId}
       currentlyEditingMessage={currentlyEditingMessage}
+      onFlaggedInMessageForm={onFlaggedInMessageForm}
       key={
         currentlyEditingMessage
           ? `edit-message-form-${currentlyEditingMessage.id}`

package/src/screens/notification_settings_screen.tsx

@@ -7,6 +7,7 @@ import { Badge, Heading, Icon, Text } from '../components'
 import { HeaderTextButton } from '../components/display/platform_modal_header_buttons'
 import { useTheme } from '../hooks'
 import { isDefined } from '../types'
+import { chatTypeLabel } from '../utils'
 import { useGroups } from './notification_settings/hooks/groups'
 import { useChatTypes } from './preferred_app/hooks/use_chat_types'
 
@@ -90,7 +91,7 @@ export function NotificationSettingsScreen({}: NotificationSettingsScreenProps)
     ...chatTypes.map(type => ({
       type: SectionTypes.link,
       data: {
-        title: `${type.title} conversations`,
+        title: chatTypeLabel(type.title),
         rightLabel: type.preferredApp,
         onPress: () =>
           navigation.navigate('PreferredAppSelection', {

package/src/screens/preferred_app_selection_screen.tsx

@@ -6,6 +6,7 @@ import { Image, StyleSheet, View, type ViewStyle } from 'react-native'
 import { Heading, Icon, Text } from '../components'
 import { useApiClient, useTheme } from '../hooks'
 import { useAppName } from '../hooks/use_app_name'
+import { chatTypeLabel } from '../utils'
 import { throwResponseError } from '../utils/response_error'
 import { PreferredApp, useChatTypes } from './preferred_app/hooks/use_chat_types'
 
@@ -41,7 +42,7 @@ export function PreferredAppSelectionScreen({ route }: PreferredAppSelectionScre
     updateChatType(app)
   }
 
-  const sectionTitle = `${chatType?.title} conversations`
+  const sectionTitle = chatType ? chatTypeLabel(chatType.title) : undefined
 
   return (
     <View style={styles.container}>

package/src/utils/chat_type_label.ts

@@ -0,0 +1,4 @@
+export function chatTypeLabel(title: string): string {
+  if (title.toLowerCase() === 'direct message') return 'Direct messages'
+  return `${title} conversations`
+}

package/src/utils/index.ts

@@ -1,5 +1,6 @@
 export * from './assert_keys_are_numbers'
 export * from './attachment_kind'
+export * from './chat_type_label'
 export * from './cache'
 export * from './client'
 export * from './convert_attachments_for_create'