@planningcenter/chat-react-native 3.18.0-rc.0 → 3.18.0-rc.10

package/src/screens/conversation_select_recipients/conversation_select_teams_i_lead_recipients_screen.tsx

@@ -1,7 +1,6 @@
 import { useNavigation } from '@react-navigation/native'
 import React from 'react'
-import { StyleSheet, View } from 'react-native'
-import { FlashList } from '@shopify/flash-list'
+import { FlatList, StyleSheet, View } from 'react-native'
 import { Heading } from '../../components'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { ConversationSelectRecipientsScreenProps } from './types/screen_props'
@@ -30,10 +29,9 @@ export const ConversationSelectTeamsILeadRecipientsScreen = ({
   }
 
   return (
-    <FlashList
+    <FlatList
       data={serviceTypes}
       keyExtractor={item => item.id.toString()}
-      estimatedItemSize={65}
       contentContainerStyle={styles.contentContainer}
       ListHeaderComponent={
         <View style={styles.sectionHeader}>

package/src/screens/message_actions_screen.tsx

@@ -14,7 +14,7 @@ import { useMessageReactionToggle } from '../hooks/use_message_reaction_toggle'
 import { ReactionCountResource } from '../types/resources/reaction'
 import { Clipboard, Haptic } from '../utils/native_adapters'
 import { MessageResource } from '../types'
-import { REPLIES_FEATURE_ENABLED } from '../utils'
+import { availableFeatures, useFeatures } from '../hooks/use_features'
 
 export const MessageActionsScreenOptions = getFormSheetScreenOptions({
   sheetAllowedDetents: [0.5],
@@ -76,6 +76,8 @@ function MessageActionsScreenContent({
   const navigation = useNavigation()
   const apiClient = useApiClient()
   const styles = useStyles()
+  const { featureEnabled } = useFeatures()
+  const repliesEnabled = featureEnabled(availableFeatures.threaded_replies)
 
   const myReactions = message?.reactionCounts
     .filter(reaction => reaction.mine)
@@ -190,7 +192,7 @@ function MessageActionsScreenContent({
         ))}
       </View>
       <View style={styles.actions}>
-        {REPLIES_FEATURE_ENABLED && !inReplyScreen && (
+        {repliesEnabled && !inReplyScreen && (
           <FormSheet.Action
             onPress={handleReplyPress}
             title="Reply to message"

package/src/types/jolt_events/reaction_events.ts

@@ -6,6 +6,7 @@ interface BaseReactionEventData extends Record<string, unknown> {
     author_id: number
     conversation_id: number
     message_sort_key: string
+    reply_root_id?: string | null
     created_at: string
     organization_id: number
     value: ReactionCountResource['value']

package/src/types/jolt_events/typing_events.ts

@@ -13,4 +13,5 @@ export interface TypingBroadcastDataAttributes {
   author_id: number
   author_name: string
   id: string
+  reply_root_id: string | null
 }

package/src/types/resources/feature_resource.ts

@@ -0,0 +1,6 @@
+export interface FeatureResource {
+  type: 'Feature'
+  id: string
+  name: string
+  enabled: boolean
+}

package/src/utils/cache/messages_cache.ts

@@ -0,0 +1,113 @@
+import { InfiniteData, QueryClient } from '@tanstack/react-query'
+import { ApiCollection, MessageResource } from '../../types'
+import { deleteRecordInPagesData } from './page_mutations'
+import { updateOrCreateRecordInPagesData, updateRecordInPagesData } from './page_mutations'
+import { JoltReactionEvent } from '../../types/jolt_events'
+import { transformReactionEventDataToReactionCountResource } from '../jolt/transform_reaction_event_data_to_reaction_count_resource'
+import { getMessagesRequestArgs } from '../request/get_messages'
+import { getRequestQueryKey } from '../../hooks/use_suspense_api'
+
+export function updateCacheWithMessage(
+  queryClient: QueryClient,
+  queryKey: unknown[],
+  message: MessageResource,
+  event: 'message.created' | 'message.updated'
+) {
+  queryClient.setQueryData<MessagesQueryData>(queryKey, prev => {
+    if (event === 'message.created') {
+      // Before adding the new message, remove any pending temporary messages
+      // with matching text to prevent duplicates from race conditions
+      let dataAfterTempRemoval = prev
+      if (prev && message.text && message.mine) {
+        dataAfterTempRemoval = deleteRecordInPagesData({
+          data: prev,
+          record: message,
+          matchFn: (existingMessage, _record) => {
+            return (
+              isTemporaryMessageId(existingMessage.id) &&
+              existingMessage.text === message.text &&
+              existingMessage.mine
+            )
+          },
+        })
+      }
+
+      return updateOrCreateRecordInPagesData({
+        data: dataAfterTempRemoval,
+        record: message,
+        processRecord: (record, current) => {
+          return { ...current, ...record }
+        },
+      })
+    } else {
+      return updateRecordInPagesData({
+        data: prev,
+        record: message,
+        processRecord: (record, current) => {
+          return { ...current, ...record }
+        },
+      })
+    }
+  })
+}
+
+export function updateCacheWithReaction(
+  queryClient: QueryClient,
+  queryKey: unknown[],
+  event: JoltReactionEvent,
+  currentPersonId: number
+) {
+  const message = { id: event.data.data.message_sort_key } as MessageResource
+  queryClient.setQueryData<MessagesQueryData>(queryKey, prev =>
+    updateRecordInPagesData({
+      data: prev,
+      record: message,
+      processRecord: (record, oldMessage) => {
+        const reactionCounts = oldMessage.reactionCounts || []
+        let foundMatch = false
+        let newReactionCounts = reactionCounts.map(reactionCount => {
+          if (reactionCount.value === event.data.data.value) {
+            foundMatch = true
+            return transformReactionEventDataToReactionCountResource({
+              data: event.data.data,
+              oldData: reactionCount,
+              event: event.event,
+              currentPersonId,
+            })
+          }
+          return reactionCount
+        })
+
+        if (!foundMatch) {
+          const newReactionCount = transformReactionEventDataToReactionCountResource({
+            data: event.data.data,
+            event: event.event,
+            currentPersonId,
+          })
+
+          if (newReactionCount?.count) {
+            newReactionCounts = [...newReactionCounts, newReactionCount]
+          }
+        }
+
+        return { ...oldMessage, reactionCounts: newReactionCounts }
+      },
+    })
+  )
+}
+
+type MessagesQueryData = InfiniteData<ApiCollection<MessageResource>>
+export function isTemporaryMessageId(messageId?: string | null): boolean {
+  return !!messageId && messageId.endsWith('-temp')
+}
+export function isNewMessage(message?: MessageResource): boolean {
+  return !message?.id || isTemporaryMessageId(message.id)
+}
+
+export function getThreadedMessagesQueryKey(conversationId: number, replyRootId: string) {
+  const requestArgs = getMessagesRequestArgs({
+    conversation_id: conversationId,
+    reply_root_id: replyRootId,
+  })
+  return getRequestQueryKey(requestArgs)
+}

package/src/utils/cache/optimistically_create_message.ts

@@ -14,12 +14,14 @@ export function optimisticallyCreateMessage({
   attachments,
   currentPerson,
   message,
+  replyRootId,
 }: {
   conversationId: number
   text: string
   attachments?: DenormalizedAttachmentResourceForCreate[]
   currentPerson: CurrentPersonResource
   message?: MessageResource
+  replyRootId?: string | null
 }) {
   const id = message?.id || generateTempMessageId()
 
@@ -49,12 +51,15 @@ export function optimisticallyCreateMessage({
     lastInGroup: true,
     pending: true,
     replyCount: 0,
-    replyRootId: null,
+    replyRootId: replyRootId || null,
   }
 
   // Add the optimistic message to the cache
   type QueryData = InfiniteData<ApiCollection<MessageResource>>
-  const queryKey = getMessagesQueryKey({ conversation_id: conversationId })
+  const queryKey = getMessagesQueryKey({
+    conversation_id: conversationId,
+    reply_root_id: replyRootId,
+  })
 
   chatQueryClient.setQueryData<QueryData>(queryKey, data =>
     updateOrCreateRecordInPagesData({

package/src/utils/index.ts

@@ -9,4 +9,3 @@ export * from './pluralize'
 export * from './destructure_chat_group_graph_id'
 export * from './convert_attachments_for_create'
 export * from './assert_keys_are_numbers'
-export * from './replies_local_feature_flag'

package/src/utils/request/get_features.ts

@@ -0,0 +1,20 @@
+import { getRequestQueryKey } from '../../hooks/use_suspense_api'
+
+export const getFeaturesRequestArgs = () => {
+  const url = '/me/features'
+
+  return {
+    url,
+    data: {
+      perPage: 100,
+      fields: {
+        Feature: ['name', 'enabled'],
+      },
+    },
+  }
+}
+
+export const getFeaturesQueryKey = () => {
+  const requestArgs = getFeaturesRequestArgs()
+  return getRequestQueryKey(requestArgs)
+}

package/build/components/conversation/disabled_replies_banners.d.ts

@@ -1,3 +0,0 @@
-export declare const LeaderDisabledRepliesBanner: () => import("react").JSX.Element;
-export declare const MemberDisabledRepliesBanner: () => import("react").JSX.Element;
-//# sourceMappingURL=disabled_replies_banners.d.ts.map

package/build/components/conversation/disabled_replies_banners.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"disabled_replies_banners.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/disabled_replies_banners.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,2BAA2B,mCAEvC,CAAA;AAED,eAAO,MAAM,2BAA2B,mCAQvC,CAAA"}

package/build/components/conversation/disabled_replies_banners.js

@@ -1,41 +0,0 @@
-import { StyleSheet, View } from 'react-native';
-import { useTheme } from '../../hooks';
-import { Text } from '../display';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-export const LeaderDisabledRepliesBanner = () => {
-    return <DisabledRepliesBanner description="Replies are frozen for everyone else."/>;
-};
-export const MemberDisabledRepliesBanner = () => {
-    const styles = useStyles();
-    return (<DisabledRepliesBanner description="Replies have been disabled by a leader, but you can still add reactions." style={styles.memberBanner}/>);
-};
-const DisabledRepliesBanner = ({ description, style }) => {
-    const styles = useStyles();
-    return (<View style={[styles.baseBanner, style]}>
-      <Text style={styles.text} variant="tertiary">
-        {description}
-      </Text>
-    </View>);
-};
-const useStyles = () => {
-    const { colors } = useTheme();
-    const { bottom } = useSafeAreaInsets();
-    return StyleSheet.create({
-        baseBanner: {
-            paddingHorizontal: 16,
-            paddingVertical: 4,
-            backgroundColor: colors.statusNeutralComposedBackground,
-            borderTopWidth: 1,
-            borderTopColor: colors.borderColorDefaultBase,
-        },
-        text: {
-            textAlign: 'center',
-        },
-        memberBanner: {
-            paddingTop: 16,
-            paddingBottom: 16 + bottom,
-            marginBottom: -bottom,
-        },
-    });
-};
-//# sourceMappingURL=disabled_replies_banners.js.map

package/build/components/conversation/disabled_replies_banners.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"disabled_replies_banners.js","sourceRoot":"","sources":["../../../src/components/conversation/disabled_replies_banners.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAkB,MAAM,cAAc,CAAA;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAElE,MAAM,CAAC,MAAM,2BAA2B,GAAG,GAAG,EAAE;IAC9C,OAAO,CAAC,qBAAqB,CAAC,WAAW,CAAC,uCAAuC,EAAG,CAAA;AACtF,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,2BAA2B,GAAG,GAAG,EAAE;IAC9C,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,OAAO,CACL,CAAC,qBAAqB,CACpB,WAAW,CAAC,0EAA0E,CACtF,KAAK,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,EAC3B,CACH,CAAA;AACH,CAAC,CAAA;AAOD,MAAM,qBAAqB,GAAG,CAAC,EAAE,WAAW,EAAE,KAAK,EAA8B,EAAE,EAAE;IACnF,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAE1B,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,CACtC;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,UAAU,CAC1C;QAAA,CAAC,WAAW,CACd;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAC7B,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAA;IAEtC,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,UAAU,EAAE;YACV,iBAAiB,EAAE,EAAE;YACrB,eAAe,EAAE,CAAC;YAClB,eAAe,EAAE,MAAM,CAAC,+BAA+B;YACvD,cAAc,EAAE,CAAC;YACjB,cAAc,EAAE,MAAM,CAAC,sBAAsB;SAC9C;QACD,IAAI,EAAE;YACJ,SAAS,EAAE,QAAQ;SACpB;QACD,YAAY,EAAE;YACZ,UAAU,EAAE,EAAE;YACd,aAAa,EAAE,EAAE,GAAG,MAAM;YAC1B,YAAY,EAAE,CAAC,MAAM;SACtB;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import { StyleSheet, View, type ViewStyle } from 'react-native'\nimport { useTheme } from '../../hooks'\nimport { Text } from '../display'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\n\nexport const LeaderDisabledRepliesBanner = () => {\n  return <DisabledRepliesBanner description=\"Replies are frozen for everyone else.\" />\n}\n\nexport const MemberDisabledRepliesBanner = () => {\n  const styles = useStyles()\n  return (\n    <DisabledRepliesBanner\n      description=\"Replies have been disabled by a leader, but you can still add reactions.\"\n      style={styles.memberBanner}\n    />\n  )\n}\n\ninterface DisabledRepliesBannerProps {\n  description: string\n  style?: ViewStyle\n}\n\nconst DisabledRepliesBanner = ({ description, style }: DisabledRepliesBannerProps) => {\n  const styles = useStyles()\n\n  return (\n    <View style={[styles.baseBanner, style]}>\n      <Text style={styles.text} variant=\"tertiary\">\n        {description}\n      </Text>\n    </View>\n  )\n}\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n  const { bottom } = useSafeAreaInsets()\n\n  return StyleSheet.create({\n    baseBanner: {\n      paddingHorizontal: 16,\n      paddingVertical: 4,\n      backgroundColor: colors.statusNeutralComposedBackground,\n      borderTopWidth: 1,\n      borderTopColor: colors.borderColorDefaultBase,\n    },\n    text: {\n      textAlign: 'center',\n    },\n    memberBanner: {\n      paddingTop: 16,\n      paddingBottom: 16 + bottom,\n      marginBottom: -bottom,\n    },\n  })\n}\n"]}

package/build/utils/replies_local_feature_flag.d.ts

@@ -1,2 +0,0 @@
-export declare const REPLIES_FEATURE_ENABLED = false;
-//# sourceMappingURL=replies_local_feature_flag.d.ts.map

package/build/utils/replies_local_feature_flag.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"replies_local_feature_flag.d.ts","sourceRoot":"","sources":["../../src/utils/replies_local_feature_flag.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,uBAAuB,QAAQ,CAAA"}

package/build/utils/replies_local_feature_flag.js

@@ -1,3 +0,0 @@
-// TODO: Replace this whole file with the flipper flag
-export const REPLIES_FEATURE_ENABLED = false;
-//# sourceMappingURL=replies_local_feature_flag.js.map

package/build/utils/replies_local_feature_flag.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"replies_local_feature_flag.js","sourceRoot":"","sources":["../../src/utils/replies_local_feature_flag.ts"],"names":[],"mappings":"AAAA,sDAAsD;AACtD,MAAM,CAAC,MAAM,uBAAuB,GAAG,KAAK,CAAA","sourcesContent":["// TODO: Replace this whole file with the flipper flag\nexport const REPLIES_FEATURE_ENABLED = false\n"]}

package/src/components/conversation/disabled_replies_banners.tsx

@@ -1,58 +0,0 @@
-import { StyleSheet, View, type ViewStyle } from 'react-native'
-import { useTheme } from '../../hooks'
-import { Text } from '../display'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
-
-export const LeaderDisabledRepliesBanner = () => {
-  return <DisabledRepliesBanner description="Replies are frozen for everyone else." />
-}
-
-export const MemberDisabledRepliesBanner = () => {
-  const styles = useStyles()
-  return (
-    <DisabledRepliesBanner
-      description="Replies have been disabled by a leader, but you can still add reactions."
-      style={styles.memberBanner}
-    />
-  )
-}
-
-interface DisabledRepliesBannerProps {
-  description: string
-  style?: ViewStyle
-}
-
-const DisabledRepliesBanner = ({ description, style }: DisabledRepliesBannerProps) => {
-  const styles = useStyles()
-
-  return (
-    <View style={[styles.baseBanner, style]}>
-      <Text style={styles.text} variant="tertiary">
-        {description}
-      </Text>
-    </View>
-  )
-}
-
-const useStyles = () => {
-  const { colors } = useTheme()
-  const { bottom } = useSafeAreaInsets()
-
-  return StyleSheet.create({
-    baseBanner: {
-      paddingHorizontal: 16,
-      paddingVertical: 4,
-      backgroundColor: colors.statusNeutralComposedBackground,
-      borderTopWidth: 1,
-      borderTopColor: colors.borderColorDefaultBase,
-    },
-    text: {
-      textAlign: 'center',
-    },
-    memberBanner: {
-      paddingTop: 16,
-      paddingBottom: 16 + bottom,
-      marginBottom: -bottom,
-    },
-  })
-}

package/src/utils/replies_local_feature_flag.ts

@@ -1,2 +0,0 @@
-// TODO: Replace this whole file with the flipper flag
-export const REPLIES_FEATURE_ENABLED = false