@planningcenter/chat-react-native 4.4.1-qa-staging.26 → 4.4.1-qa-staging.28

package/src/hooks/__tests__/use_conversations_jolt_events.test.tsx

@@ -0,0 +1,135 @@
+import { InfiniteData, QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { renderHook, waitFor } from '@testing-library/react-native'
+import React from 'react'
+import { buildTestQueryClient } from '../../__utils__/query_client'
+import { ConversationFiltersParams } from '../../screens/conversation_filters/screen_props'
+import type { ApiCollection, ConversationResource } from '../../types'
+import { getConversationsRequestArgs } from '../../utils/request/conversation'
+import { useConversationsJoltEvents } from '../use_conversations_jolt_events'
+import { getRequestQueryKey } from '../use_suspense_api'
+
+const handlers: Record<string, (event: unknown) => void> = {}
+jest.mock('../use_jolt', () => ({
+  useJoltChannel: () => 'channel',
+  useJoltEvent: (_channel: unknown, name: string, handler: (event: unknown) => void) => {
+    handlers[name] = handler
+  },
+}))
+jest.mock('../use_api', () => ({ useApiGet: () => ({ data: { id: 1 } }) }))
+jest.mock('../use_current_person', () => ({
+  currentPersonRequestArgs: {},
+  useCurrentPersonCache: () => ({ invalidate: jest.fn() }),
+}))
+
+const mockGet = jest.fn()
+jest.mock('../use_api_client', () => ({ useApiClient: () => ({ chat: { get: mockGet } }) }))
+
+let mockContextArgs: ConversationFiltersParams = {}
+jest.mock('../../contexts/conversations_context', () => ({
+  useConversationsContext: () => ({ args: mockContextArgs }),
+}))
+
+type QueryData = InfiniteData<ApiCollection<ConversationResource>>
+
+const conversationId = 7
+let queryClient: QueryClient
+
+const wrapper = ({ children }: { children: React.ReactNode }) => (
+  <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+)
+
+const queryKey = () => getRequestQueryKey(getConversationsRequestArgs(mockContextArgs))
+
+const seedList = (conversations: Partial<ConversationResource>[] = []) =>
+  queryClient.setQueryData<QueryData>(queryKey(), {
+    pages: [
+      {
+        data: conversations,
+        links: {},
+        meta: {},
+      } as unknown as ApiCollection<ConversationResource>,
+    ],
+    pageParams: [undefined],
+  })
+
+const cachedIds = () =>
+  queryClient
+    .getQueryData<QueryData>(queryKey())!
+    .pages.flatMap(page => page.data.map(conversation => conversation.id))
+
+const serverReturns = (conversations: Partial<ConversationResource>[]) =>
+  mockGet.mockResolvedValue({
+    data: conversations.map(conversation => ({
+      type: 'Conversation',
+      id: conversationId,
+      title: 'Youth',
+      ...conversation,
+    })),
+  })
+
+const conversationUpdated = () =>
+  handlers['conversation.updated']({
+    event: 'conversation.updated',
+    data: { data: { id: conversationId, last_message_author_id: 2 } },
+  })
+
+const renderWithFilter = (args: ConversationFiltersParams) => {
+  mockContextArgs = args
+  queryClient = buildTestQueryClient({ defaultOptions: { queries: { gcTime: Infinity } } })
+  renderHook(() => useConversationsJoltEvents(), { wrapper })
+}
+
+beforeEach(() => mockGet.mockReset())
+
+describe('useConversationsJoltEvents on conversation.updated', () => {
+  it('asks the server for the conversation under the active filter', async () => {
+    renderWithFilter({ show_unread: true })
+    seedList()
+    serverReturns([])
+
+    conversationUpdated()
+
+    await waitFor(() => expect(mockGet).toHaveBeenCalled())
+    expect(mockGet).toHaveBeenCalledWith(
+      expect.objectContaining({
+        url: '/me/conversations',
+        data: expect.objectContaining({
+          filter: 'mine_or_not_empty,unread',
+          where: { id: conversationId },
+          perPage: 1,
+        }),
+      })
+    )
+  })
+
+  it('adds a conversation the server returns for the list', async () => {
+    renderWithFilter({ show_unread: true })
+    seedList()
+    serverReturns([{ unreadCount: 1 }])
+
+    conversationUpdated()
+
+    await waitFor(() => expect(cachedIds()).toEqual([conversationId]))
+  })
+
+  it('removes a conversation the server leaves out of the list', async () => {
+    renderWithFilter({ show_unread: true })
+    seedList([{ id: conversationId, unreadCount: 1 }])
+    serverReturns([])
+
+    conversationUpdated()
+
+    await waitFor(() => expect(cachedIds()).toEqual([]))
+  })
+
+  it('keeps the list as it was when the fetch fails', async () => {
+    renderWithFilter({ show_unread: true })
+    seedList([{ id: conversationId, unreadCount: 1 }])
+    mockGet.mockRejectedValue(new Error('offline'))
+
+    conversationUpdated()
+
+    await waitFor(() => expect(mockGet).toHaveBeenCalled())
+    expect(cachedIds()).toEqual([conversationId])
+  })
+})

package/src/hooks/__tests__/use_jolt.test.tsx

@@ -9,7 +9,7 @@ import { ChatContext, ChatContextValue } from '../../contexts/chat_context'
 import { Session } from '../../utils'
 import { Client } from '../../utils/client'
 import { ResponseError } from '../../utils/response_error'
-import { useJoltClient, useJoltForegroundPing } from '../use_jolt'
+import { useJoltChannel, useJoltClient, useJoltEvent, useJoltForegroundPing } from '../use_jolt'
 
 let caught: unknown
 
@@ -167,3 +167,78 @@ describe('useJoltForegroundPing', () => {
     expect(ping).toHaveBeenCalledTimes(1)
   })
 })
