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

package/src/hooks/use_conversation.ts

@@ -16,6 +16,7 @@ export const getConversationRequestArgs = ({ conversation_id }: { conversation_i
         'created_at',
         'badges',
         'conversation_membership',
+        'conversation_preview',
         'gender_option',
         'groups',
         'last_message_author_id',
@@ -36,6 +37,7 @@ export const getConversationRequestArgs = ({ conversation_id }: { conversation_i
         'replies_disabled',
         'title',
         'unread_count',
+        'unread_reaction',
         'updated_at',
       ],
       AnalyticsMetadata: ['metadata'],

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,
-            unreadReactionCount: 0,
+            unreadReaction: false,
           },
         }
       })
@@ -87,24 +87,13 @@ export function useConversationJoltEvents({ conversationId }: Props) {
 
   const handleReactionJoltEvent = useCallback(
     (event: JoltReactionEvent) => {
+      if (event.event !== 'reaction.created') return
+      if (event.data.data.author_id === currentPersonId) return
+      if (event.data.data.message_author_id !== currentPersonId) return
+
       queryClient.setQueryData<ApiResource<ConversationResource>>(queryKey, prev => {
         if (!prev?.data) return prev
-
-        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,
-          },
-        }
+        return { ...prev, data: { ...prev.data, unreadReaction: true } }
       })
     },
     [queryClient, queryKey, currentPersonId]

package/src/hooks/use_conversations_actions.ts

@@ -1,10 +1,12 @@
-import { useMutation } from '@tanstack/react-query'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { Alert } from 'react-native'
 import { useConversationsContext } from '../contexts/conversations_context'
 import { ApiResource, ConversationResource } from '../types'
 import { useApiClient } from './use_api_client'
+import { getConversationRequestArgs } from './use_conversation'
 import { useConversationsCache } from './use_conversations_cache'
 import { useCurrentPersonCache } from './use_current_person'
+import { getRequestQueryKey } from './use_suspense_api'
 
 export const useConversationsMarkRead = ({
   conversation,
@@ -12,15 +14,19 @@ export const useConversationsMarkRead = ({
   conversation: ConversationResource
 }) => {
   const apiClient = useApiClient()
+  const queryClient = useQueryClient()
   const { args } = useConversationsContext()
   const currentPersonCache = useCurrentPersonCache()
   const { update, invalidate, fetchUpdate } = useConversationsCache(args)
+  const conversationQueryKey = getRequestQueryKey(
+    getConversationRequestArgs({ conversation_id: conversation.id })
+  )
 
   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, unreadReactionCount: 0 }
+      return { ...person, unreadCount: updatedUnread }
     })
   }
 
@@ -29,7 +35,14 @@ export const useConversationsMarkRead = ({
       update({
         ...conversation,
         unreadCount: read ? 0 : 1,
+        ...(read ? { unreadReaction: false } : {}),
       })
+      if (read) {
+        queryClient.setQueryData<ApiResource<ConversationResource>>(conversationQueryKey, prev => {
+          if (!prev?.data) return prev
+          return { ...prev, data: { ...prev.data, unreadReaction: false } }
+        })
+      }
       handlePersonUnreadCount(read)
     },
     mutationKey: ['markRead', conversation.id],
@@ -106,6 +119,7 @@ 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 unreadReactionCount = conversation.unreadReactionCount || 0
+  const unreadReaction = conversation.unreadReaction
 
-  const shouldMarkRead = Boolean(unreadCount >= 1 || unreadReactionCount > 0 || !firedOnce.current)
+  const shouldMarkRead = Boolean(unreadCount >= 1 || unreadReaction || !firedOnce.current)
   const appState = useAppState()
   const isActive = appState === 'active'
 
@@ -29,6 +29,5 @@ export function useMarkLatestMessageRead({ conversation }: Props) {
     firedOnce.current = true
 
     debouncedMarkRead(true)
-    // keeping unreadReactionCount in the dependency array to watch for changes
-  }, [debouncedMarkRead, isActive, shouldMarkRead, unreadReactionCount])
+  }, [debouncedMarkRead, isActive, shouldMarkRead, unreadReaction])
 }

package/src/hooks/use_suspense_api.ts

@@ -9,7 +9,7 @@ import { ApiCollection, ApiResource, ResourceObject } from '../types'
 import { FailedResponse } from '../types/api_primitives'
 import { Log } from '../utils'
 import { GetRequest, RequestData } from '../utils/client'
-import { ResponseError } from '../utils/response_error'
+import { throwResponseError } from '../utils/response_error'
 import { getNextPageParamFromMeta } from './paginator_meta'
 import { App, useApiClient } from './use_api_client'
 
@@ -90,14 +90,6 @@ export const useSuspensePaginator = <T extends ResourceObject>(
   return { ...query, data, totalCount }
 }
 
