@planningcenter/chat-react-native 3.39.0-rc.6 → 3.39.0-rc.8

package/build/utils/time.js

@@ -0,0 +1,15 @@
+export function toMs(value, unit) {
+    switch (unit) {
+        case 'hours':
+            return value * 60 * 60 * 1000;
+        case 'minutes':
+            return value * 60 * 1000;
+        case 'seconds':
+            return value * 1000;
+    }
+}
+export const FIVE_SECONDS = toMs(5, 'seconds');
+export const FIVE_MINUTES = toMs(5, 'minutes');
+export const THIRTY_MINUTES = toMs(30, 'minutes');
+export const ONE_HOUR = toMs(1, 'hours');
+//# sourceMappingURL=time.js.map

package/build/utils/time.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time.js","sourceRoot":"","sources":["../../src/utils/time.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,IAAI,CAAC,KAAa,EAAE,IAAc;IAChD,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,OAAO;YACV,OAAO,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAA;QAC/B,KAAK,SAAS;YACZ,OAAO,KAAK,GAAG,EAAE,GAAG,IAAI,CAAA;QAC1B,KAAK,SAAS;YACZ,OAAO,KAAK,GAAG,IAAI,CAAA;IACvB,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,IAAI,CAAC,CAAC,EAAE,SAAS,CAAC,CAAA;AAC9C,MAAM,CAAC,MAAM,YAAY,GAAG,IAAI,CAAC,CAAC,EAAE,SAAS,CAAC,CAAA;AAC9C,MAAM,CAAC,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC,CAAA;AACjD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAC,CAAC,EAAE,OAAO,CAAC,CAAA","sourcesContent":["type TimeUnit = 'hours' | 'minutes' | 'seconds'\n\nexport function toMs(value: number, unit: TimeUnit): number {\n  switch (unit) {\n    case 'hours':\n      return value * 60 * 60 * 1000\n    case 'minutes':\n      return value * 60 * 1000\n    case 'seconds':\n      return value * 1000\n  }\n}\n\nexport const FIVE_SECONDS = toMs(5, 'seconds')\nexport const FIVE_MINUTES = toMs(5, 'minutes')\nexport const THIRTY_MINUTES = toMs(30, 'minutes')\nexport const ONE_HOUR = toMs(1, 'hours')\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.39.0-rc.6",
+  "version": "3.39.0-rc.8",
   "description": "",
   "main": "build/index.js",
   "react-native": "./src/index.tsx",
@@ -72,5 +72,5 @@
     "react-native-url-polyfill": "^2.0.0",
     "typescript": "~5.9.2"
   },
-  "gitHead": "97b3ea13cfe44860e2e72f30edcb1500bd77e515"
+  "gitHead": "bf556bbbbd9e7c6720dd5ce466fca2947caf420a"
 }

package/src/hooks/groups/use_group_chat_conversation_payload.ts

@@ -1,8 +1,9 @@
 import { useQuery } from '@tanstack/react-query'
 import { ApiResource, ResourceObject } from '../../types'
+import { toMs } from '../../utils/time'
 import { useApiClient } from '../use_api_client'
 
