@planningcenter/chat-react-native 3.24.4 → 3.25.0-rc.1

package/src/screens/notification_settings/hooks/groups.ts

@@ -1,9 +1,11 @@
-import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { InfiniteData, useMutation, useQueryClient } from '@tanstack/react-query'
+import { merge } from 'lodash'
 import { getRequestQueryKey, useApiClient } from '../../../hooks'
 import { useSuspenseGet, useSuspensePaginator } from '../../../hooks'
-import { ApiResource } from '../../../types'
+import { ApiCollection, ApiResource } from '../../../types'
 import { GroupMembership, GroupResourceWithMembership } from '../../../types/resources'
 import { throwResponseError } from '../../../utils/response_error'
+import { updateRecordInPagesData } from '../../../utils'
 
 export const getGroupsRequestArgs = () => ({
   url: '/me/groups',
@@ -13,7 +15,11 @@ export const getGroupsRequestArgs = () => ({
     filter: 'user_settable_notification_level',
     fields: {
       Group: [],
-      GroupMembership: ['notification_level', 'notification_level_description'],
+      GroupMembership: [
+        'notification_level',
+        'notification_level_description',
+        'notification_level_options',
+      ],
     },
     order: 'name',
   },
@@ -25,7 +31,11 @@ export const getGroupRequestArgs = ({ groupId }: { groupId: number | string }) =
     include: ['my_group_membership'],
     fields: {
       Group: ['name', 'source_app_name', 'source_type', 'my_group_membership'],
-      GroupMembership: ['notification_level', 'notification_level_description'],
+      GroupMembership: [
+        'notification_level',
+        'notification_level_description',
+        'notification_level_options',
+      ],
     },
   },
 })