+
+describe('useJoltChannel', () => {
+  type Listener = (_event: unknown) => void
+  const channelName = 'chat.people.1'
+
+  const buildJolt = () => {
+    const listeners: Listener[] = []
+    const subscription = {
+      channel: channelName,
+      bind: jest.fn((_event: string, listener: Listener) => {
+        listeners.push(listener)
+        return () => listeners.splice(listeners.indexOf(listener), 1)
+      }),
+    }
+    const jolt = {
+      subscriptions: [] as (typeof subscription)[],
+      subscribe: jest.fn(() => {
+        jolt.subscriptions.push(subscription)
+        return subscription
+      }),
+      // The real client unbinds every listener on the subscription when it unsubscribes.
+      unsubscribe: jest.fn(() => {
+        listeners.length = 0
+        jolt.subscriptions = []
+      }),
+    }
+
+    return { jolt, emit: (event: unknown) => listeners.forEach(listener => listener(event)) }
+  }
+
+  const ChannelProbe = ({ onEvent }: { onEvent: Listener }) => {
+    const channel = useJoltChannel(channelName)
+    useJoltEvent(channel, 'conversation.updated', onEvent)
+    return null
+  }
+
+  const renderConsumers = (jolt: unknown, onEvent: Listener) => {
+    const session = new Session({ token: { access_token: 'a-real-token' } })
+    const queryClient = buildTestQueryClient({ defaultOptions: { queries: { gcTime: Infinity } } })
+    queryClient.setQueryData(['wss-url'], 'wss://jolt.test')
+    queryClient.setQueryData(['jolt-client', 'wss://jolt.test', 'a-real-token'], jolt)
+
+    const tree = (count: number) => (
+      <QueryClientProvider client={queryClient}>
+        <ChatContext.Provider value={{ session } as unknown as ChatContextValue}>
+          <Suspense fallback={null}>
+            {Array.from({ length: count }, (_, index) => (
+              <ChannelProbe key={index} onEvent={onEvent} />
+            ))}
+          </Suspense>
+        </ChatContext.Provider>
+      </QueryClientProvider>
+    )
+    const result = render(tree(2))
+
+    return { setConsumers: (count: number) => result.rerender(tree(count)) }
+  }
+
+  it('keeps delivering events to the remaining consumer after another unmounts', async () => {
+    const { jolt, emit } = buildJolt()
+    const onEvent = jest.fn()
+    const { setConsumers } = renderConsumers(jolt, onEvent)
+    await waitFor(() => expect(jolt.subscribe).toHaveBeenCalledTimes(1))
+
+    setConsumers(1)
+    emit({ event: 'conversation.updated' })
+
+    expect(jolt.unsubscribe).not.toHaveBeenCalled()
+    expect(onEvent).toHaveBeenCalledTimes(1)
+
+    setConsumers(0)
+
+    expect(jolt.unsubscribe).toHaveBeenCalledWith(channelName)
+  })
+})

