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

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

@@ -128,7 +128,7 @@ describe('FilterDropdownListHeaderComponent', () => {
   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()
   })
 
@@ -137,7 +137,7 @@ describe('FilterDropdownListHeaderComponent', () => {
 
     render(<FilterDropdownListHeaderComponent />)
 
-    expect(menuItemNames()).toEqual(['All', 'DMs'])
+    expect(menuItemNames()).toEqual(['All', 'DMs', 'Unread'])
   })
 
   it('selecting Groups filters to group conversations', () => {
@@ -150,6 +150,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' })
 
@@ -185,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', () => {
@@ -234,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 })

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) {