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

package/src/hooks/use_attachment_uploader.ts

@@ -18,10 +18,16 @@ 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 }) {
+export function useAttachmentUploader({
+  conversationId,
+  draftAttachments,
+}: {
+  conversationId: number
+  draftAttachments?: FileAttachment[]
+}) {
   const apiClient = useApiClient()
   const uploadApi = useUploadClient()
-  const [attachments, setAttachments] = useState<FileAttachment[]>([])
+  const [attachments, setAttachments] = useState<FileAttachment[]>(() => draftAttachments || [])
   const uploadState = useRef<FileUploadState>({})
   const [lastUploadId, setLastUploadId] = useState<string>()
   const numberOfAttachments = attachments.length
@@ -67,6 +73,7 @@ export function useAttachmentUploader({ conversationId }: { conversationId: numb
       const newAttachments: FileAttachment[] = validFiles.map(file => ({
         file,
         status: 'uploading',
+        uploadedAt: Date.now(),
       }))
 
       if (newAttachments && newAttachments.length > 0) {
@@ -111,6 +118,9 @@ export function useAttachmentUploader({ conversationId }: { conversationId: numb
     setLastUploadId(undefined)
     setAttachments(
       attachments.map(attachment => {
+        // Don't risk overwriting ids already set
+        if (attachment.id) return attachment
+
         const state = uploadState.current[attachment.file.name]
         if (state) {
           return { ...attachment, id: state.id, status: state.status }

package/src/hooks/use_conversations_jolt_events.ts

@@ -1,22 +1,29 @@
-import { JoltConversationEvent } from '../types/jolt_events'
+import { CurrentPersonResource } from '../types'
 import { ConversationRequestArgs } from '../utils/request/conversation'
 import { useConversationsCache } from './use_conversations_cache'
-import { useCurrentPerson, useCurrentPersonCache } from './use_current_person'
+import { currentPersonRequestArgs, useCurrentPersonCache } from './use_current_person'
 import { useJoltChannel, useJoltEvent } from './use_jolt'
-import { completeMessageCreationConversationTracking } from '../utils/performance_tracking'
+import { useApiGet } from './use_api'
 import { useApiClient } from './use_api_client'
+import { JoltConversationEvent } from '../types/jolt_events'
+import { completeMessageCreationConversationTracking } from '../utils/performance_tracking'
+
+const useCurrentPerson = () => {
+  return useApiGet<CurrentPersonResource>(currentPersonRequestArgs)
+}
 
 export function useConversationsJoltEvents(args?: Partial<ConversationRequestArgs>) {
-  const currentPerson = useCurrentPerson()
-  const joltChannel = useJoltChannel(`chat.people.${currentPerson.id}`)
+  const { data: currentPerson } = useCurrentPerson()
   const cache = useConversationsCache(args)
   const currentPersonCache = useCurrentPersonCache()
   const apiClient = useApiClient()
+  const enabled = currentPerson?.id ? true : false
+  const joltChannel = useJoltChannel(`chat.people.${currentPerson?.id}`, enabled)
 
   useJoltEvent(joltChannel, 'conversation.updated', (e: JoltConversationEvent) => {
     if (
       e.data.data.last_message_idempotent_key &&
-      e.data.data.last_message_author_id === currentPerson.id
+      e.data.data.last_message_author_id === currentPerson?.id
     ) {
       completeMessageCreationConversationTracking({
         apiClient,

package/src/hooks/use_jolt.ts

@@ -119,10 +119,14 @@ export const useJoltClient = (): JoltClient | undefined => {
   return joltClient
 }
 
-export function useJoltChannel(channelName: string): JoltSubscription | undefined | null {
+export function useJoltChannel(
+  channelName: string,
+  enabled: boolean = true
+): JoltSubscription | undefined | null {
   const jolt = useJoltClient()
   const appState = useAppState()
   const queryClient = useQueryClient()
+  const ready = Boolean(jolt) && appState !== 'background' && enabled
 
   const handleSubscribe = useCallback(async () => {
     if (!jolt) return null
@@ -137,7 +141,7 @@ export function useJoltChannel(channelName: string): JoltSubscription | undefine
   const { data: subscription } = useQuery<JoltSubscription | null>({
     queryKey: ['jolt-subscription', channelName],
     queryFn: handleSubscribe,
-    enabled: Boolean(jolt) && appState !== 'background',
+    enabled: ready,
   })
 
   const handleUnsubscribe = useCallback(() => {

package/src/hooks/use_message_draft.ts

@@ -0,0 +1,108 @@
+import { useCallback, useEffect, useState } from 'react'
+import { useAsyncStorage } from './use_async_storage'
+import type { FileAttachment } from '../types/resources/denormalized_attachment_resource_for_create'
+
+interface MessageDraft {
+  text: string
+  attachments: FileAttachment[]
+  lastUpdated: number
+}
+
+const DRAFT_STORAGE_KEY = 'chat_message_drafts'
+const DRAFT_EXPIRY_HOURS = 720 // 30 days
+const DRAFT_EXPIRY_MS = DRAFT_EXPIRY_HOURS * 60 * 60 * 1000
+const ATTACHMENT_EXPIRY_HOURS = 48 // 2 days
+const ATTACHMENT_EXPIRY_MS = ATTACHMENT_EXPIRY_HOURS * 60 * 60 * 1000
+
+export function useMessageDraft(conversationId: number) {
+  const conversationKey = conversationId.toString()
+  const [allDrafts, setAllDrafts] = useAsyncStorage<Record<string, MessageDraft>>(
+    DRAFT_STORAGE_KEY,
+    {}
+  )
+
+  const [draft, setDraft] = useState<MessageDraft | null>(() => {
+    const storedDraft = allDrafts[conversationKey] || null
+
+    // Filter expired attachments
+    if (storedDraft?.attachments) {
+      const now = Date.now()
+      storedDraft.attachments = storedDraft.attachments.filter(attachment => {
+        if (!attachment.uploadedAt) return false
+        return now - attachment.uploadedAt < ATTACHMENT_EXPIRY_MS
+      })
+    }
+
+    return storedDraft
+  })
+
+  // Clean up expired drafts on mount
+  useEffect(() => {
+    const now = Date.now()
+    const validDrafts: Record<string, MessageDraft> = {}
+
+    Object.entries(allDrafts).forEach(([id, draftData]) => {
+      if (draftData?.lastUpdated && now - draftData.lastUpdated < DRAFT_EXPIRY_MS) {
+        validDrafts[id] = draftData
+      }
+    })
+
+    // If we filtered out any drafts, update storage
+    if (Object.keys(validDrafts).length !== Object.keys(allDrafts).length) {
+      setAllDrafts(validDrafts)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []) // I only want this to run on mount
+
+  const saveDraft = useCallback(
+    (text: string, attachments: FileAttachment[]) => {
+      const hasContent = text.trim().length > 0 || attachments.length > 0
+      const updatedDrafts = { ...allDrafts }
+
+      if (hasContent) {
+        // Convert attachments to serializable format (similar to web implementation)
+        const normalizedAttachments = attachments
+          .filter(att => att.id && att.status === 'success')
+          .map(att => ({
+            ...att,
+            file: {
+              uri: att.file.uri,
+              name: att.file.name,
+              type: att.file.type,
+              size: att.file.size,
+              width: att.file.width,
+              height: att.file.height,
+            },
+          }))
+
+        const newDraft: MessageDraft = {
+          text,
+          attachments: normalizedAttachments,
+          lastUpdated: Date.now(),
+        }
+
+        updatedDrafts[conversationKey] = newDraft
+        setDraft(newDraft)
+      } else {
+        delete updatedDrafts[conversationKey]
+        setDraft(null)
+      }
+
+      setAllDrafts(updatedDrafts)
+    },
+    [conversationKey, allDrafts, setAllDrafts]
+  )
+
+  const clearDraft = useCallback(() => {
+    const updatedDrafts = { ...allDrafts }
+    delete updatedDrafts[conversationKey]
+    setAllDrafts(updatedDrafts)
+    setDraft(null)
+  }, [conversationKey, allDrafts, setAllDrafts])
+
+  return {
+    draft,
+    saveDraft,
+    clearDraft,
+  }
+}

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

@@ -13,6 +13,7 @@ import { ConversationResource, MemberResource } from '../../../types'
 import { tokens } from '../../../vendor/tapestry/tokens'
 import { TeamFilterTypes } from '../../conversation_filter_recipients/types'
 import { useServicesTeams } from '../../../hooks/services/use_services_team'
+import { Haptic } from '../../../utils/native_adapters'
 
 type ServicesFormProps = {
   initialTeamIds?: number[]
@@ -153,7 +154,8 @@ function FormContent({
           <TextButton
             accessibilityLabel="Select teams"
             textStyle={styles.teamCountHeader}
-            onPress={() =>
+            onPress={() => {
+              Haptic.impactLight()
               navigation.navigate('New', {
                 screen: 'ConversationFilterRecipients',
                 params: {
@@ -162,7 +164,7 @@ function FormContent({
                   team_filter_type: teamFilterType,
                 },
               })
-            }
+            }}
           >
             {teamCountHeader}
           </TextButton>

package/src/screens/conversation_screen.tsx

@@ -149,6 +149,13 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
           <MessageForm.Root
             conversation={conversation}
             currentlyEditingMessage={currentlyEditingMessage}
+            // We use a separate key so that it remounts component when switching between new
+            // and edit message. This simplifies internal state handling.
+            key={
+              currentlyEditingMessage
+                ? `edit-message-form-${currentlyEditingMessage.id}`
+                : 'new-message-form'
+            }
           >
             <MessageForm.AttachmentPicker />
             <MessageForm.Commands />

package/src/screens/conversation_select_recipients/conversation_select_recipients_screen.tsx

@@ -14,6 +14,7 @@ import { TeamRecipientRow } from './components/team_recipient_row'
 import { GroupsRecipientRow } from './components/groups_recipient_row'
 import { DefaultLoading } from '../../components/page/loading'
 import { useAppGrants } from '../../hooks'
+import { Haptic } from '../../utils/native_adapters'
 
 const MAX_VISIBLE_RECIPIENTS = 5
 
@@ -128,14 +129,15 @@ export const ConversationSelectRecipientsScreen = ({
             {hasServiceTypes && (
               <Button
                 style={styles.selectTeamsButton}
-                onPress={() =>
+                onPress={() => {
+                  Haptic.impactLight()
                   navigation.navigate('New', {
                     screen: 'ConversationFilterRecipients',
                     params: {
                       source_app_name: 'Services',
                     },
                   })
-                }
+                }}
                 title="Select teams"
                 variant="outline"
                 iconNameLeft="general.search"

package/src/screens/conversations/conversations_screen.tsx

@@ -9,7 +9,6 @@ import { GraphId } from '../../types/resources/group_resource'
 import { destructureChatGroupGraphId } from '../../utils'
 import { ListHeaderComponent } from './components/list_header_component'
 import { AppName } from '../../types/resources/app_name'
-import { ConversationsJoltEvents } from './components/conversations_jolt_events'
 
 export type ConversationsScreenProps = StaticScreenProps<{
   title?: string
@@ -62,7 +61,6 @@ export function ConversationsScreen({ route }: ConversationsScreenProps) {
   return (
     <View style={styles.container}>
       <ConversationsContextProvider args={route.params}>
-        <ConversationsJoltEvents args={route.params} />
         <Conversations ListHeaderComponent={ListHeaderComponent} />
       </ConversationsContextProvider>
       <ActionButton

package/src/screens/message_actions_screen.tsx

@@ -12,7 +12,7 @@ import { useApiClient } from '../hooks/use_api_client'
 import { useConversationMessages } from '../hooks/use_conversation_messages'
 import { useMessageReactionToggle } from '../hooks/use_message_reaction_toggle'
 import { ReactionCountResource } from '../types/resources/reaction'
-import { Clipboard } from '../utils/native_adapters'
+import { Clipboard, Haptic } from '../utils/native_adapters'
 
 export const MessageActionsScreenOptions = getFormSheetScreenOptions({
   sheetAllowedDetents: [0.5],
@@ -111,6 +111,7 @@ export function MessageActionsScreen({ route }: MessageActionsScreenProps) {
   }, [navigation, conversation_id, message_id])
 
   const handleViewReadReceiptsPress = useCallback(() => {
+    Haptic.impactLight()
     const params = omitBy(
       {
         conversation_id,

package/src/types/resources/denormalized_attachment_resource_for_create.ts

@@ -50,6 +50,7 @@ export interface FileAttachment {
   id?: string
   file: NativeAttachmentFile
   status: AttachmentStatus
+  uploadedAt: number
 }
 
 export interface FileUploadState {

package/build/screens/conversations/components/conversations_jolt_events.d.ts

@@ -1,7 +0,0 @@
-import { ConversationRequestArgs } from '../../../utils/request/conversation';
-interface Props {
-    args?: Partial<ConversationRequestArgs>;
-}
-export declare function ConversationsJoltEvents({ args }: Props): import("react").JSX.Element;
-export {};
-//# sourceMappingURL=conversations_jolt_events.d.ts.map

package/build/screens/conversations/components/conversations_jolt_events.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"conversations_jolt_events.d.ts","sourceRoot":"","sources":["../../../../src/screens/conversations/components/conversations_jolt_events.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAA;AAG7E,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,OAAO,CAAC,uBAAuB,CAAC,CAAA;CACxC;AAID,wBAAgB,uBAAuB,CAAC,EAAE,IAAI,EAAE,EAAE,KAAK,+BAMtD"}

package/build/screens/conversations/components/conversations_jolt_events.js

@@ -1,14 +0,0 @@
-import { Suspense } from 'react';
-import { useConversationsJoltEvents } from '../../../hooks/use_conversations_jolt_events';
-// This hook is extracted into a component so the Suspense boundary can be isolated.
-// It doesn't need to block the entire Conversations screen from rendering.
-export function ConversationsJoltEvents({ args }) {
-    return (<Suspense fallback={null}>
-      <PrivateSuspendedConversationsJoltEvents args={args}/>
-    </Suspense>);
-}
-function PrivateSuspendedConversationsJoltEvents({ args }) {
-    useConversationsJoltEvents(args);
-    return null;
-}
-//# sourceMappingURL=conversations_jolt_events.js.map

package/build/screens/conversations/components/conversations_jolt_events.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"conversations_jolt_events.js","sourceRoot":"","sources":["../../../../src/screens/conversations/components/conversations_jolt_events.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,EAAE,0BAA0B,EAAE,MAAM,8CAA8C,CAAA;AAMzF,oFAAoF;AACpF,2EAA2E;AAC3E,MAAM,UAAU,uBAAuB,CAAC,EAAE,IAAI,EAAS;IACrD,OAAO,CACL,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CACvB;MAAA,CAAC,uCAAuC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EACtD;IAAA,EAAE,QAAQ,CAAC,CACZ,CAAA;AACH,CAAC;AAED,SAAS,uCAAuC,CAAC,EAAE,IAAI,EAAS;IAC9D,0BAA0B,CAAC,IAAI,CAAC,CAAA;IAEhC,OAAO,IAAI,CAAA;AACb,CAAC","sourcesContent":["import { Suspense } from 'react'\nimport { ConversationRequestArgs } from '../../../utils/request/conversation'\nimport { useConversationsJoltEvents } from '../../../hooks/use_conversations_jolt_events'\n\ninterface Props {\n  args?: Partial<ConversationRequestArgs>\n}\n\n// This hook is extracted into a component so the Suspense boundary can be isolated.\n// It doesn't need to block the entire Conversations screen from rendering.\nexport function ConversationsJoltEvents({ args }: Props) {\n  return (\n    <Suspense fallback={null}>\n      <PrivateSuspendedConversationsJoltEvents args={args} />\n    </Suspense>\n  )\n}\n\nfunction PrivateSuspendedConversationsJoltEvents({ args }: Props): null {\n  useConversationsJoltEvents(args)\n\n  return null\n}\n"]}

package/src/screens/conversations/components/conversations_jolt_events.tsx

@@ -1,23 +0,0 @@
-import { Suspense } from 'react'
-import { ConversationRequestArgs } from '../../../utils/request/conversation'
-import { useConversationsJoltEvents } from '../../../hooks/use_conversations_jolt_events'
-
-interface Props {
-  args?: Partial<ConversationRequestArgs>
-}
-
-// This hook is extracted into a component so the Suspense boundary can be isolated.
-// It doesn't need to block the entire Conversations screen from rendering.
-export function ConversationsJoltEvents({ args }: Props) {
-  return (
-    <Suspense fallback={null}>
-      <PrivateSuspendedConversationsJoltEvents args={args} />
-    </Suspense>
-  )
-}
-
-function PrivateSuspendedConversationsJoltEvents({ args }: Props): null {
-  useConversationsJoltEvents(args)
-
-  return null
-}