@planningcenter/chat-react-native 4.4.1-qa-staging.25 → 4.5.0-rc.0

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/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,53 +121,71 @@ 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 below the header font cap', () => {
-    mockUseWindowDimensions.mockReturnValue({ fontScale: 1.15 })
-
+  it('offers every filter the person can use, then More filters', () => {
     render(<FilterDropdownListHeaderComponent />)
 
-    expect(screen.getByTestId('conversations-filter-heading-row')).toHaveStyle({
-      flexDirection: 'row',
-    })
+    expect(menuItemNames()).toEqual(['All', 'Groups', 'Teams', 'DMs', 'Unread', 'More filters'])
+    expect(screen.getByRole('button', { name: 'All conversations' })).toBeTruthy()
   })
 
-  it('stacks the actions under the dropdown once header text stops scaling', () => {
-    mockUseWindowDimensions.mockReturnValue({ fontScale: 1.2 })
+  it('leaves out Teams and More filters when only DMs are filterable', () => {
+    setCapabilities({ groups: false, teams: false })
 
     render(<FilterDropdownListHeaderComponent />)
 
-    expect(screen.getByTestId('conversations-filter-heading-row')).toHaveStyle({
-      flexDirection: 'column',
-    })
+    expect(menuItemNames()).toEqual(['All', 'DMs', 'Unread'])
   })
 
-  it('offers every filter the person can use, then More filters', () => {
+  it('selecting Groups filters to group conversations', () => {
     render(<FilterDropdownListHeaderComponent />)
 
-    expect(menuItemNames()).toEqual(['All', 'Groups', 'Teams', 'DMs', 'More filters'])
-    expect(screen.getByRole('button', { name: 'All conversations' })).toBeTruthy()
+    fireEvent.press(screen.getByRole('menuitem', { name: 'Groups' }))
+
+    expect(mockSetParams).toHaveBeenCalledWith(
+      expect.objectContaining({ group_source_app_name: 'Groups', show_direct_messages: undefined })
+    )
   })
 
-  it('leaves out Teams and More filters when only DMs are filterable', () => {
-    setCapabilities({ groups: false, teams: false })
+  it('selecting Unread filters to unread conversations', () => {
+    setRouteParams({ group_source_app_name: 'Groups' })
 
     render(<FilterDropdownListHeaderComponent />)
 
-    expect(menuItemNames()).toEqual(['All', 'DMs'])
+    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 Groups filters to group conversations', () => {
+  it('selecting another filter clears Unread', () => {
+    setRouteParams({ show_unread: true })
+
     render(<FilterDropdownListHeaderComponent />)
 
-    fireEvent.press(screen.getByRole('menuitem', { name: 'Groups' }))
+    fireEvent.press(screen.getByRole('menuitem', { name: 'DMs' }))
 
     expect(mockSetParams).toHaveBeenCalledWith(
-      expect.objectContaining({ group_source_app_name: 'Groups', show_direct_messages: undefined })
+      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
     )
   })
 
@@ -215,7 +224,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', () => {
@@ -264,6 +273,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 />)

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

@@ -33,6 +33,7 @@ enum FilterTypes {
   Groups = 'Groups',
   Teams = 'Teams',
   DMs = 'DMs',
+  Unread = 'Unread',
   More = 'More',
 }
 
@@ -41,6 +42,7 @@ const FILTER_PARAMS: Record<Exclude<FilterTypes, FilterTypes.More>, Conversation
   [FilterTypes.Groups]: { group_source_app_name: 'Groups' },
   [FilterTypes.Teams]: { group_source_app_name: 'Services' },
   [FilterTypes.DMs]: { show_direct_messages: true },
+  [FilterTypes.Unread]: { show_unread: true },
 }
 
 export const FilterDropdownListHeaderComponent = () => {
@@ -59,6 +61,7 @@ export const FilterDropdownListHeaderComponent = () => {
     group_source_app_name = '',
     show_direct_messages,
     show_archived,
+    show_unread,
   } = route.params || {}
   const currentPersonCache = useCurrentPersonCache()
   const { markAllRead, isPending } = useMarkAllRead()
@@ -81,10 +84,12 @@ export const FilterDropdownListHeaderComponent = () => {
       return FilterTypes.Teams
     } else if (show_direct_messages) {
       return FilterTypes.DMs
+    } else if (show_unread) {
+      return FilterTypes.Unread
     }
 
     return FilterTypes.All
-  }, [chat_group_graph_id, group_source_app_name, show_direct_messages, show_archived])
+  }, [chat_group_graph_id, group_source_app_name, show_direct_messages, show_archived, show_unread])
 
   const options: FilterDropdownOption[] = useMemo(
     () => [
@@ -92,6 +97,7 @@ export const FilterDropdownListHeaderComponent = () => {
       ...(canFilterByGroups ? [{ id: FilterTypes.Groups, label: FilterTypes.Groups }] : []),
       ...(canFilterByTeams ? [{ id: FilterTypes.Teams, label: FilterTypes.Teams }] : []),
       ...(canFilterByDMs ? [{ id: FilterTypes.DMs, label: FilterTypes.DMs }] : []),
+      { id: FilterTypes.Unread, label: FilterTypes.Unread },
     ],
     [canFilterByGroups, canFilterByTeams, canFilterByDMs]
   )
@@ -142,6 +148,7 @@ export const FilterDropdownListHeaderComponent = () => {
         group_source_app_name: undefined,
         show_direct_messages: undefined,
         show_archived: undefined,
+        show_unread: undefined,
         ...params,
       })
     },
@@ -170,8 +177,16 @@ export const FilterDropdownListHeaderComponent = () => {
       group_source_app_name,
       show_direct_messages,
       show_archived,
+      show_unread,
     })
-  }, [navigation, chat_group_graph_id, group_source_app_name, show_direct_messages, show_archived])
+  }, [
+    navigation,
+    chat_group_graph_id,
+    group_source_app_name,
+    show_direct_messages,
+    show_archived,
+    show_unread,
+  ])
 
   const handleMarkAllRead = useCallback(() => {
     currentPersonCache.update({ unreadCount: 0 })
@@ -194,7 +209,7 @@ export const FilterDropdownListHeaderComponent = () => {
 
   return (
     <View style={styles.listHeader}>
-      <View style={styles.headingRow} testID="conversations-filter-heading-row">
+      <View style={styles.headingRow}>
         <View style={styles.titleContainer}>
           <FilterDropdown
             options={options}
@@ -252,7 +267,7 @@ export const FilterDropdownListHeaderComponent = () => {
 
 const useStyles = () => {
   const theme = useTheme()
-  const atFontScaleBreakpoint = useAtFontScaleBreakpoint(MAX_FONT_SIZE_MULTIPLIER_LANDMARK)
+  const atFontScaleBreakpoint = useAtFontScaleBreakpoint()
 
   return StyleSheet.create({
     listHeader: {

package/src/screens/conversations/conversations_screen.tsx

@@ -19,6 +19,7 @@ export type ConversationsScreenProps = StaticScreenProps<{
   group_source_app_name?: AppName
   show_direct_messages?: boolean
   show_archived?: boolean
+  show_unread?: boolean
 }>
 
 export function ConversationsScreen({ route }: ConversationsScreenProps) {

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

@@ -13,6 +13,7 @@ describe('getConversationsRequestArgs', () => {
     ['chat_group_graph_id', { chat_group_graph_id: groupId }, 'mine_or_not_empty,group'],
     ['show_direct_messages', { show_direct_messages: true }, 'mine_or_not_empty,direct_message'],
     ['show_archived', { show_archived: true }, 'mine_or_not_empty,archived'],
+    ['show_unread', { show_unread: true }, 'mine_or_not_empty,unread'],
   ])('%s uses filter: %s', (_label, args, expectedFilter) => {
     expect(getConversationsRequestArgs(args).data.filter).toBe(expectedFilter)
   })

package/src/utils/request/conversation.ts

@@ -7,6 +7,7 @@ export interface ConversationRequestArgs {
   group_source_app_name?: string
   show_direct_messages?: boolean
   show_archived?: boolean
+  show_unread?: boolean
 }
 
 export const getConversationsRequestArgs = ({
@@ -15,12 +16,15 @@ export const getConversationsRequestArgs = ({
   group_source_app_name,
   show_direct_messages,
   show_archived,
+  show_unread,
 }: Partial<ConversationRequestArgs> = {}): GetRequest => {
   let filter: string
   if (chat_group_graph_id) {
     filter = 'mine_or_not_empty,group'
   } else if (show_archived) {
     filter = 'mine_or_not_empty,archived'
+  } else if (show_unread) {
+    filter = 'mine_or_not_empty,unread'
   } else if (show_direct_messages) {
     filter = 'mine_or_not_empty,direct_message'
   } else if (group_source_app_name) {

package/src/utils/styles.ts

@@ -6,7 +6,6 @@ export const MAX_FONT_SIZE_MULTIPLIER_LANDMARK = 1.2 // Use in headers, footers,
 
 export const CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL = 16 // TODO: move to `screens/conversation/utils/styles` when `/screens/conversation` is created
 export const MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH = 32 // TODO: move to `screens/conversation/utils/styles` when `/screens/conversation` is created
-export const MESSAGE_BACKGROUND_OUTSET = 2
 
 export const platformFontWeightMedium = Platform.select({
   ios: tokens.fontWeightMedium,