@@ -39,50 +49,77 @@ export const useGroups = () => {
 export const useGroup = ({ groupId }: { groupId: number | string }) => {
   const args = getGroupRequestArgs({ groupId })
 
-  return useSuspenseGet<GroupResourceWithMembership>(args)
+  return useSuspenseGet<GroupResourceWithMembership>(args, { refetchOnMount: false })
 }
 
+type GroupsQueryData = InfiniteData<ApiCollection<GroupResourceWithMembership>>
+
 export const useGroupMembershipUpdate = ({ groupId }: { groupId: number | string }) => {
   const apiClient = useApiClient()
   const queryClient = useQueryClient()
-  const requestArgs = getGroupRequestArgs({ groupId })
-  const queryKey = getRequestQueryKey(requestArgs)
+  const groupRequestArgs = getGroupRequestArgs({ groupId })
+  const groupsRequestArgs = getGroupsRequestArgs()
+  const groupQueryKey = getRequestQueryKey(groupRequestArgs)
 
-  return useMutation({
-    throwOnError: true,
-    onMutate: notificationLevel => {
-      queryClient.setQueryData<ApiResource<GroupResourceWithMembership>>(queryKey, groupData => {
-        if (!groupData?.data.myGroupMembership) return groupData
+  const enrichGroupMembership = (
+    membership: Partial<GroupMembership>
+  ): Partial<GroupMembership> => {
+    const cachedGroup =
+      queryClient.getQueryData<ApiResource<GroupResourceWithMembership>>(groupQueryKey)
+    const currentOptions = cachedGroup?.data.myGroupMembership?.notificationLevelOptions ?? []
+    const { notificationLevel } = membership
+    const selectedOption = notificationLevel
+      ? currentOptions.find(o => o.value === notificationLevel)
+      : undefined
+    const notificationLevelDescription =
+      membership.notificationLevelDescription ?? selectedOption?.description
 
-        return {
-          ...groupData,
-          data: {
-            ...groupData.data,
-            myGroupMembership: {
-              ...groupData.data.myGroupMembership,
-              notificationLevel,
-            },
-          },
-        }
+    return {
+      ...membership,
+      notificationLevelDescription,
+      ...(notificationLevel && {
+        notificationLevelOptions: currentOptions.map(o => ({
+          ...o,
+          enabled: o.value === notificationLevel,
+        })),
+      }),
+    }
+  }
+
+  const updateGroupsMembershipCache = (membership: Partial<GroupMembership>) => {
+    queryClient.setQueryData<GroupsQueryData>(getRequestQueryKey(groupsRequestArgs), prev =>
+      updateRecordInPagesData({
+        data: prev,
+        record: { id: groupId } as GroupResourceWithMembership,
+        processRecord: (_record, current) => merge({}, current, { myGroupMembership: membership }),
       })
+    )
+  }
+
+  const updateGroupMembershipCache = (membership: Partial<GroupMembership>) => {
+    queryClient.setQueryData<ApiResource<GroupResourceWithMembership>>(groupQueryKey, groupData => {
+      if (!groupData?.data.myGroupMembership) return groupData
+      return merge({}, groupData, { data: { myGroupMembership: membership } })
+    })
+  }
+
+  return useMutation({
+    throwOnError: true,
+    onMutate: membership => {
+      const enriched = enrichGroupMembership(membership)
+      updateGroupsMembershipCache(enriched)
+      updateGroupMembershipCache(enriched)
     },
     onSuccess: response => {
-      queryClient.setQueryData<ApiResource<GroupResourceWithMembership>>(queryKey, groupData => {
-        if (!groupData?.data.myGroupMembership) return groupData
+      const enriched = enrichGroupMembership(response.data)
+      updateGroupsMembershipCache(enriched)
+      updateGroupMembershipCache(enriched)
 
-        return {
-          ...groupData,
-          data: {
-            ...groupData.data,
-            myGroupMembership: {
-              ...groupData.data.myGroupMembership,
-              ...response.data,
-            },
-          },
-        }
-      })
+      // Updating conversations without access to the current filters
+      // is a hard itch to scratch so we just need to refetch.
+      queryClient.invalidateQueries({ queryKey: ['/me/conversations'] })
     },
-    mutationFn: (notificationLevel: string) => {
+    mutationFn: (membership: Partial<GroupMembership>) => {
       return apiClient.chat
         .patch<ApiResource<GroupMembership>>({
           url: `/me/groups/${groupId}/my_group_membership`,
@@ -90,7 +127,9 @@ export const useGroupMembershipUpdate = ({ groupId }: { groupId: number | string
             data: {
               type: 'GroupMembership',
               attributes: {
-                notification_level: notificationLevel,
+                ...(membership.notificationLevel !== undefined && {
+                  notification_level: membership.notificationLevel,
+                }),
               },
             },
           },

package/src/screens/notification_settings_screen.tsx

@@ -1,27 +1,19 @@
 import { PlatformPressable } from '@react-navigation/elements'
 import { StaticScreenProps, useNavigation } from '@react-navigation/native'
-import type { NativeStackNavigationProp } from '@react-navigation/native-stack'
 import React, { useCallback, useEffect, type ReactNode } from 'react'
 import { FlatList, Platform, StyleSheet, View, type ViewProps, type ViewStyle } from 'react-native'
 import { Badge, Heading, Icon, Text } from '../components'
 import { HeaderTextButton } from '../components/display/platform_modal_header_buttons'
 import { useTheme } from '../hooks'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { isDefined } from '../types'
-import type { GroupNotificationSettingsScreenProps } from './group_notification_settings_screen'
 import { useGroups } from './notification_settings/hooks/groups'
 import { useChatTypes } from './preferred_app/hooks/use_chat_types'
-import type { PreferredAppSelectionScreenProps } from './preferred_app_selection_screen'
 
 // =========================================
 // ====== Factory Constants & Types ========
 // =========================================
 
-type NotificationSettingsStackParamList = {
-  NotificationSettings: {}
-  PreferredAppSelection: PreferredAppSelectionScreenProps['route']['params']
-  GroupNotificationSettings: GroupNotificationSettingsScreenProps['route']['params']
-}
-
 enum SectionTypes {
   header,
   hidden,
@@ -53,7 +45,7 @@ interface DataItem<T, TName extends SectionTypes> {
 export type NotificationSettingsScreenProps = StaticScreenProps<{}>
 
 export function NotificationSettingsScreen({}: NotificationSettingsScreenProps) {
-  const navigation = useNavigation<NativeStackNavigationProp<NotificationSettingsStackParamList>>()
+  const navigation = useNavigation()
   const styles = useStyles()
   const { data: chatTypes } = useChatTypes()
   const { data: groups } = useGroups()
@@ -109,14 +101,14 @@ export function NotificationSettingsScreen({}: NotificationSettingsScreenProps)
       showBottomBorder: true,
     })),
     {
-      type: SectionTypes.header,
+      type: groups.length === 0 ? SectionTypes.hidden : SectionTypes.header,
       data: {
         title: 'Manage chat settings',
       },
       sectionInnerStyle: styles.sectionInnerHeader,
     },
     {
-      type: SectionTypes.view,
+      type: groups.length === 0 ? SectionTypes.hidden : SectionTypes.view,
       data: {
         children: (
           <Text variant="tertiary" style={styles.sectionDescription}>
@@ -130,6 +122,7 @@ export function NotificationSettingsScreen({}: NotificationSettingsScreenProps)
       type: SectionTypes.link,
       data: {
         title: group.name,
+        subtitle: group.myGroupMembership?.notificationLevelDescription,
         rightLabel: group.sourceType,
         onPress: () =>
           navigation.navigate('GroupNotificationSettings', {
@@ -206,6 +199,7 @@ export function NotificationSettingsScreen({}: NotificationSettingsScreenProps)
                   <LinkRow {...item.data} />
                 </ListSection>
               )
+            case SectionTypes.hidden:
             default:
               return null
           }
@@ -268,11 +262,12 @@ function SettingRow({ title, style, rightLabel, rightItem, rightItemStyle = {} }
 
 interface LinkRowProps {
   title: string
+  subtitle?: string
   rightLabel: string
   onPress: () => void
 }
 
-function LinkRow({ title, rightLabel, onPress }: LinkRowProps) {
+function LinkRow({ title, subtitle, rightLabel, onPress }: LinkRowProps) {
   const styles = useLinkRowStyles()
   const isSourceType = rightLabel === 'Team' || rightLabel === 'Group' || rightLabel === 'PlanTeam'
 
@@ -285,9 +280,12 @@ function LinkRow({ title, rightLabel, onPress }: LinkRowProps) {
       accessibilityHint={`Navigate to ${title} settings`}
     >
       <View style={styles.innerContainer}>
-        <Text style={styles.title} numberOfLines={2}>
-          {title}
-        </Text>
+        <View style={styles.leftContent}>
+          <Text style={styles.title} numberOfLines={2}>
+            {title}
+          </Text>
+          {Boolean(subtitle) && <Text variant="footnote">{subtitle}</Text>}
+        </View>
         <View style={styles.rightContent}>
           {isSourceType ? (
             <Badge label={rightLabel} appearance="neutral" variant="meta" />
@@ -311,13 +309,16 @@ function LinkRow({ title, rightLabel, onPress }: LinkRowProps) {
 
 const useStyles = ({}: { isStart?: boolean; isEnd?: boolean } = {}) => {
   const { colors } = useTheme()
+  const { bottom } = useSafeAreaInsets()
   const headerBottomPadding = 0
 
   return StyleSheet.create({
     listContainer: {
       flex: 1,
     },
-    contentContainer: {},
+    contentContainer: {
+      paddingBottom: bottom,
+    },
     sectionOuterBase: {
       paddingLeft: 16,
     },
@@ -326,6 +327,7 @@ const useStyles = ({}: { isStart?: boolean; isEnd?: boolean } = {}) => {
       paddingVertical: 16,
     },
     sectionInnerHeader: {
+      paddingTop: 24,
       paddingBottom: headerBottomPadding,
     },
     sectionInnerBottomBorder: {
@@ -364,15 +366,16 @@ const useLinkRowStyles = () => {
       justifyContent: 'space-between',
       gap: 12,
     },
+    leftContent: {
+      flex: 1,
+      gap: 4,
+    },
     rightContent: {
       flexDirection: 'row',
       alignItems: 'center',
       gap: 8,
     },
-    title: {
-      flexShrink: 1,
-      alignSelf: 'center',
-    },
+    title: {},
     rightLabelText: {
       color: theme.colors.textColorDefaultSecondary,
     },

package/src/types/resources/conversation.ts

@@ -1,5 +1,6 @@
 import type { AnalyticsMetadataResource } from './analytics_metadata'
 import { ConversationBadgeResource } from './conversation_badge'
+import { ConversationMembershipResource } from './conversation_membership'
 import { GroupResource } from './group_resource'
 import { MemberAbilityResource } from './member_ability'
 
@@ -8,9 +9,7 @@ export interface ConversationResource {
   id: number
   badges?: ConversationBadgeResource[]
   analyticsMetadata?: AnalyticsMetadataResource
-  conversationMembership?: {
-    lastReadMessageSortKey: string
-  }
+  conversationMembership?: Partial<ConversationMembershipResource>
   createdAt: string
   deleted?: boolean
   groups?: GroupResource[]

package/src/types/resources/conversation_membership.ts

@@ -0,0 +1,17 @@
+import { ResourceObject } from '../api_primitives'
+
+export type NotificationLevelValue = 'everything' | 'nothing'
+export type NotificationLevelDescription = string
+
+export interface ConversationMembershipResource extends ResourceObject {
+  type: 'ConversationMembership'
+  lastReadMessageSortKey: string
+  muted: boolean
+  notificationLevel: NotificationLevelValue
+  notificationLevelDescription: NotificationLevelDescription
+  notificationLevelOptions: Array<{
+    description: NotificationLevelDescription
+    enabled: boolean
+    value: NotificationLevelValue
+  }>
+}

package/src/types/resources/group_membership.ts

@@ -1,6 +1,13 @@
 import { ResourceObject } from '../api_primitives'
 
+interface GroupNotificationLevelOption {
+  value: string
+  description: string
+  enabled: boolean
+}
+
 export interface GroupMembership extends ResourceObject {
   notificationLevel: string
   notificationLevelDescription: string
+  notificationLevelOptions: GroupNotificationLevelOption[]
 }

package/src/types/resources/index.ts

@@ -1,5 +1,6 @@
 export * from './analytics_metadata'
 export * from './conversation'
+export * from './conversation_membership'
 export * from './member'
 export * from './message'
 export * from './oauth_token'

package/src/utils/deep_snake_case_keys.ts

@@ -0,0 +1,16 @@
+import { isArray, isObject, mapKeys, mapValues, snakeCase } from 'lodash'
+
+type ObjType = Record<string, unknown> | unknown[] | unknown
+
+export function deepSnakeCaseKeys<T extends ObjType>(obj: T): T {
+  if (isArray(obj)) {
+    return obj.map(deepSnakeCaseKeys) as T
+  } else if (isObject(obj)) {
+    return mapValues(
+      // @ts-ignore This mutates the object, but we don't care about the type here
+      mapKeys(obj, (_value: string, key: string) => snakeCase(key)),
+      deepSnakeCaseKeys
+    ) as T
+  }
+  return obj
+}