package/src/hooks/use_clear_conversation_filters.ts

@@ -11,6 +11,7 @@ export function useClearConversationFilters() {
       group_source_app_name: undefined,
       show_direct_messages: undefined,
       show_archived: undefined,
+      show_unread: undefined,
     })
   }, [navigation])
 }

package/src/hooks/use_conversations_cache.ts

@@ -1,5 +1,5 @@
 import { InfiniteData, useQueryClient } from '@tanstack/react-query'
-import { ApiCollection, ApiResource, ConversationResource } from '../types'
+import { ApiCollection, ConversationResource } from '../types'
 import {
   deleteRecordInPagesData,
   updateRecordInPagesData,
@@ -21,16 +21,13 @@ export function useConversationsCache(args?: Partial<ConversationRequestArgs>) {
   const fetchConversation = async (id: number) => {
     if (!id) return
 
-    const { data: argsData } = conversationsRequestArgs
-    const { data } = await apiClient.chat.get<ApiResource<ConversationResource>>({
-      url: `/me/conversations/${id}`,
-      data: {
-        fields: argsData.fields,
-        include: argsData.include,
-      },
+    const { url, data } = conversationsRequestArgs
+    const { data: conversations } = await apiClient.chat.get<ApiCollection<ConversationResource>>({
+      url,
+      data: { ...data, where: { ...data.where, id }, perPage: 1 },
     })
 
-    return data
+    return conversations[0]
   }
 
   const updateOrCreate = async (conversation: ConversationResource) => {
@@ -70,20 +67,6 @@ export function useConversationsCache(args?: Partial<ConversationRequestArgs>) {
     )
   }
 
-  const fetchAndUpdate = async ({ id }: { id: number }) => {
-    const conversation: ConversationResource = await fetchConversation(id).catch(c => c)
-    if (!conversation.id) return
-
-    updateOnly(conversation)
-  }
-
-  const fetchAndUpdateOrCreate = async ({ id }: { id: number }) => {
-    const conversation: ConversationResource = await fetchConversation(id).catch(c => c)
-    if (!conversation.id) return
-
-    updateOrCreate(conversation)
-  }
-
   const handleConversationDestroy = ({ id }: { id: number }) => {
     if (!id) return
 
@@ -95,10 +78,32 @@ export function useConversationsCache(args?: Partial<ConversationRequestArgs>) {
     )
   }
 
+  const fetchAndUpdate = async ({ id }: { id: number }) => {
+    const conversation = await fetchConversation(id).catch(() => undefined)
+    if (!conversation) return
+
+    updateOnly(conversation)
+  }
+
+  const fetchAndSync = async ({ id }: { id: number }) => {
+    let conversation: ConversationResource | undefined
+    try {
+      conversation = await fetchConversation(id)
+    } catch {
+      return
+    }
+
+    if (conversation) {
+      updateOrCreate(conversation)
+    } else {
+      handleConversationDestroy({ id })
+    }
+  }
+
   return {
     create: updateOrCreate,
     destroy: handleConversationDestroy,
-    fetchCreate: fetchAndUpdateOrCreate,
+    fetchSync: fetchAndSync,
     fetchUpdate: fetchAndUpdate,
     invalidate: () => queryClient.invalidateQueries({ queryKey: conversationQueryKey }),
     update: updateOrCreate,

package/src/hooks/use_conversations_jolt_events.ts

@@ -31,10 +31,10 @@ export function useConversationsJoltEvents() {
         idempotentKey: e.data.data.last_message_idempotent_key,
       })
     }
-    cache.fetchUpdate({ id: e.data.data.id })
+    cache.fetchSync({ id: e.data.data.id })
   })
   useJoltEvent(joltChannel, 'conversation.created', (e: JoltConversationEvent) =>
-    cache.fetchCreate({ id: e.data.data.id })
+    cache.fetchSync({ id: e.data.data.id })
   )
   useJoltEvent(joltChannel, 'conversation.destroyed', (e: JoltConversationEvent) =>
     cache.destroy({ id: e.data.data.id })

package/src/hooks/use_jolt.ts

@@ -181,6 +181,25 @@ export const useJoltForegroundPing = () => {
   }, [queryClient])
 }
 