-const STALE_TIME_MS = 25 * 60 * 1000 // under Groups' 30-min server-side expiry
+const STALE_TIME_MS = toMs(25, 'minutes') // under Groups' 30-min server-side expiry
 
 interface Props {
   groupId: number

package/src/hooks/index.ts

@@ -10,6 +10,7 @@ export * from './use_current_person'
 export * from './use_deleting_ids'
 export * from './use_direct_messages_enabled'
 export * from './use_font_scale'
+export * from './use_has_direct_messages'
 export * from './use_groups_groups'
 export * from './use_groups'
 export * from './use_interaction_ghost_color'

package/src/hooks/services/use_services_chat_conversation_payload.ts

@@ -1,8 +1,9 @@
 import { useQuery } from '@tanstack/react-query'
+import { toMs } from '../../utils/time'
 import { useApiClient } from '../use_api_client'
 import { getServicesChatConversationPayload } from './use_find_or_create_services_conversation'
 
-const STALE_TIME_MS = 55 * 60 * 1000 // under Services' 1-hour server-side expiry
+const STALE_TIME_MS = toMs(55, 'minutes') // under Services' 1-hour server-side expiry
 
 interface Props {
   teamIds: number[]

package/src/hooks/use_api.ts

@@ -17,7 +17,15 @@ interface ApiGetOptions extends GetRequest {
   enabled?: boolean
 }
 
-export const useApiGet = <T extends ResourceObject | ResourceObject[]>(args: ApiGetOptions) => {
+type UseApiGetOptions = {
+  staleTime?: number
+  gcTime?: number
+}
+
+export const useApiGet = <T extends ResourceObject | ResourceObject[]>(
+  args: ApiGetOptions,
+  opts?: UseApiGetOptions
+) => {
   type Resource = ApiResource<T>
   const { session } = useContext(ChatContext)
   const apiClient = useApiClient()
@@ -32,6 +40,7 @@ export const useApiGet = <T extends ResourceObject | ResourceObject[]>(args: Api
       return apiClient[app].get({ url, data: d, headers }) as Promise<Resource>
     },
     enabled,
+    ...opts,
   })
 
   return { ...data, ...query }

package/src/hooks/use_chat_configuration.ts

@@ -5,6 +5,7 @@ import {
   getChatConfigurationRequestArgs,
   getChatConfigurationQueryKey,
 } from '../utils/request/get_chat_configuration'
+import { ONE_HOUR } from '../utils/time'
 import {
   FALLBACK_ALLOWED_FILE_EXTENSIONS,
   FALLBACK_ALLOWED_MIME_TYPES,
@@ -28,7 +29,7 @@ export function useChatConfiguration() {
         .get<ApiResource<ChatConfigurationResource>>(requestArgs)
         .catch(() => stableFallbackConfiguration)
     },
-    staleTime: 1000 * 60 * 60, // 1 hour — this rarely changes
+    staleTime: ONE_HOUR,
   })
 
   const attrs = data.data

package/src/hooks/use_chat_permissions.ts

@@ -1,4 +1,5 @@
 import { AppGrantsResource } from '../types'
+import { FIVE_MINUTES } from '../utils/time'
 import { useApiGet } from './use_api'
 import { App } from './use_api_client'
 
@@ -13,7 +14,9 @@ export const appGrantsRequestArgs = {
 }
 
 export function useAppGrants() {
-  return useApiGet<AppGrantsResource[]>(appGrantsRequestArgs)
+  return useApiGet<AppGrantsResource[]>(appGrantsRequestArgs, {
+    staleTime: FIVE_MINUTES,
+  })
 }
 
 export function useCanCreateConversations(): boolean {

package/src/hooks/use_current_person.ts

@@ -1,6 +1,7 @@
 import { useQueryClient } from '@tanstack/react-query'
 import { CurrentPersonResource } from '../types'
 import { ApiResource } from '../types/api_primitives'
+import { FIVE_MINUTES, THIRTY_MINUTES } from '../utils/time'
 import { getRequestQueryKey, useSuspenseGet } from './use_suspense_api'
 
 export const currentPersonRequestArgs = {
@@ -24,8 +25,8 @@ export const currentPersonQueryKey = getRequestQueryKey(currentPersonRequestArgs
 
 export const useCurrentPerson = () => {
   const { data: person } = useSuspenseGet<CurrentPersonResource>(currentPersonRequestArgs, {
-    staleTime: 5 * 60 * 1000, // 5 minutes - data stays fresh for 5 minutes
-    gcTime: 30 * 60 * 1000, // 30 minutes - data stays in cache for 30 minutes when not in use
+    staleTime: FIVE_MINUTES,
+    gcTime: THIRTY_MINUTES,
   })
 
   return person

package/src/hooks/use_features.ts

@@ -3,6 +3,7 @@ import { useCallback } from 'react'
 import { ApiCollection } from '../types'
 import type { FeatureResource } from '../types/resources/feature_resource'
 import { getFeaturesRequestArgs, getFeaturesQueryKey } from '../utils/request/get_features'
+import { FIVE_MINUTES } from '../utils/time'
 import { useApiClient } from './use_api_client'
 
 type FeatureName = (typeof availableFeatures)[keyof typeof availableFeatures]
@@ -18,7 +19,7 @@ export function useFeatures() {
         .get<ApiCollection<FeatureResource>>(requestArgs)
         .catch(() => stableEmptyFeatures)
     },
-    staleTime: 1000 * 60 * 5, // 5 minutes
+    staleTime: FIVE_MINUTES,
   })
 
   const features = data.data

package/src/hooks/use_groups.ts

@@ -1,5 +1,6 @@
 import { AppName } from '../types/resources/app_name'
 import { GroupResource, SourceType } from '../types/resources/group_resource'
+import { FIVE_MINUTES } from '../utils/time'
 import { useApiPaginator } from './use_api'
 
 type UseGroupsProps = {
@@ -8,20 +9,23 @@ type UseGroupsProps = {
 }
 
 export const useGroups = ({ source_app_name, source_type }: UseGroupsProps) => {
-  return useApiPaginator<GroupResource>({
-    url: '/me/groups',
-    data: {
-      fields: {
-        Group: [],
+  return useApiPaginator<GroupResource>(
+    {
+      url: '/me/groups',
+      data: {
+        fields: {
+          Group: [],
+        },
+        where: {
+          source_app_name,
+          source_type,
+        },
+        perPage: 100,
       },
-      where: {
-        source_app_name,
-        source_type,
-      },
-      perPage: 100,
+      app: 'chat',
     },
-    app: 'chat',
-  })
+    { staleTime: FIVE_MINUTES }
+  )
 }
 
 export const useCanDisplayGroups = (props: UseGroupsProps) => {

package/src/hooks/use_groups_groups.ts

@@ -1,24 +1,28 @@
 import { GroupsGroupResource } from '../types'
+import { FIVE_MINUTES } from '../utils/time'
 import { useApiPaginator } from './use_api'
 
 export const useGroupsGroups = () => {
-  return useApiPaginator<GroupsGroupResource>({
-    url: '/me/groups',
-    data: {
-      perPage: 100,
-      fields: {
-        Group: [
-          'can_create_conversation',
-          'can_create_conversation_reason_code',
-          'name',
-          'header_image',
-          'memberships_count',
-        ],
+  return useApiPaginator<GroupsGroupResource>(
+    {
+      url: '/me/groups',
+      data: {
+        perPage: 100,
+        fields: {
+          Group: [
+            'can_create_conversation',
+            'can_create_conversation_reason_code',
+            'name',
+            'header_image',
+            'memberships_count',
+          ],
+        },
+        order: 'name',
       },
-      order: 'name',
+      app: 'groups',
     },
-    app: 'groups',
-  })
+    { staleTime: FIVE_MINUTES }
+  )
 }
 
 export const useCanDisplayGroupsGroups = () => {

package/src/hooks/use_has_direct_messages.ts

@@ -5,7 +5,7 @@ import { useApiClient } from './use_api_client'
 export function useHasDirectMessages(): boolean {
   const apiClient = useApiClient()
 
-  const { data } = useQuery<ApiCollection<ConversationResource>>({
+  const { data, isFetched } = useQuery<ApiCollection<ConversationResource>>({
     queryKey: ['chat', '/me/conversations', 'direct_message', 'has_any'],
     queryFn: () =>
       apiClient.chat.get({
@@ -15,5 +15,7 @@ export function useHasDirectMessages(): boolean {
     staleTime: 1000 * 60 * 5,
   })
 
+  if (!isFetched) return false
+
   return (data?.data.length ?? 0) > 0
 }

package/src/hooks/use_jolt.ts

@@ -13,6 +13,7 @@ import { useChatContext } from '../contexts/chat_context'
 import { ApiResource } from '../types'
 import type { JoltSubscriptionPattern } from '../types/jolt_events'
 import { Client, Uri } from '../utils'
+import { FIVE_SECONDS } from '../utils/time'
 
 interface JoltResponse {
   type: 'JoltToken'
@@ -49,7 +50,7 @@ export const useJoltClient = (): JoltClient | undefined => {
           },
         })
       },
-      staleTime: 5000, // 5 seconds
+      staleTime: FIVE_SECONDS,
     })
   }
 

package/src/hooks/use_organization.ts

@@ -1,4 +1,5 @@
 import { OrganizationResource } from '../types'
+import { ONE_HOUR } from '../utils/time'
 import { App } from './use_api_client'
 import { useSuspenseGet } from './use_suspense_api'
 
@@ -13,5 +14,7 @@ export const organizationRequestArgs = {
 }
 
 export function useOrganization() {
-  return useSuspenseGet<OrganizationResource>(organizationRequestArgs)
+  return useSuspenseGet<OrganizationResource>(organizationRequestArgs, {
+    staleTime: ONE_HOUR,
+  })
 }

package/src/screens/conversation_filters/components/conversation_filters.tsx

@@ -2,7 +2,12 @@ import React, { useContext, useMemo } from 'react'
 import { StyleSheet, View, ViewStyle } from 'react-native'
 import { FlatList } from 'react-native-gesture-handler'
 import { Heading } from '../../../components'
-import { useAtFontScaleBreakpoint, useTheme } from '../../../hooks'
+import {
+  useAtFontScaleBreakpoint,
+  useDirectMessagesEnabled,
+  useHasDirectMessages,
+  useTheme,
+} from '../../../hooks'
 import { FilterContext, useFilterContext } from '../context/conversation_filter_context'
 import { FilterTypes } from '../filter_types'
 import { useGroupsToFilter, useTeamsToFilter } from '../hooks/filters'
@@ -52,7 +57,11 @@ interface DataItem<T, TName extends SectionTypes> {
 export const ConversationFilters = () => {
   const styles = useStyles()
   const { setScrollOffset, params } = useContext(FilterContext)
-  const { chat_group_graph_id, group_source_app_name = '' } = params
+  const { chat_group_graph_id, group_source_app_name = '', show_direct_messages } = params
+
+  const directMessagesEnabled = useDirectMessagesEnabled()
+  const hasDirectMessages = useHasDirectMessages()
+  const canFilterByDMs = directMessagesEnabled && hasDirectMessages
 
   const activeFilter: FilterTypes = useMemo(() => {
     if (chat_group_graph_id) {
@@ -61,10 +70,12 @@ export const ConversationFilters = () => {
       return FilterTypes.Groups
     } else if (/services/i.test(group_source_app_name)) {
       return FilterTypes.Teams
+    } else if (show_direct_messages) {
+      return FilterTypes.DirectMessages
     }
 
     return FilterTypes.All
-  }, [chat_group_graph_id, group_source_app_name])
+  }, [chat_group_graph_id, group_source_app_name, show_direct_messages])
 
   const { groups = [] } = useGroupsToFilter()
   const { teams = [] } = useTeamsToFilter()
@@ -91,14 +102,15 @@ export const ConversationFilters = () => {
   const teamItemData = selectActiveWithFirst(5)(teamItems)
 
   const hideAppFilters = groupItems.length < 1 || teamItems.length < 1
+  const showGeneralFilters = !hideAppFilters || canFilterByDMs
 
   const listData: SectionListData = [
     {
-      type: hideAppFilters ? SectionTypes.hidden : SectionTypes.header,
+      type: showGeneralFilters ? SectionTypes.header : SectionTypes.hidden,
       data: { title: 'General Filters' },
     },
     {
-      type: hideAppFilters ? SectionTypes.hidden : SectionTypes.filter,
+      type: showGeneralFilters ? SectionTypes.filter : SectionTypes.hidden,
       data: { filter: FilterTypes.All, isActive: activeFilter === FilterTypes.All },
     },
     {
@@ -117,6 +129,14 @@ export const ConversationFilters = () => {
         isActive: activeFilter === FilterTypes.Teams,
       },
     },
+    {
+      type: canFilterByDMs ? SectionTypes.filter : SectionTypes.hidden,
+      data: {
+        filter: FilterTypes.DirectMessages,
+        show_direct_messages: true,
+        isActive: activeFilter === FilterTypes.DirectMessages,
+      },
+    },
     {
       type: groupItems.length ? SectionTypes.header : SectionTypes.hidden,
       data: { title: 'Groups', style: styles.extraHeaderScalableSpace },

package/src/screens/conversation_filters/components/rows.tsx

@@ -17,13 +17,26 @@ import { FilterTypes } from '../filter_types'
 import { FilteredGroup } from '../hooks/filters'
 import { ConversationFilterStackParamList } from '../screen_props'
 
-export type FilterProps = { group_source_app_name?: string; isActive: boolean; filter: FilterTypes }
+export type FilterProps = {
+  group_source_app_name?: string
+  show_direct_messages?: boolean
+  isActive: boolean
+  filter: FilterTypes
+}
 
-export const FilterRow = ({ group_source_app_name, isActive, filter }: FilterProps) => {
+export const FilterRow = ({
+  group_source_app_name,
+  show_direct_messages,
+  isActive,
+  filter,
+}: FilterProps) => {
   const { setAppFilter } = useContext(FilterContext)
 
   return (
-    <PressableRow onPress={() => setAppFilter({ group_source_app_name })} isActive={isActive}>
+    <PressableRow
+      onPress={() => setAppFilter({ group_source_app_name, show_direct_messages })}
+      isActive={isActive}
+    >
       <Text>{filter}</Text>
     </PressableRow>
   )

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

@@ -21,6 +21,7 @@ export const FilterContext = createContext<{
   params: {
     chat_group_graph_id: undefined,
     group_source_app_name: undefined,
+    show_direct_messages: undefined,
   },
   scrollOffset: 0,
   setScrollOffset: () => {},
@@ -55,6 +56,7 @@ export const FilterProvider = ({ children }: PropsWithChildren) => {
         StackActions.popTo('Conversations', {
           chat_group_graph_id: undefined,
           group_source_app_name: undefined,
+          show_direct_messages: undefined,
         })
       )
     },
@@ -62,12 +64,14 @@ export const FilterProvider = ({ children }: PropsWithChildren) => {
       navigation.setParams({
         chat_group_graph_id: params.chat_group_graph_id,
         group_source_app_name: undefined,
+        show_direct_messages: undefined,
       })
     },
     setAppFilter: (params: Omit<ConversationFiltersParams, 'chat_group_graph_id'>) => {
       navigation.setParams({
         chat_group_graph_id: undefined,
         group_source_app_name: params.group_source_app_name,
+        show_direct_messages: params.show_direct_messages,
       })
     },
     applyFilters: (params: ConversationFiltersParams) => {

package/src/screens/conversation_filters/filter_types.ts

@@ -1,5 +1,6 @@
 export enum FilterTypes {
   All = 'All conversations',
+  DirectMessages = 'Direct messages',
   Groups = 'All my groups',
   Teams = 'All my teams and plans',
   More = 'More',

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

@@ -2,14 +2,18 @@ import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'
 import React, { useCallback, useMemo } from 'react'
 import { Alert, ScrollView, StyleSheet, View } from 'react-native'
 import { Heading, TextButton, ToggleButton } from '../../../components'
-import { useAtFontScaleBreakpoint, useCurrentPersonCache, useTheme } from '../../../hooks'
-import { useCanCreateConversations } from '../../../hooks'
+import {
+  useAtFontScaleBreakpoint,
+  useCanCreateConversations,
+  useCurrentPersonCache,
+  useDirectMessagesEnabled,
+  useHasDirectMessages,
+  useNewConversationEntry,
+  useTheme,
+} from '../../../hooks'
 import { useAppName } from '../../../hooks/use_app_name'
 import { useMarkAllRead } from '../../../hooks/use_conversations_actions'
-import { useDirectMessagesEnabled } from '../../../hooks/use_direct_messages_enabled'
 import { useCanDisplayGroups } from '../../../hooks/use_groups'
-import { useHasDirectMessages } from '../../../hooks/use_has_direct_messages'
-import { useNewConversationEntry } from '../../../hooks/use_new_conversation_entry'
 import { useNewConversationFromFilter } from '../../../hooks/use_new_conversation_from_filter'
 import { GraphId } from '../../../types/resources/group_resource'
 import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../../utils'
@@ -95,8 +99,9 @@ export const ListHeaderComponent = () => {
     navigation.navigate('ConversationFilters', {
       chat_group_graph_id,
       group_source_app_name,
+      show_direct_messages,
     })
-  }, [navigation, chat_group_graph_id, group_source_app_name])
+  }, [navigation, chat_group_graph_id, group_source_app_name, show_direct_messages])
 
   const handleMarkAllRead = useCallback(() => {
     currentPersonCache.update({ unreadCount: 0 })

package/src/screens/get_help_screen.tsx

@@ -4,6 +4,7 @@ import { Alert, Linking, StyleSheet, View } from 'react-native'
 import { Heading, PressableRow, Text, TextInlineButton } from '../components'
 import { useApiGet, useTheme } from '../hooks'
 import { useAppName } from '../hooks/use_app_name'
+import { useOrganization } from '../hooks/use_organization'
 import { ResourceObject } from '../types'
 import { Clipboard } from '../utils'
 
@@ -13,34 +14,6 @@ type GetHelpScreenRouteProps = {
 
 type GetHelpScreenProps = StaticScreenProps<GetHelpScreenRouteProps>
 
-interface OrganizationResource extends ResourceObject {
-  id: number
-  name: string
-  contactEmail: string
-  contactPhoneNumber: string
-  churchCenterChatHelpUrl: string
-  servicesChatHelpUrl: string
-}
-
-const useOrganization = () => {
-  const { data: organization } = useApiGet<OrganizationResource>({
-    url: '/',
-    data: {
-      fields: {
-        Organization: [
-          'contact_phone_number',
-          'contact_email',
-          'name',
-          'church_center_chat_help_url',
-          'services_chat_help_url',
-        ],
-      },
-    },
-  })
-
-  return organization
-}
-
 interface HelpUrlResource extends ResourceObject {
   id: number
   link: string
@@ -67,7 +40,7 @@ export const GetHelpScreen = ({ route }: GetHelpScreenProps) => {
   const styles = useStyles()
   const appName = useAppName()
   const navigation = useNavigation()
-  const organization = useOrganization()
+  const { data: organization } = useOrganization()
   const contactPresent = organization?.contactEmail || organization?.contactPhoneNumber
   const helpUrls = useHelpUrls()
   const appSpecificHelpUrls = useMemo(

package/src/types/resources/organization.ts

@@ -3,5 +3,6 @@ import { ResourceObject } from '../api_primitives'
 export interface OrganizationResource extends ResourceObject {
   type: 'Organization'
   contactEmail?: string
+  contactPhoneNumber?: string
   name?: string
 }

package/src/utils/time.ts

@@ -0,0 +1,17 @@
+type TimeUnit = 'hours' | 'minutes' | 'seconds'
+
+export function toMs(value: number, unit: TimeUnit): number {
+  switch (unit) {
+    case 'hours':
+      return value * 60 * 60 * 1000
+    case 'minutes':
+      return value * 60 * 1000
+    case 'seconds':
+      return value * 1000
+  }
+}
+
+export const FIVE_SECONDS = toMs(5, 'seconds')
+export const FIVE_MINUTES = toMs(5, 'minutes')
+export const THIRTY_MINUTES = toMs(30, 'minutes')
+export const ONE_HOUR = toMs(1, 'hours')