-const throwResponseError = (error: unknown) => {
-  if (error instanceof Response) {
-    throw new ResponseError(error as FailedResponse)
-  }
-
-  return Promise.reject(error)
-}
-
 export type RequestQueryKey = [
   SuspenseGetOptions['url'],
   SuspenseGetOptions['data'],

package/src/types/jolt_events/reaction_events.ts

@@ -6,6 +6,7 @@ interface BaseReactionEventData extends Record<string, unknown> {
     author_id: number
     conversation_id: number
     message_sort_key: string
+    message_author_id: number
     reply_root_id?: string | null
     created_at: string
     organization_id: number

package/src/types/resources/conversation.ts

@@ -3,15 +3,25 @@ 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
@@ -34,6 +44,6 @@ export interface ConversationResource {
   repliesDisabled: boolean
   title: string
   unreadCount: number
-  unreadReactionCount?: number // Derived from Jolt events
+  unreadReaction: boolean
   updatedAt: string
 }

package/src/utils/__tests__/response_error.test.ts

@@ -0,0 +1,47 @@
+import { isResponseLike, ResponseError, throwResponseError } from '../response_error'
+
+// Mimics Expo's winter `FetchResponse`: the full Response shape, but NOT an
+// instance of the global `Response` (so `instanceof Response` returns false).
+const fetchResponseLike = (status: number) => ({
+  status,
+  ok: status >= 200 && status < 300,
+  statusText: 'unauthorized',
+  url: 'https://api.planningcenteronline.com/chat/v2/me',
+  redirected: false,
+  headers: {},
+  clone() {
+    return this
+  },
+  json: async () => ({ errors: [] }),
+  text: async () => '',
+  arrayBuffer: async () => new ArrayBuffer(0),
+})
+
+describe('isResponseLike', () => {
+  it('recognizes a Response by shape even when it is not an instanceof Response', () => {
+    const notARealResponse = fetchResponseLike(401)
+    expect(notARealResponse instanceof Response).toBe(false)
+    expect(isResponseLike(notARealResponse)).toBe(true)
+  })
+
+  it('rejects things that are not responses', () => {
+    expect(isResponseLike(null)).toBe(false)
+    expect(isResponseLike(new Error('boom'))).toBe(false)
+    expect(isResponseLike(new ResponseError({ status: 401 } as never))).toBe(false)
+    expect(isResponseLike({ status: 401 })).toBe(false)
+    expect(isResponseLike({ status: 401, ok: false, clone() {}, json: async () => ({}) })).toBe(
+      false
+    )
+  })
+})
+
+describe('throwResponseError', () => {
+  it('wraps a Response-like rejection into a ResponseError', () => {
+    expect(() => throwResponseError(fetchResponseLike(401))).toThrow(ResponseError)
+  })
+
+  it('passes through non-response errors untouched', async () => {
+    const error = new Error('network down')
+    await expect(throwResponseError(error)).rejects.toBe(error)
+  })
+})

package/src/utils/client/client.ts

@@ -1,4 +1,5 @@
 import { ApiCollection, ApiResource, FailedResponse } from '../../types'
+import { isResponseLike } from '../response_error'
 import {
   concatRecords,
   ensureNoQueryParamsInDev,
@@ -106,7 +107,7 @@ export class Client {
   }
 
   handleNotOk = async (response: Response | Error) => {
-    if (!(response instanceof Response)) return Promise.reject(response)
+    if (!isResponseLike(response)) return Promise.reject(response)
 
     const errorData = await this.parseErrorResponse(response)
     const notOkResponse = response.clone() as FailedResponse

package/src/utils/request/conversation.ts

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

package/src/utils/response_error.ts

@@ -16,8 +16,30 @@ export class ResponseError extends Error {
   }
 }
 
+// Detect a fetch Response by shape, not `instanceof`: Expo's winter runtime
+// swaps in a `fetch` whose `FetchResponse` isn't an instance of the global
+// `Response`, so `instanceof` silently misses it under Expo.
+export const isResponseLike = (value: unknown): value is Response => {
+  if (typeof value !== 'object' || value === null) return false
+
+  const candidate = value as Record<string, unknown>
+  return (
+    typeof candidate.status === 'number' &&
+    typeof candidate.statusText === 'string' &&
+    typeof candidate.ok === 'boolean' &&
+    typeof candidate.redirected === 'boolean' &&
+    typeof candidate.url === 'string' &&
+    typeof candidate.headers === 'object' &&
+    candidate.headers !== null &&
+    typeof candidate.clone === 'function' &&
+    typeof candidate.json === 'function' &&
+    typeof candidate.text === 'function' &&
+    typeof candidate.arrayBuffer === 'function'
+  )
+}
+
 export const throwResponseError = (error: unknown) => {
-  if (error instanceof Response) {
+  if (isResponseLike(error)) {
     throw new ResponseError(error as FailedResponse)
   }
 

package/src/utils/theme.ts

@@ -1,4 +1,10 @@
-import { ColorSchemeName, ColorValue, OpaqueColorValue, PlatformColor } from 'react-native'
+import {
+  ColorSchemeName,
+  ColorValue,
+  OpaqueColorValue,
+  Platform,
+  PlatformColor,
+} from 'react-native'
 import { aliasTokensColorMap } from '../vendor/tapestry/alias_tokens_color_map'
 import { tokens } from '../vendor/tapestry/tokens'
 
@@ -92,10 +98,14 @@ interface ChatColors {
   statusNeutralComposedBackground: string
 }
 
+// 'link' is an iOS-only semantic color name — constructing it on Android is
+// undefined behavior, so only build it when the code is actually running on iOS
+const iOSLinkColor = Platform.OS === 'ios' ? PlatformColor('link') : undefined
+
 const colorsChatLight: ChatColors = {
   name: 'light',
   androidModalHeaderButtonTextColor: tokens.fillColorInteractionDefault,
-  iOSModalHeaderButtonTextColor: PlatformColor('link'),
+  iOSModalHeaderButtonTextColor: iOSLinkColor,
   buttonStart: undefined,
   buttonEnd: undefined,
   interaction: tokens.fillColorInteractionDefault,
@@ -138,7 +148,7 @@ const colorsChatLight: ChatColors = {
 const colorsChatDark: ChatColors = {
   name: 'dark',
   androidModalHeaderButtonTextColor: tokens.fillColorInteractionDefaultDark,
-  iOSModalHeaderButtonTextColor: PlatformColor('link'),
+  iOSModalHeaderButtonTextColor: iOSLinkColor,
   buttonStart: undefined,
   buttonEnd: undefined,
   interaction: tokens.fillColorInteractionDefaultDark,