+const channelConsumers = new WeakMap<JoltClient, Map<string, number>>()
+
+const retainChannel = (jolt: JoltClient, channelName: string) => {
+  const counts = channelConsumers.get(jolt) ?? new Map<string, number>()
+  channelConsumers.set(jolt, counts)
+  counts.set(channelName, (counts.get(channelName) ?? 0) + 1)
+}
+
+const releaseChannel = (jolt: JoltClient, channelName: string) => {
+  const counts = channelConsumers.get(jolt)
+  const remaining = (counts?.get(channelName) ?? 1) - 1
+  if (remaining > 0) {
+    counts?.set(channelName, remaining)
+  } else {
+    counts?.delete(channelName)
+  }
+  return remaining
+}
+
 export function useJoltChannel(
   channelName: string,
   enabled: boolean = true
@@ -216,8 +235,13 @@ export function useJoltChannel(
   }, [queryClient, channelName, jolt])
 
   useEffect(() => {
-    return handleUnsubscribe
-  }, [handleUnsubscribe])
+    if (!jolt) return
+
+    retainChannel(jolt, channelName)
+    return () => {
+      if (releaseChannel(jolt, channelName) === 0) handleUnsubscribe()
+    }
+  }, [jolt, channelName, handleUnsubscribe])
 
   return subscription
 }

package/src/screens/conversation_filters/context/conversation_filter_context.tsx

@@ -23,6 +23,7 @@ export const FilterContext = createContext<{
     group_source_app_name: undefined,
     show_direct_messages: undefined,
     show_archived: undefined,
+    show_unread: undefined,
   },
   scrollOffset: 0,
   setScrollOffset: () => {},
@@ -59,6 +60,7 @@ export const FilterProvider = ({ children }: PropsWithChildren) => {
           group_source_app_name: undefined,
           show_direct_messages: undefined,
           show_archived: undefined,
+          show_unread: undefined,
         })
       )
     },
