@planningcenter/chat-react-native 3.42.2-qa-staging.1 → 3.42.2-rc.0

package/src/hooks/use_conversation_jolt_events.ts

@@ -63,7 +63,7 @@ export function useConversationJoltEvents({ conversationId }: Props) {
           data: {
             ...prev.data,
             latestReadMessageSortKey: latest_read_message_sort_key,
-            unreadReaction: false,
+            unreadReactionCount: 0,
           },
         }
       })
@@ -87,9 +87,25 @@ export function useConversationJoltEvents({ conversationId }: Props) {
 
   const handleReactionJoltEvent = useCallback(
     (event: JoltReactionEvent) => {
-      if (event.data.data.author_id === currentPersonId) return
+      queryClient.setQueryData<ApiResource<ConversationResource>>(queryKey, prev => {
+        if (!prev?.data) return prev
 
-      queryClient.invalidateQueries({ queryKey })
+        if (event.data.data.author_id === currentPersonId) {
+          return prev
+        }
+
+        return {
+          ...prev,
+          data: {
+            ...prev.data,
+            // Not a real count, just a derived value from Jolt events so we can
+            // determine if we should mark the conversation as read
+            unreadReactionCount: prev.data.unreadReactionCount
+              ? prev.data.unreadReactionCount + 1
+              : 1,
+          },
+        }
+      })
     },
     [queryClient, queryKey, currentPersonId]
   )

package/src/hooks/use_conversation_messages.ts

@@ -7,10 +7,11 @@ export const useConversationMessages = (
   { conversation_id, reply_root_id }: { conversation_id: number; reply_root_id?: string | null },
   opts?: SuspensePaginatorOptions
 ) => {
-  const { data, refetch, isRefetching, fetchNextPage } = useSuspensePaginator<MessageResource>(
-    getMessagesRequestArgs({ conversation_id, reply_root_id }),
-    opts
-  )
+  const { data, refetch, isRefetching, fetchNextPage, hasNextPage } =
+    useSuspensePaginator<MessageResource>(
+      getMessagesRequestArgs({ conversation_id, reply_root_id }),
+      opts
+    )
   const queryKey = getMessagesQueryKey({ conversation_id, reply_root_id })
   const messages = useMemo(
     () =>
@@ -24,5 +25,5 @@ export const useConversationMessages = (
     [data]
   )
 
-  return { messages, refetch, isRefetching, fetchNextPage, queryKey }
+  return { messages, refetch, isRefetching, fetchNextPage, hasNextPage, queryKey }
 }

package/src/hooks/use_conversations_actions.ts

@@ -20,7 +20,7 @@ export const useConversationsMarkRead = ({
     currentPersonCache.update({}, person => {
       const currentUnread = person.unreadCount
       const updatedUnread = read ? Math.max(currentUnread - 1, 0) : currentUnread + 1
-      return { ...person, unreadCount: updatedUnread }
+      return { ...person, unreadCount: updatedUnread, unreadReactionCount: 0 }
     })
   }
 
@@ -29,7 +29,6 @@ export const useConversationsMarkRead = ({
       update({
         ...conversation,
         unreadCount: read ? 0 : 1,
-        ...(read ? { unreadReaction: false } : {}),
       })
       handlePersonUnreadCount(read)
     },
@@ -107,7 +106,6 @@ export const useMarkAllRead = () => {
     onMutate: () => {
       updateAll({
         unreadCount: 0,
-        unreadReaction: false,
       })
     },
     mutationKey: ['markAllRead', args],

package/src/hooks/use_mark_latest_message_read.ts

@@ -17,9 +17,9 @@ export function useMarkLatestMessageRead({ conversation }: Props) {
     [markRead]
   )
   const unreadCount = conversation.unreadCount
-  const unreadReaction = conversation.unreadReaction
+  const unreadReactionCount = conversation.unreadReactionCount || 0
 
-  const shouldMarkRead = Boolean(unreadCount >= 1 || unreadReaction || !firedOnce.current)
+  const shouldMarkRead = Boolean(unreadCount >= 1 || unreadReactionCount > 0 || !firedOnce.current)
   const appState = useAppState()
   const isActive = appState === 'active'
 
@@ -29,5 +29,6 @@ export function useMarkLatestMessageRead({ conversation }: Props) {
     firedOnce.current = true
 
     debouncedMarkRead(true)
-  }, [debouncedMarkRead, isActive, shouldMarkRead, unreadReaction])
+    // keeping unreadReactionCount in the dependency array to watch for changes
+  }, [debouncedMarkRead, isActive, shouldMarkRead, unreadReactionCount])
 }

package/src/screens/conversation_screen.tsx

@@ -89,7 +89,7 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
   const { conversation_id, editing_message_id, reply_root_id, reply_root_author_name } =
     route.params
   const { data: conversation } = useConversation(route.params)
-  const { messages, fetchNextPage } = useConversationMessages({
+  const { messages, fetchNextPage, hasNextPage } = useConversationMessages({
     conversation_id,
     reply_root_id,
   })
@@ -181,7 +181,9 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
             onScroll={trackScroll}
             scrollEventThrottle={10}
             ListFooterComponent={
-              <ConversationStartBanner conversation={conversation} hasMessages={true} />
+              hasNextPage ? null : (
+                <ConversationStartBanner conversation={conversation} hasMessages={true} />
+              )
             }
             renderItem={({ item }) => {
               if (item.type === 'DateSeparator') {

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

@@ -158,6 +158,12 @@ export const ListHeaderComponent = () => {
           </TextButton>
         </View>
         <View style={styles.actionsContainer}>
+          <ListHeaderActionButton
+            name="general.cog"
+            onPress={handleChatSettings}
+            accessibilityLabel="Chat settings"
+            maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+          />
           {canCreateConversations && (
             <ListHeaderActionButton
               name="churchCenter.signups"
@@ -167,12 +173,6 @@ export const ListHeaderComponent = () => {
               maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
             />
           )}
-          <ListHeaderActionButton
-            name="general.cog"
-            onPress={handleChatSettings}
-            accessibilityLabel="Chat settings"
-            maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
-          />
           {shouldShowHeaderFiltersButton && <ToggleButton {...moreFiltersButtonProps} />}
         </View>
       </View>

package/src/types/resources/conversation.ts

@@ -3,25 +3,15 @@ import { ConversationBadgeResource } from './conversation_badge'
 import { ConversationMembershipResource } from './conversation_membership'
 import { GroupResource } from './group_resource'
 import { MemberAbilityResource } from './member_ability'
-import { ReactionCountResource } from './reaction'
 
 export type ConversationDisabledReason = 'safety_check' | 'direct_messages_disabled'
 
-export interface ConversationPreviewData {
-  kind: 'reaction' | 'message'
-  authorName: string
-  value: ReactionCountResource['value'] | null
-  text: string
-  createdAt: string
-}
-
 export interface ConversationResource {
   type: 'Conversation'
   id: number
   badges?: ConversationBadgeResource[]
   analyticsMetadata?: AnalyticsMetadataResource
   conversationMembership?: Partial<ConversationMembershipResource>
-  conversationPreview: ConversationPreviewData | null
   createdAt: string
   deleted?: boolean
   directMessage?: boolean
@@ -44,6 +34,6 @@ export interface ConversationResource {
   repliesDisabled: boolean
   title: string
   unreadCount: number
-  unreadReaction: boolean
+  unreadReactionCount?: number // Derived from Jolt events
   updatedAt: string
 }

package/src/utils/request/conversation.ts

@@ -38,7 +38,6 @@ export const getConversationsRequestArgs = ({
         Conversation: [
           'created_at',
           'badges',
-          'conversation_preview',
           'disabled',
           'disabled_reason',
           'groups',
@@ -56,7 +55,6 @@ export const getConversationsRequestArgs = ({
           'replies_disabled',
           'title',
           'unread_count',
-          'unread_reaction',
           'updated_at',
         ],
         AnalyticsMetadata: ['metadata'],