@@ -68,6 +70,7 @@ export const FilterProvider = ({ children }: PropsWithChildren) => {
         group_source_app_name: undefined,
         show_direct_messages: undefined,
         show_archived: undefined,
+        show_unread: undefined,
       })
     },
     setAppFilter: (params: Omit<ConversationFiltersParams, 'chat_group_graph_id'>) => {
@@ -76,6 +79,7 @@ export const FilterProvider = ({ children }: PropsWithChildren) => {
         group_source_app_name: params.group_source_app_name,
         show_direct_messages: params.show_direct_messages,
         show_archived: params.show_archived,
+        show_unread: undefined,
       })
     },
     applyFilters: (params: ConversationFiltersParams) => {

package/src/screens/conversation_filters/screen_props.ts

@@ -6,6 +6,7 @@ export type ConversationFiltersParams = {
   group_source_app_name?: string
   show_direct_messages?: boolean
   show_archived?: boolean
+  show_unread?: boolean
 }
 
 export type ConversationFiltersScreenProps = StaticScreenProps<ConversationFiltersParams>

package/src/screens/conversations/__tests__/conversations_screen.test.tsx

@@ -7,7 +7,6 @@ import {
   ChatAdapters,
   ClipboardAdapter,
   ImagePickerAdapter,
-  MenuAdapter,
   VideoAdapter,
 } from '../../../utils/native_adapters'
 import { ConversationsScreen } from '../conversations_screen'
@@ -41,7 +40,7 @@ jest.mock('../components/filter_dropdown_list_header_component', () => {
   return { FilterDropdownListHeaderComponent: () => <Text>Filter dropdown header</Text> }
 })
 
-const configureAdapters = ({ menu }: { menu: boolean }) => {
+const configureAdapters = () => {
   ChatAdapters.configure({
     clipboard: new ClipboardAdapter({
       getStringAsync: async () => '',
@@ -53,7 +52,6 @@ const configureAdapters = ({ menu }: { menu: boolean }) => {
       openCameraAsync: async () => ({ canceled: true, assets: null }),
       openImageLibraryAsync: async () => ({ canceled: true, assets: null }),
     }),
-    ...(menu ? { menu: new MenuAdapter({ View: () => null }) } : {}),
   })
 }
 
@@ -80,7 +78,7 @@ const renderWithFeatures = (enabledFeatures: string[]) => {
 
 describe('ConversationsScreen header gating', () => {
   beforeEach(() => {
-    configureAdapters({ menu: true })
+    configureAdapters()
   })
 
   it('shows the search header with only the QA flag on', async () => {
@@ -107,14 +105,6 @@ describe('ConversationsScreen header gating', () => {
     expect(await view.findByText('Filter dropdown header')).toBeTruthy()
   })
 
-  it('falls back to the search header when the host has no menu adapter', async () => {
-    configureAdapters({ menu: false })
-
-    const view = renderWithFeatures(['QA_MOBILE_filter_dropdown', 'ROLLOUT_MOBILE_search'])
-
-    expect(await view.findByText('Search header')).toBeTruthy()
-  })
-
   it('shows the default header with neither flag on', async () => {
     const view = renderWithFeatures(['ROLLOUT_WEB_search'])
 

package/src/screens/conversations/components/__tests__/filter_dropdown_list_header_component.test.tsx

@@ -21,15 +21,6 @@ const mockSearchEnabled = jest.fn()
 const mockCanBrowseArchived = jest.fn()
 const mockGroupsByGraphId: Record<string, { name: string }> = {}
 
-jest.mock('react-native', () => {
-  const actual = jest.requireActual('react-native')
-  return Object.defineProperty(actual, 'useWindowDimensions', {
-    value: jest.fn(() => ({ fontScale: 1 })),
-    configurable: true,
-  })
-})
-const mockUseWindowDimensions = jest.requireMock('react-native').useWindowDimensions
-
 jest.mock('@react-navigation/native', () => ({
   ...jest.requireActual('@react-navigation/native'),
   useNavigation: () => ({ setParams: mockSetParams, navigate: mockNavigate }),
@@ -130,50 +121,26 @@ describe('FilterDropdownListHeaderComponent', () => {
     mockSetParams.mockClear()
     mockSearchEnabled.mockReturnValue(true)
     mockCanBrowseArchived.mockReturnValue(false)
-    mockUseWindowDimensions.mockReturnValue({ fontScale: 1 })
     setCapabilities({ groups: true, teams: true })
     setRouteParams({})
   })
 
-  it('keeps the dropdown and actions on one line at the default font scale', () => {
-    mockUseWindowDimensions.mockReturnValue({ fontScale: 1 })
-
-    render(<FilterDropdownListHeaderComponent />)
-
-    expect(screen.getByTestId('conversations-filter-heading-row')).toHaveStyle({
-      flexDirection: 'row',
-    })
-  })
-
-  it('stacks the actions under the dropdown at the first font size above the default', () => {
-    mockUseWindowDimensions.mockReturnValue({ fontScale: 1.12 })
-
-    render(<FilterDropdownListHeaderComponent />)
-
-    expect(screen.getByTestId('conversations-filter-heading-row')).toHaveStyle({
-      flexDirection: 'column',
-    })
-  })
-
-  it('caps the trigger to the room beside the actions so a long label truncates', () => {
+  it('caps the trigger to the row so a long label truncates instead of overflowing', () => {
     render(<FilterDropdownListHeaderComponent />)
 
     fireEvent(screen.getByTestId('conversations-filter-heading-row'), 'layout', {
       nativeEvent: { layout: { width: 360 } },
     })
-    fireEvent(screen.getByTestId('conversations-filter-actions'), 'layout', {
-      nativeEvent: { layout: { width: 160 } },
-    })
 
     expect(screen.getByRole('button', { name: 'All conversations' })).toHaveStyle({
-      maxWidth: 156,
+      maxWidth: 328,
     })
   })
 
   it('offers every filter the person can use, then More filters', () => {
     render(<FilterDropdownListHeaderComponent />)
 
-    expect(menuItemNames()).toEqual(['All', 'Groups', 'Teams', 'DMs', 'More filters'])
+    expect(menuItemNames()).toEqual(['All', 'Groups', 'Teams', 'DMs', 'Unread', 'More filters'])
     expect(screen.getByRole('button', { name: 'All conversations' })).toBeTruthy()
   })
 
@@ -182,7 +149,7 @@ describe('FilterDropdownListHeaderComponent', () => {
 
     render(<FilterDropdownListHeaderComponent />)
 
-    expect(menuItemNames()).toEqual(['All', 'DMs'])
+    expect(menuItemNames()).toEqual(['All', 'DMs', 'Unread'])
   })
 
   it('selecting Groups filters to group conversations', () => {
@@ -195,6 +162,45 @@ describe('FilterDropdownListHeaderComponent', () => {
     )
   })
 
+  it('selecting Unread filters to unread conversations', () => {
+    setRouteParams({ group_source_app_name: 'Groups' })
+
+    render(<FilterDropdownListHeaderComponent />)
+
+    fireEvent.press(screen.getByRole('menuitem', { name: 'Unread' }))
+
+    expect(mockSetParams).toHaveBeenCalledWith({
+      title: undefined,
+      chat_group_graph_id: undefined,
+      group_source_app_name: undefined,
+      show_direct_messages: undefined,
+      show_unread: true,
+    })
+  })
+
+  it('selecting another filter clears Unread', () => {
+    setRouteParams({ show_unread: true })
+
+    render(<FilterDropdownListHeaderComponent />)
+
+    fireEvent.press(screen.getByRole('menuitem', { name: 'DMs' }))
+
+    expect(mockSetParams).toHaveBeenCalledWith(
+      expect.objectContaining({ show_direct_messages: true, show_unread: undefined })
+    )
+  })
+
+  it('labels the trigger Unread and checks it when filtered to unread', () => {
+    setRouteParams({ show_unread: true })
+
+    render(<FilterDropdownListHeaderComponent />)
+
+    expect(screen.getByRole('button', { name: 'Unread' })).toBeTruthy()
+    expect(screen.getByRole('menuitem', { name: 'Unread' }).props.accessibilityState.selected).toBe(
+      true
+    )
+  })
+
   it('labels the trigger with the active filter and checks it', () => {
     setRouteParams({ group_source_app_name: 'Services' })
 
@@ -230,7 +236,7 @@ describe('FilterDropdownListHeaderComponent', () => {
 
     render(<FilterDropdownListHeaderComponent />)
 
-    expect(menuItemNames()).toEqual(['All', 'DMs', 'More filters'])
+    expect(menuItemNames()).toEqual(['All', 'DMs', 'Unread', 'More filters'])
   })
 
   it('labels the archived list and carries it into More filters', () => {
@@ -279,6 +285,19 @@ describe('FilterDropdownListHeaderComponent', () => {
     expect(mockNavigate).toHaveBeenCalledWith('ConversationFilters', expect.any(Object))
   })
 
+  it('More filters carries the Unread filter into the sheet', () => {
+    setRouteParams({ show_unread: true })
+
+    render(<FilterDropdownListHeaderComponent />)
+
+    fireEvent.press(screen.getByRole('menuitem', { name: 'More filters' }))
+
+    expect(mockNavigate).toHaveBeenCalledWith(
+      'ConversationFilters',
+      expect.objectContaining({ show_unread: true })
+    )
+  })
+
   it('shows the search button only when search is enabled', () => {
     mockSearchEnabled.mockReturnValue(false)
     const view = render(<FilterDropdownListHeaderComponent />)