npm - @planningcenter/chat-react-native - Versions diffs - 3.6.1-rc.1 → 3.7.0-rc.1 - Mend

@planningcenter/chat-react-native 3.6.1-rc.1 → 3.7.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (28) hide show

package/build/components/conversation/message.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"message.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/message.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAiB7C;;GAEG;AACH,UAAU,YAAa,SAAQ,eAAe;IAC5C,4BAA4B,EAAE,OAAO,CAAA;IACrC,eAAe,EAAE,MAAM,CAAA;IACvB,wBAAwB,CAAC,EAAE,MAAM,CAAA;CAClC;AAED,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,~~qBAkI1C~~"}
1	+ {"version":3,"file":"message.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/message.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAiB7C;;GAEG;AACH,UAAU,YAAa,SAAQ,eAAe;IAC5C,4BAA4B,EAAE,OAAO,CAAA;IACrC,eAAe,EAAE,MAAM,CAAA;IACvB,wBAAwB,CAAC,EAAE,MAAM,CAAA;CAClC;AAED,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,qBAoI1C"}

package/build/components/conversation/message.js CHANGED Viewed

@@ -84,7 +84,7 @@ export function Message(props) {
               </View>)}
           </View>
           {hasReactions && (<View style={styles.messageReactions}>
-              {reactionCounts.map(reaction => (<MessageReaction key={reaction.value} reaction={reaction} onLongPress={handleReactionLongPress}/>))}
+              {reactionCounts.map(reaction => (<MessageReaction key={reaction.value} reaction={reaction} onLongPress={handleReactionLongPress} message={props} conversationId={conversation_id}/>))}
             </View>)}
           {showMessageMeta && (<View style={styles.messageMeta}>
               {props.mine && (<MessageReadReceipts message={props} latestReadMessageSortKey={props.latestReadMessageSortKey}/>)}

package/build/components/conversation/message.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"message.js","sourceRoot":"","sources":["../../../src/components/conversation/message.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useNavigation } from '@react-navigation/native'\nimport colorFunction from 'color'\nimport React from 'react'\nimport { Platform, Pressable, StyleSheet, useWindowDimensions, View } from 'react-native'\nimport { MessageReaction } from '../../components/conversation/message_reaction'\nimport { Avatar, Text } from '../../components/display'\nimport { useTheme } from '../../hooks'\nimport { MessageResource } from '../../types'\nimport { ReactionCountResource } from '../../types/resources/reaction'\nimport { MessageAttachments } from './message_attachments'\nimport ErrorBoundary from '../page/error_boundary'\nimport { MessageMarkdown } from './message_markdown'\nimport { DenormalizedMessageAttachmentResource } from '../../types/resources/denormalized_attachment_resource'\nimport { CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL } from '../../utils/styles'\nimport Animated, {\n useSharedValue,\n useAnimatedStyle,\n withTiming,\n interpolateColor,\n Easing,\n} from 'react-native-reanimated'\nimport { useLiveRelativeTime } from '../../hooks/use_live_relative_time'\nimport { MessageReadReceipts } from './message_read_receipts'\n\n/** Message\n * Component for display of a message within a conversation list\n */\ninterface MessageProps extends MessageResource {\n canDeleteNonAuthoredMessages: boolean\n conversation_id: number\n latestReadMessageSortKey?: string\n}\n\nexport function Message(props: MessageProps) {\n const { conversation_id, canDeleteNonAuthoredMessages, text, reactionCounts } = props\n const styles = useMessageStyles(props)\n const navigation = useNavigation()\n const { colors } = useTheme()\n const hasReactions = reactionCounts.length > 0\n const [showMessageMetaToggle, setShowMessageMetaToggle] = React.useState(false)\n const showMessageMeta = showMessageMetaToggle \|\| props.myLatestInConversation \|\| false\n const timestamp = useLiveRelativeTime(props.createdAt)\n\n const bgFadeProgress = useSharedValue(0)\n const pressedColor = Platform.select({\n ios: colors.fillColorNeutral050Base,\n default: 'transparent',\n })\n const animatedBackgroundColor = useAnimatedStyle(() => {\n const backgroundColor = interpolateColor(\n bgFadeProgress.value,\n [0, 1],\n ['transparent', pressedColor]\n )\n return {\n backgroundColor,\n }\n })\n\n const handlePressIn = () => {\n bgFadeProgress.value = withTiming(1, { duration: 300, easing: Easing.inOut(Easing.ease) })\n }\n\n const handlePressOut = () => {\n bgFadeProgress.value = withTiming(0, { duration: 300, easing: Easing.inOut(Easing.ease) })\n }\n\n const handleMessageLongPress = () => {\n navigation.navigate('MessageActions', {\n message_id: props.id,\n conversation_id,\n canDeleteNonAuthoredMessages,\n })\n }\n const handleReactionLongPress = (reaction: ReactionCountResource) => {\n navigation.navigate('Reactions', {\n message_id: props.id,\n conversation_id,\n reaction_value: reaction.value,\n })\n }\n\n const handleMessageAttachmentLongPress = (attachment: DenormalizedMessageAttachmentResource) => {\n navigation.navigate('AttachmentActions', {\n attachmentId: attachment?.id,\n attachmentContentType: attachment?.attributes.contentType,\n attachmentUrl: attachment?.attributes.url,\n conversation_id,\n canDeleteNonAuthoredMessages,\n myMessage: props.mine,\n })\n }\n\n const metaProps = {\n authorName: props.author.name,\n createdAt: props.createdAt,\n }\n\n const renderAuthor = (!props.mine && props.renderAuthor) \|\| false\n const messageBottomMargin = props.lastInGroup ? 12 : hasReactions \|\| showMessageMeta ? 8 : 4\n\n return (\n <Pressable\n onLongPress={handleMessageLongPress}\n onPress={() => setShowMessageMetaToggle(!showMessageMetaToggle)}\n onPressIn={handlePressIn}\n onPressOut={handlePressOut}\n android_ripple={{ color: colors.androidRippleNeutral }}\n accessibilityHint=\"Long press to view message actions like reacting and copying.\"\n >\n <Animated.View style={[styles.message, animatedBackgroundColor]}>\n {!props.mine && (\n <View style={styles.messageAuthor}>\n {renderAuthor ? (\n <Avatar size={'md'} sourceUri={props.author.avatar} />\n ) : (\n <View style={styles.avatarPlaceholder} />\n )}\n </View>\n )}\n <View style={[styles.messageContent, { marginBottom: messageBottomMargin }]}>\n {renderAuthor && <Text variant=\"tertiary\">{props.author.name}</Text>}\n <View style={styles.messageBubble}>\n <ErrorBoundary>\n <MessageAttachments\n attachments={props.attachments}\n metaProps={metaProps}\n onMessageAttachmentLongPress={handleMessageAttachmentLongPress}\n onMessageLongPress={handleMessageLongPress}\n />\n </ErrorBoundary>\n {text && (\n <View style={styles.messageText}>\n <MessageMarkdown text={text} />\n </View>\n )}\n </View>\n {hasReactions && (\n <View style={styles.messageReactions}>\n {reactionCounts.map(reaction => (\n <MessageReaction\n key={reaction.value}\n reaction={reaction}\n onLongPress={handleReactionLongPress}\n />\n ))}\n </View>\n )}\n {showMessageMeta && (\n <View style={styles.messageMeta}>\n {props.mine && (\n <MessageReadReceipts\n message={props}\n latestReadMessageSortKey={props.latestReadMessageSortKey}\n />\n )}\n <Text variant=\"footnote\">{timestamp}</Text>\n </View>\n )}\n </View>\n </Animated.View>\n </Pressable>\n )\n}\n\nconst useMessageStyles = (props: MessageResource) => {\n const { mine } = props\n const { colors } = useTheme()\n const activeColor = colorFunction(colors.interaction).alpha(0.2).string()\n const { width } = useWindowDimensions()\n const tabletWidth = width >= 744 // Smallest iPad Mini's width\n\n return StyleSheet.create({\n message: {\n gap: 8,\n flexDirection: mine ? 'row-reverse' : 'row',\n paddingHorizontal: CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,\n },\n messageContent: {\n flex: 1,\n gap: 4,\n },\n messageAuthor: {\n flexDirection: 'row',\n gap: 8,\n },\n avatarPlaceholder: {\n width: 32, // Same width as avatar\n height: 32, // Same height as avatar\n },\n messageBubble: {\n backgroundColor: mine ? activeColor : colors.fillColorNeutral070,\n borderRadius: 8,\n maxWidth: tabletWidth ? 360 : '80%',\n alignSelf: mine ? 'flex-end' : 'flex-start',\n },\n messageText: {\n paddingVertical: 6,\n paddingHorizontal: 8,\n },\n messageReactions: {\n flexDirection: 'row',\n gap: 4,\n justifyContent: mine ? 'flex-end' : 'flex-start',\n },\n messageMeta: {\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: mine ? 'flex-end' : 'flex-start',\n gap: 4,\n },\n })\n}\n"]}
1	+ {"version":3,"file":"message.js","sourceRoot":"","sources":["../../../src/components/conversation/message.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useNavigation } from '@react-navigation/native'\nimport colorFunction from 'color'\nimport React from 'react'\nimport { Platform, Pressable, StyleSheet, useWindowDimensions, View } from 'react-native'\nimport { MessageReaction } from '../../components/conversation/message_reaction'\nimport { Avatar, Text } from '../../components/display'\nimport { useTheme } from '../../hooks'\nimport { MessageResource } from '../../types'\nimport { ReactionCountResource } from '../../types/resources/reaction'\nimport { MessageAttachments } from './message_attachments'\nimport ErrorBoundary from '../page/error_boundary'\nimport { MessageMarkdown } from './message_markdown'\nimport { DenormalizedMessageAttachmentResource } from '../../types/resources/denormalized_attachment_resource'\nimport { CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL } from '../../utils/styles'\nimport Animated, {\n useSharedValue,\n useAnimatedStyle,\n withTiming,\n interpolateColor,\n Easing,\n} from 'react-native-reanimated'\nimport { useLiveRelativeTime } from '../../hooks/use_live_relative_time'\nimport { MessageReadReceipts } from './message_read_receipts'\n\n/** Message\n * Component for display of a message within a conversation list\n */\ninterface MessageProps extends MessageResource {\n canDeleteNonAuthoredMessages: boolean\n conversation_id: number\n latestReadMessageSortKey?: string\n}\n\nexport function Message(props: MessageProps) {\n const { conversation_id, canDeleteNonAuthoredMessages, text, reactionCounts } = props\n const styles = useMessageStyles(props)\n const navigation = useNavigation()\n const { colors } = useTheme()\n const hasReactions = reactionCounts.length > 0\n const [showMessageMetaToggle, setShowMessageMetaToggle] = React.useState(false)\n const showMessageMeta = showMessageMetaToggle \|\| props.myLatestInConversation \|\| false\n const timestamp = useLiveRelativeTime(props.createdAt)\n\n const bgFadeProgress = useSharedValue(0)\n const pressedColor = Platform.select({\n ios: colors.fillColorNeutral050Base,\n default: 'transparent',\n })\n const animatedBackgroundColor = useAnimatedStyle(() => {\n const backgroundColor = interpolateColor(\n bgFadeProgress.value,\n [0, 1],\n ['transparent', pressedColor]\n )\n return {\n backgroundColor,\n }\n })\n\n const handlePressIn = () => {\n bgFadeProgress.value = withTiming(1, { duration: 300, easing: Easing.inOut(Easing.ease) })\n }\n\n const handlePressOut = () => {\n bgFadeProgress.value = withTiming(0, { duration: 300, easing: Easing.inOut(Easing.ease) })\n }\n\n const handleMessageLongPress = () => {\n navigation.navigate('MessageActions', {\n message_id: props.id,\n conversation_id,\n canDeleteNonAuthoredMessages,\n })\n }\n const handleReactionLongPress = (reaction: ReactionCountResource) => {\n navigation.navigate('Reactions', {\n message_id: props.id,\n conversation_id,\n reaction_value: reaction.value,\n })\n }\n\n const handleMessageAttachmentLongPress = (attachment: DenormalizedMessageAttachmentResource) => {\n navigation.navigate('AttachmentActions', {\n attachmentId: attachment?.id,\n attachmentContentType: attachment?.attributes.contentType,\n attachmentUrl: attachment?.attributes.url,\n conversation_id,\n canDeleteNonAuthoredMessages,\n myMessage: props.mine,\n })\n }\n\n const metaProps = {\n authorName: props.author.name,\n createdAt: props.createdAt,\n }\n\n const renderAuthor = (!props.mine && props.renderAuthor) \|\| false\n const messageBottomMargin = props.lastInGroup ? 12 : hasReactions \|\| showMessageMeta ? 8 : 4\n\n return (\n <Pressable\n onLongPress={handleMessageLongPress}\n onPress={() => setShowMessageMetaToggle(!showMessageMetaToggle)}\n onPressIn={handlePressIn}\n onPressOut={handlePressOut}\n android_ripple={{ color: colors.androidRippleNeutral }}\n accessibilityHint=\"Long press to view message actions like reacting and copying.\"\n >\n <Animated.View style={[styles.message, animatedBackgroundColor]}>\n {!props.mine && (\n <View style={styles.messageAuthor}>\n {renderAuthor ? (\n <Avatar size={'md'} sourceUri={props.author.avatar} />\n ) : (\n <View style={styles.avatarPlaceholder} />\n )}\n </View>\n )}\n <View style={[styles.messageContent, { marginBottom: messageBottomMargin }]}>\n {renderAuthor && <Text variant=\"tertiary\">{props.author.name}</Text>}\n <View style={styles.messageBubble}>\n <ErrorBoundary>\n <MessageAttachments\n attachments={props.attachments}\n metaProps={metaProps}\n onMessageAttachmentLongPress={handleMessageAttachmentLongPress}\n onMessageLongPress={handleMessageLongPress}\n />\n </ErrorBoundary>\n {text && (\n <View style={styles.messageText}>\n <MessageMarkdown text={text} />\n </View>\n )}\n </View>\n {hasReactions && (\n <View style={styles.messageReactions}>\n {reactionCounts.map(reaction => (\n <MessageReaction\n key={reaction.value}\n reaction={reaction}\n onLongPress={handleReactionLongPress}\n message={props}\n conversationId={conversation_id}\n />\n ))}\n </View>\n )}\n {showMessageMeta && (\n <View style={styles.messageMeta}>\n {props.mine && (\n <MessageReadReceipts\n message={props}\n latestReadMessageSortKey={props.latestReadMessageSortKey}\n />\n )}\n <Text variant=\"footnote\">{timestamp}</Text>\n </View>\n )}\n </View>\n </Animated.View>\n </Pressable>\n )\n}\n\nconst useMessageStyles = (props: MessageResource) => {\n const { mine } = props\n const { colors } = useTheme()\n const activeColor = colorFunction(colors.interaction).alpha(0.2).string()\n const { width } = useWindowDimensions()\n const tabletWidth = width >= 744 // Smallest iPad Mini's width\n\n return StyleSheet.create({\n message: {\n gap: 8,\n flexDirection: mine ? 'row-reverse' : 'row',\n paddingHorizontal: CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,\n },\n messageContent: {\n flex: 1,\n gap: 4,\n },\n messageAuthor: {\n flexDirection: 'row',\n gap: 8,\n },\n avatarPlaceholder: {\n width: 32, // Same width as avatar\n height: 32, // Same height as avatar\n },\n messageBubble: {\n backgroundColor: mine ? activeColor : colors.fillColorNeutral070,\n borderRadius: 8,\n maxWidth: tabletWidth ? 360 : '80%',\n alignSelf: mine ? 'flex-end' : 'flex-start',\n },\n messageText: {\n paddingVertical: 6,\n paddingHorizontal: 8,\n },\n messageReactions: {\n flexDirection: 'row',\n gap: 4,\n justifyContent: mine ? 'flex-end' : 'flex-start',\n },\n messageMeta: {\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: mine ? 'flex-end' : 'flex-start',\n gap: 4,\n },\n })\n}\n"]}

package/build/components/conversation/message_reaction.d.ts CHANGED Viewed

@@ -1,9 +1,12 @@
 import React from 'react';
 import { ReactionCountResource } from '../../types/resources/reaction';
+import { MessageResource } from '../../types';
 export declare const REACTION_EMOJIS: Record<ReactionCountResource['value'], string>;
-export declare function MessageReaction({ reaction, onLongPress, }: {
+export declare function MessageReaction({ reaction, onLongPress, message, conversationId, }: {
     reaction: ReactionCountResource;
     onLongPress: (_reaction: ReactionCountResource) => void;
+    message: MessageResource;
+    conversationId: number;
 }): React.JSX.Element | null;
 export declare const useReactionStyles: ({ mine }: {
     mine: number;

package/build/components/conversation/message_reaction.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"message_reaction.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/message_reaction.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;~~AAIzB~~,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAA;~~AAEtE~~,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,MAAM,CAM1E,CAAA;AAED,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,WAAW,~~GACZ~~,EAAE;IACD,QAAQ,EAAE,qBAAqB,CAAA;IAC/B,WAAW,EAAE,CAAC,SAAS,EAAE,qBAAqB,KAAK,IAAI,CAAA;~~CACxD~~,~~4BAgBA~~;AAED,eAAO,MAAM,iBAAiB,aAAc;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE;;;;;;;;;;;;;;;;;;;;CAoB3D,CAAA"}
1	+ {"version":3,"file":"message_reaction.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/message_reaction.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAA;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAE7C,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,MAAM,CAM1E,CAAA;AAED,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,WAAW,EACX,OAAO,EACP,cAAc,GACf,EAAE;IACD,QAAQ,EAAE,qBAAqB,CAAA;IAC/B,WAAW,EAAE,CAAC,SAAS,EAAE,qBAAqB,KAAK,IAAI,CAAA;IACvD,OAAO,EAAE,eAAe,CAAA;IACxB,cAAc,EAAE,MAAM,CAAA;CACvB,4BAyBA;AAED,eAAO,MAAM,iBAAiB,aAAc;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE;;;;;;;;;;;;;;;;;;;;CAoB3D,CAAA"}

package/build/components/conversation/message_reaction.js CHANGED Viewed

@@ -4,6 +4,7 @@ import React from 'react';
 import { StyleSheet } from 'react-native';
 import { Text } from '../../components/display';
 import { useTheme } from '../../hooks';
+import { useMessageReactionToggle } from '../../hooks/use_message_reaction_toggle';
 export const REACTION_EMOJIS = {
     thumbs_up: '👍',
     thumbs_down: '👎',
@@ -11,13 +12,20 @@ export const REACTION_EMOJIS = {
     laugh: '😂',
     heart: '❤️',
 };
-export function MessageReaction({ reaction, onLongPress, }) {
+export function MessageReaction({ reaction, onLongPress, message, conversationId, }) {
     const styles = useReactionStyles(reaction);
+    const { handleReactionToggle } = useMessageReactionToggle({
+        conversation_id: conversationId,
+        message,
+    });
     if (!reaction.count)
         return null;
     if (!REACTION_EMOJIS[reaction.value])
         return null;
-    return (<PlatformPressable key={reaction.value} style={styles.reaction} onLongPress={() => onLongPress(reaction)}>
+    const handlePress = () => {
+        handleReactionToggle({ value: reaction.value, mine: !!reaction.mine });
+    };
+    return (<PlatformPressable key={reaction.value} style={styles.reaction} onLongPress={() => onLongPress(reaction)} onPress={handlePress}>
       <Text style={styles.reactionEmoji}>{REACTION_EMOJIS[reaction.value]}</Text>
       <Text style={styles.reactionText}>{reaction.count}</Text>
     </PlatformPressable>);

package/build/components/conversation/message_reaction.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"message_reaction.js","sourceRoot":"","sources":["../../../src/components/conversation/message_reaction.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,aAAa,MAAM,OAAO,CAAA;AACjC,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAA;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;~~AAGtC~~,MAAM,CAAC,MAAM,eAAe,GAAmD;IAC7E,SAAS,EAAE,IAAI;IACf,WAAW,EAAE,IAAI;IACjB,IAAI,EAAE,IAAI;IACV,KAAK,EAAE,IAAI;IACX,KAAK,EAAE,IAAI;CACZ,CAAA;AAED,MAAM,UAAU,eAAe,CAAC,EAC9B,QAAQ,EACR,WAAW,~~GAIZ~~;IACC,MAAM,MAAM,GAAG,iBAAiB,CAAC,QAAQ,CAAC,CAAA;~~IAE1C~~,IAAI,CAAC,QAAQ,CAAC,KAAK;QAAE,OAAO,IAAI,CAAA;IAChC,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC;QAAE,OAAO,IAAI,CAAA;IAEjD,OAAO,CACL,CAAC,iBAAiB,CAChB,GAAG,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CACpB,KAAK,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CACvB,WAAW,CAAC,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,~~CAEzC~~;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAC1E;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,IAAI,CAC1D;IAAA,EAAE,iBAAiB,CAAC,CACrB,CAAA;AACH,CAAC;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAAE,IAAI,EAAoB,EAAE,EAAE;IAC9D,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAC7B,MAAM,iBAAiB,GAAG,aAAa,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAA;IAC/E,MAAM,WAAW,GAAG,aAAa,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAA;IAEzE,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,QAAQ,EAAE;YACR,WAAW,EAAE,CAAC;YACd,WAAW,EAAE,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,mBAAmB;YAClE,eAAe,EAAE,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,uBAAuB;YACpE,YAAY,EAAE,EAAE;YAChB,eAAe,EAAE,CAAC;YAClB,iBAAiB,EAAE,EAAE;YACrB,aAAa,EAAE,KAAK;YACpB,UAAU,EAAE,QAAQ;YACpB,GAAG,EAAE,CAAC;SACP;QACD,aAAa,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE;QAC9C,YAAY,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,uBAAuB,EAAE;KACtE,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import { PlatformPressable } from '@react-navigation/elements'\nimport colorFunction from 'color'\nimport React from 'react'\nimport { StyleSheet } from 'react-native'\nimport { Text } from '../../components/display'\nimport { useTheme } from '../../hooks'\nimport { ReactionCountResource } from '../../types/resources/reaction'\n\nexport const REACTION_EMOJIS: Record<ReactionCountResource['value'], string> = {\n thumbs_up: '👍',\n thumbs_down: '👎',\n pray: '🙏',\n laugh: '😂',\n heart: '❤️',\n}\n\nexport function MessageReaction({\n reaction,\n onLongPress,\n}: {\n reaction: ReactionCountResource\n onLongPress: (_reaction: ReactionCountResource) => void\n}) {\n const styles = useReactionStyles(reaction)\n\n if (!reaction.count) return null\n if (!REACTION_EMOJIS[reaction.value]) return null\n\n return (\n <PlatformPressable\n key={reaction.value}\n style={styles.reaction}\n onLongPress={() => onLongPress(reaction)}\n >\n <Text style={styles.reactionEmoji}>{REACTION_EMOJIS[reaction.value]}</Text>\n <Text style={styles.reactionText}>{reaction.count}</Text>\n </PlatformPressable>\n )\n}\n\nexport const useReactionStyles = ({ mine }: { mine: number }) => {\n const { colors } = useTheme()\n const activeBorderColor = colorFunction(colors.interaction).alpha(0.8).string()\n const activeColor = colorFunction(colors.interaction).alpha(0.2).string()\n\n return StyleSheet.create({\n reaction: {\n borderWidth: 1,\n borderColor: mine ? activeBorderColor : colors.fillColorNeutral040,\n backgroundColor: mine ? activeColor : colors.fillColorNeutral050Base,\n borderRadius: 16,\n paddingVertical: 2,\n paddingHorizontal: 12,\n flexDirection: 'row',\n alignItems: 'center',\n gap: 4,\n },\n reactionEmoji: { fontSize: 12, paddingTop: 0 },\n reactionText: { fontSize: 12, color: colors.textColorDefaultPrimary },\n })\n}\n"]}
1	+ {"version":3,"file":"message_reaction.js","sourceRoot":"","sources":["../../../src/components/conversation/message_reaction.tsx"],"names":[],"mappings":"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","sourcesContent":["import { PlatformPressable } from '@react-navigation/elements'\nimport colorFunction from 'color'\nimport React from 'react'\nimport { StyleSheet } from 'react-native'\nimport { Text } from '../../components/display'\nimport { useTheme } from '../../hooks'\nimport { useMessageReactionToggle } from '../../hooks/use_message_reaction_toggle'\nimport { ReactionCountResource } from '../../types/resources/reaction'\nimport { MessageResource } from '../../types'\n\nexport const REACTION_EMOJIS: Record<ReactionCountResource['value'], string> = {\n thumbs_up: '👍',\n thumbs_down: '👎',\n pray: '🙏',\n laugh: '😂',\n heart: '❤️',\n}\n\nexport function MessageReaction({\n reaction,\n onLongPress,\n message,\n conversationId,\n}: {\n reaction: ReactionCountResource\n onLongPress: (_reaction: ReactionCountResource) => void\n message: MessageResource\n conversationId: number\n}) {\n const styles = useReactionStyles(reaction)\n const { handleReactionToggle } = useMessageReactionToggle({\n conversation_id: conversationId,\n message,\n })\n\n if (!reaction.count) return null\n if (!REACTION_EMOJIS[reaction.value]) return null\n\n const handlePress = () => {\n handleReactionToggle({ value: reaction.value, mine: !!reaction.mine })\n }\n\n return (\n <PlatformPressable\n key={reaction.value}\n style={styles.reaction}\n onLongPress={() => onLongPress(reaction)}\n onPress={handlePress}\n >\n <Text style={styles.reactionEmoji}>{REACTION_EMOJIS[reaction.value]}</Text>\n <Text style={styles.reactionText}>{reaction.count}</Text>\n </PlatformPressable>\n )\n}\n\nexport const useReactionStyles = ({ mine }: { mine: number }) => {\n const { colors } = useTheme()\n const activeBorderColor = colorFunction(colors.interaction).alpha(0.8).string()\n const activeColor = colorFunction(colors.interaction).alpha(0.2).string()\n\n return StyleSheet.create({\n reaction: {\n borderWidth: 1,\n borderColor: mine ? activeBorderColor : colors.fillColorNeutral040,\n backgroundColor: mine ? activeColor : colors.fillColorNeutral050Base,\n borderRadius: 16,\n paddingVertical: 2,\n paddingHorizontal: 12,\n flexDirection: 'row',\n alignItems: 'center',\n gap: 4,\n },\n reactionEmoji: { fontSize: 12, paddingTop: 0 },\n reactionText: { fontSize: 12, color: colors.textColorDefaultPrimary },\n })\n}\n"]}

package/build/hooks/index.d.ts CHANGED Viewed

@@ -10,4 +10,5 @@ export * from './use_groups_groups';
 export * from './use_groups';
 export * from './use_api';
 export * from './use_api_client';
+export * from './use_message_reaction_toggle';
 //# sourceMappingURL=index.d.ts.map

package/build/hooks/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AACnC,cAAc,aAAa,CAAA;AAC3B,cAAc,oBAAoB,CAAA;AAClC,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA;AAChC,cAAc,mCAAmC,CAAA;AACjD,cAAc,wBAAwB,CAAA;AACtC,cAAc,kBAAkB,CAAA;AAChC,cAAc,qBAAqB,CAAA;AACnC,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,kBAAkB,CAAA"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AACnC,cAAc,aAAa,CAAA;AAC3B,cAAc,oBAAoB,CAAA;AAClC,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA;AAChC,cAAc,mCAAmC,CAAA;AACjD,cAAc,wBAAwB,CAAA;AACtC,cAAc,kBAAkB,CAAA;AAChC,cAAc,qBAAqB,CAAA;AACnC,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,kBAAkB,CAAA;AAChC,cAAc,+BAA+B,CAAA"}

package/build/hooks/index.js CHANGED Viewed

@@ -10,4 +10,5 @@ export * from './use_groups_groups';
 export * from './use_groups';
 export * from './use_api';
 export * from './use_api_client';
+export * from './use_message_reaction_toggle';
 //# sourceMappingURL=index.js.map

package/build/hooks/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AACnC,cAAc,aAAa,CAAA;AAC3B,cAAc,oBAAoB,CAAA;AAClC,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA;AAChC,cAAc,mCAAmC,CAAA;AACjD,cAAc,wBAAwB,CAAA;AACtC,cAAc,kBAAkB,CAAA;AAChC,cAAc,qBAAqB,CAAA;AACnC,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,kBAAkB,CAAA","sourcesContent":["export * from './use_async_storage'\nexport * from './use_theme'\nexport * from './use_suspense_api'\nexport * from './use_current_person'\nexport * from './use_font_scale'\nexport * from './use_create_android_ripple_color'\nexport * from './use_chat_permissions'\nexport * from './use_api_client'\nexport * from './use_groups_groups'\nexport * from './use_groups'\nexport * from './use_api'\nexport * from './use_api_client'\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AACnC,cAAc,aAAa,CAAA;AAC3B,cAAc,oBAAoB,CAAA;AAClC,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA;AAChC,cAAc,mCAAmC,CAAA;AACjD,cAAc,wBAAwB,CAAA;AACtC,cAAc,kBAAkB,CAAA;AAChC,cAAc,qBAAqB,CAAA;AACnC,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,kBAAkB,CAAA;AAChC,cAAc,+BAA+B,CAAA","sourcesContent":["export * from './use_async_storage'\nexport * from './use_theme'\nexport * from './use_suspense_api'\nexport * from './use_current_person'\nexport * from './use_font_scale'\nexport * from './use_create_android_ripple_color'\nexport * from './use_chat_permissions'\nexport * from './use_api_client'\nexport * from './use_groups_groups'\nexport * from './use_groups'\nexport * from './use_api'\nexport * from './use_api_client'\nexport * from './use_message_reaction_toggle'\n"]}

package/build/hooks/use_message_reaction_toggle.d.ts ADDED Viewed

@@ -0,0 +1,21 @@
+import { InfiniteData } from '@tanstack/react-query';
+import { ApiCollection, ApiResource, MessageResource } from '../types';
+import { ReactionCountResource } from '../types/resources/reaction';
+type UseMessageReactionToggleProps = {
+    conversation_id: number;
+    message: MessageResource;
+    onSuccess?: () => void;
+};
+type ToggleReactionParams = {
+    value: ReactionCountResource['value'];
+    mine?: boolean;
+};
+type QueryData = InfiniteData<ApiCollection<MessageResource>>;
+export declare function useMessageReactionToggle({ conversation_id, message, onSuccess, }: UseMessageReactionToggleProps): {
+    handleReactionToggle: import("@tanstack/react-query").UseMutateFunction<ApiResource<MessageResource>, Error, ToggleReactionParams, {
+        previousData: QueryData | undefined;
+    }>;
+    isPending: boolean;
+};
+export {};
+//# sourceMappingURL=use_message_reaction_toggle.d.ts.map

package/build/hooks/use_message_reaction_toggle.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"use_message_reaction_toggle.d.ts","sourceRoot":"","sources":["../../src/hooks/use_message_reaction_toggle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAA+B,MAAM,uBAAuB,CAAA;AAKjF,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AACtE,OAAO,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAA;AAGnE,KAAK,6BAA6B,GAAG;IACnC,eAAe,EAAE,MAAM,CAAA;IACvB,OAAO,EAAE,eAAe,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB,CAAA;AAED,KAAK,oBAAoB,GAAG;IAC1B,KAAK,EAAE,qBAAqB,CAAC,OAAO,CAAC,CAAA;IACrC,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,CAAA;AAED,KAAK,SAAS,GAAG,YAAY,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC,CAAA;AAE7D,wBAAgB,wBAAwB,CAAC,EACvC,eAAe,EACf,OAAO,EACP,SAAS,GACV,EAAE,6BAA6B;;;;;EA0E/B"}

package/build/hooks/use_message_reaction_toggle.js ADDED Viewed

@@ -0,0 +1,88 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useCallback } from 'react';
+import { Alert } from 'react-native';
+import { useApiClient } from './use_api_client';
+import { getMessagesQueryKey, getMessagesRequestArgs } from './use_conversation_messages';
+import { updateRecordInPagesData } from '../utils';
+export function useMessageReactionToggle({ conversation_id, message, onSuccess, }) {
+    const apiClient = useApiClient();
+    const queryClient = useQueryClient();
+    const queryKey = getMessagesQueryKey({ conversation_id });
+    const message_id = message.id;
+    const toggleReaction = useCallback(({ value, mine }) => {
+        const requestParams = getMessagesRequestArgs({ conversation_id });
+        // If already reacted, unreact; otherwise react
+        const endpoint = !mine ? 'react' : 'unreact';
+        const url = `/me/conversations/${conversation_id}/messages/${message_id}/${endpoint}`;
+        const fieldsWithValueJoined = Object.fromEntries(Object.entries(requestParams.data.fields).map(([k, v]) => [k, v.join(',')]));
+        return apiClient.chat.post({
+            url,
+            data: {
+                ...requestParams.data,
+                data: {
+                    type: 'Message',
+                    attributes: { value: value },
+                },
+                fields: fieldsWithValueJoined,
+            },
+        });
+    }, [apiClient, conversation_id, message_id]);
+    const { mutate: handleReactionToggle, isPending } = useMutation({
+        mutationFn: toggleReaction,
+        onMutate: variables => {
+            const previousData = queryClient.getQueryData(queryKey);
+            if (previousData) {
+                queryClient.setQueryData(queryKey, data => optimisticUpdate({
+                    message,
+                    data,
+                    value: variables.value,
+                    state: !variables.mine,
+                }));
+            }
+            return { previousData };
+        },
+        onSuccess: result => {
+            const updatedMessage = result.data;
+            queryClient.setQueryData(queryKey, data => updateRecordInPagesData({
+                data,
+                record: updatedMessage,
+            }));
+            if (onSuccess) {
+                onSuccess();
+            }
+        },
+        onError: (_data, _variables, context) => {
+            if (context?.previousData) {
+                queryClient.setQueryData(queryKey, context.previousData);
+            }
+            Alert.alert('Oops', 'We were unable to react to this message. Please try again.');
+        },
+    });
+    return {
+        handleReactionToggle,
+        isPending,
+    };
+}
+const optimisticUpdate = ({ message, data, value, state, }) => {
+    if (!data)
+        return data;
+    const updatedReactionCounts = message.reactionCounts.map(reaction => {
+        if (reaction.value === value) {
+            return {
+                ...reaction,
+                mine: state ? 1 : 0,
+                count: state ? reaction.count + 1 : reaction.count - 1,
+            };
+        }
+        return reaction;
+    });
+    const updatedMessage = {
+        ...message,
+        reactionCounts: updatedReactionCounts,
+    };
+    return updateRecordInPagesData({
+        data,
+        record: updatedMessage,
+    });
+};
+//# sourceMappingURL=use_message_reaction_toggle.js.map

package/build/hooks/use_message_reaction_toggle.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"use_message_reaction_toggle.js","sourceRoot":"","sources":["../../src/hooks/use_message_reaction_toggle.ts"],"names":[],"mappings":"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","sourcesContent":["import { InfiniteData, useMutation, useQueryClient } from '@tanstack/react-query'\nimport { useCallback } from 'react'\nimport { Alert } from 'react-native'\nimport { useApiClient } from './use_api_client'\nimport { getMessagesQueryKey, getMessagesRequestArgs } from './use_conversation_messages'\nimport { ApiCollection, ApiResource, MessageResource } from '../types'\nimport { ReactionCountResource } from '../types/resources/reaction'\nimport { updateRecordInPagesData } from '../utils'\n\ntype UseMessageReactionToggleProps = {\n conversation_id: number\n message: MessageResource\n onSuccess?: () => void\n}\n\ntype ToggleReactionParams = {\n value: ReactionCountResource['value']\n mine?: boolean\n}\n\ntype QueryData = InfiniteData<ApiCollection<MessageResource>>\n\nexport function useMessageReactionToggle({\n conversation_id,\n message,\n onSuccess,\n}: UseMessageReactionToggleProps) {\n const apiClient = useApiClient()\n const queryClient = useQueryClient()\n const queryKey = getMessagesQueryKey({ conversation_id })\n const message_id = message.id\n\n const toggleReaction = useCallback(\n ({ value, mine }: ToggleReactionParams) => {\n const requestParams = getMessagesRequestArgs({ conversation_id })\n\n // If already reacted, unreact; otherwise react\n const endpoint = !mine ? 'react' : 'unreact'\n const url = `/me/conversations/${conversation_id}/messages/${message_id}/${endpoint}`\n const fieldsWithValueJoined = Object.fromEntries(\n Object.entries(requestParams.data.fields).map(([k, v]) => [k, v.join(',')])\n )\n\n return apiClient.chat.post<ApiResource<MessageResource>>({\n url,\n data: {\n ...requestParams.data,\n data: {\n type: 'Message',\n attributes: { value: value },\n },\n fields: fieldsWithValueJoined,\n },\n })\n },\n [apiClient, conversation_id, message_id]\n )\n\n const { mutate: handleReactionToggle, isPending } = useMutation({\n mutationFn: toggleReaction,\n onMutate: variables => {\n const previousData = queryClient.getQueryData<QueryData>(queryKey)\n if (previousData) {\n queryClient.setQueryData<QueryData>(queryKey, data =>\n optimisticUpdate({\n message,\n data,\n value: variables.value,\n state: !variables.mine,\n })\n )\n }\n return { previousData }\n },\n onSuccess: result => {\n const updatedMessage = result.data\n\n queryClient.setQueryData<QueryData>(queryKey, data =>\n updateRecordInPagesData({\n data,\n record: updatedMessage,\n })\n )\n\n if (onSuccess) {\n onSuccess()\n }\n },\n onError: (_data, _variables, context) => {\n if (context?.previousData) {\n queryClient.setQueryData<QueryData>(queryKey, context.previousData)\n }\n Alert.alert('Oops', 'We were unable to react to this message. Please try again.')\n },\n })\n\n return {\n handleReactionToggle,\n isPending,\n }\n}\n\nconst optimisticUpdate = ({\n message,\n data,\n value,\n state,\n}: {\n message: MessageResource\n data: QueryData | undefined\n value: ReactionCountResource['value']\n state: boolean\n}) => {\n if (!data) return data\n\n const updatedReactionCounts: ReactionCountResource[] = message.reactionCounts.map(reaction => {\n if (reaction.value === value) {\n return {\n ...reaction,\n mine: state ? 1 : 0,\n count: state ? reaction.count + 1 : reaction.count - 1,\n } as ReactionCountResource\n }\n return reaction\n })\n\n const updatedMessage: MessageResource = {\n ...message,\n reactionCounts: updatedReactionCounts,\n }\n\n return updateRecordInPagesData({\n data,\n record: updatedMessage,\n })\n}\n"]}

package/build/screens/conversations/components/list_header_component.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"list_header_component.d.ts","sourceRoot":"","sources":["../../../../src/screens/conversations/components/list_header_component.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+B,MAAM,OAAO,CAAA;AAgBnD,eAAO,MAAM,mBAAmB,~~yBAyG~~/B,CAAA"}
1	+ {"version":3,"file":"list_header_component.d.ts","sourceRoot":"","sources":["../../../../src/screens/conversations/components/list_header_component.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+B,MAAM,OAAO,CAAA;AAgBnD,eAAO,MAAM,mBAAmB,yBA8G/B,CAAA"}

package/build/screens/conversations/components/list_header_component.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { useNavigation, useRoute } from '@react-navigation/native';
 import React, { useCallback, useMemo } from 'react';
-import { Alert, StyleSheet, View } from 'react-native';
+import { Alert, ScrollView, StyleSheet, View } from 'react-native';
 import { Heading, TextButton, ToggleButton } from '../../../components';
 import { useCurrentPerson, useCurrentPersonCache, useTheme } from '../../../hooks';
 import { useMarkAllRead } from '../../../hooks/use_conversations_actions';
@@ -57,7 +57,7 @@ export const ListHeaderComponent = () => {
           Mark all read
         </TextButton>
       </View>
-      <View accessibilityRole="toolbar" style={styles.filterRow}>
+      <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.filterRow} accessibilityRole="toolbar">
         {showAppFilters && (<>
             <ToggleButton title={FilterTypes.All} active={active === FilterTypes.All} onPress={() => navigation.setParams({
                 chat_group_graph_id: undefined,
@@ -77,7 +77,7 @@ export const ListHeaderComponent = () => {
             chat_group_graph_id,
             group_source_app_name,
         })} active={active === FilterTypes.More} iconNameRight="general.threeReducingHorizontalBars" accessibilityLabel={showAppFilters ? 'View all filters' : 'View more filters'}/>
-      </View>
+      </ScrollView>
       <ChatGroupBadge />
     </View>);
 };

package/build/screens/conversations/components/list_header_component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"list_header_component.js","sourceRoot":"","sources":["../../../../src/screens/conversations/components/list_header_component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,aAAa,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAC7E,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACnD,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;~~AACtD~~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~~IAAI~~,~~CAAC~~,~~iBAAiB~~,~~CAAC~~,~~SAAS~~,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,~~CACxD~~;QAAA,CAAC,cAAc,IAAI,CACjB,EACE;YAAA,CAAC,YAAY,CACX,KAAK,CAAC,CAAC,WAAW,CAAC,GAAG,CAAC,CACvB,MAAM,CAAC,CAAC,MAAM,KAAK,WAAW,CAAC,GAAG,CAAC,CACnC,OAAO,CAAC,CAAC,GAAG,EAAE,CACZ,UAAU,CAAC,SAAS,CAAC;gBACnB,mBAAmB,EAAE,SAAS;gBAC9B,qBAAqB,EAAE,SAAS;aACjC,CACH,CAAC,CACD,kBAAkB,CAAC,wBAAwB,EAE7C;YAAA,CAAC,YAAY,CACX,KAAK,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,CAC1B,MAAM,CAAC,CAAC,MAAM,KAAK,WAAW,CAAC,MAAM,CAAC,CACtC,OAAO,CAAC,CAAC,GAAG,EAAE,CACZ,UAAU,CAAC,SAAS,CAAC;gBACnB,mBAAmB,EAAE,SAAS;gBAC9B,qBAAqB,EAAE,QAAQ;aAChC,CACH,CAAC,CACD,kBAAkB,CAAC,+BAA+B,EAGpD;;YAAA,CAAC,YAAY,CACX,KAAK,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CACzB,MAAM,CAAC,CAAC,MAAM,KAAK,WAAW,CAAC,KAAK,CAAC,CACrC,OAAO,CAAC,CAAC,GAAG,EAAE,CACZ,UAAU,CAAC,SAAS,CAAC;gBACnB,mBAAmB,EAAE,SAAS;gBAC9B,qBAAqB,EAAE,UAAU;aAClC,CACH,CAAC,CACD,kBAAkB,CAAC,8BAA8B,EAErD;UAAA,GAAG,CACJ,CACD;QAAA,CAAC,YAAY,CACX,KAAK,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CACpD,OAAO,CAAC,CAAC,GAAG,EAAE,CACZ,UAAU,CAAC,QAAQ,CAAC,qBAAqB,EAAE;YACzC,mBAAmB;YACnB,qBAAqB;SACtB,CACH,CAAC,CACD,MAAM,CAAC,CAAC,MAAM,KAAK,WAAW,CAAC,IAAI,CAAC,CACpC,aAAa,CAAC,qCAAqC,CACnD,kBAAkB,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,mBAAmB,CAAC,EAElF;MAAA,EAAE,~~IAAI~~,~~CACN~~;MAAA,CAAC,cAAc,CAAC,AAAD,EACjB;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,UAAU,EAAE;YACV,iBAAiB,EAAE,CAAC;YACpB,iBAAiB,EAAE,KAAK,CAAC,MAAM,CAAC,uBAAuB;YACvD,iBAAiB,EAAE,EAAE;YACrB,aAAa,EAAE,EAAE;YACjB,GAAG,EAAE,EAAE;SACR;QACD,QAAQ,EAAE;YACR,aAAa,EAAE,KAAK;YACpB,cAAc,EAAE,eAAe;YAC/B,UAAU,EAAE,CAAC;SACd;QACD,SAAS,EAAE;YACT,aAAa,EAAE,KAAK;YACpB,cAAc,EAAE,YAAY;YAC5B,GAAG,EAAE,CAAC;SACP;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'\nimport React, { useCallback, useMemo } from 'react'\nimport { Alert, StyleSheet, View } from 'react-native'\nimport { Heading, TextButton, ToggleButton } from '../../../components'\nimport { useCurrentPerson, useCurrentPersonCache, useTheme } from '../../../hooks'\nimport { useMarkAllRead } from '../../../hooks/use_conversations_actions'\nimport { useCanDisplayGroups } from '../../../hooks/use_groups'\nimport { ConversationScreenProps } from '../conversations_screen'\nimport { ChatGroupBadge } from './chat_group_badge'\n\nenum FilterTypes {\n All = 'All',\n Groups = 'Groups',\n Teams = 'Teams',\n More = 'More',\n}\n\nexport const ListHeaderComponent = () => {\n const styles = useStyles()\n const navigation = useNavigation()\n const canFilterByTeams = useCanDisplayGroups({ source_app_name: 'Services', source_type: 'Team' })\n const canFilterByGroups = useCanDisplayGroups({ source_app_name: 'Groups', source_type: 'Group' })\n const route = useRoute<RouteProp<ConversationScreenProps['route']>>()\n const { chat_group_graph_id, group_source_app_name = '' } = route.params \|\| {}\n\n const { unreadCount } = useCurrentPerson()\n const currentPersonCache = useCurrentPersonCache()\n const { markAllRead, isPending } = useMarkAllRead()\n\n const active: FilterTypes = useMemo(() => {\n if (chat_group_graph_id) {\n return FilterTypes.More\n } else if (/groups/i.test(group_source_app_name)) {\n return FilterTypes.Groups\n } else if (/services/i.test(group_source_app_name)) {\n return FilterTypes.Teams\n }\n\n return FilterTypes.All\n }, [chat_group_graph_id, group_source_app_name])\n\n const handleMarkAllRead = useCallback(() => {\n currentPersonCache.update({ unreadCount: 0 })\n markAllRead()\n }, [currentPersonCache, markAllRead])\n\n const alertMarkAllRead = useCallback(() => {\n if (active === FilterTypes.All) return handleMarkAllRead()\n\n Alert.alert('Mark all read', 'This includes conversations not shown by the current filter.', [\n { text: 'Cancel' },\n { text: 'OK', onPress: () => handleMarkAllRead() },\n ])\n }, [active, handleMarkAllRead])\n\n const showAppFilters = canFilterByGroups && canFilterByTeams\n\n return (\n <View style={styles.listHeader}>\n <View style={styles.titleRow}>\n <Heading numberOfLines={1} variant=\"h2\">\n Conversations\n </Heading>\n <TextButton onPress={alertMarkAllRead} disabled={isPending \|\| !unreadCount}>\n Mark all read\n </TextButton>\n </View>\n <~~View accessibilityRole=\"toolbar~~\~~" style~~={styles.filterRow}>\n {showAppFilters && (\n <>\n <ToggleButton\n title={FilterTypes.All}\n active={active === FilterTypes.All}\n onPress={() =>\n navigation.setParams({\n chat_group_graph_id: undefined,\n group_source_app_name: undefined,\n })\n }\n accessibilityLabel=\"Show all conversations\"\n />\n <ToggleButton\n title={FilterTypes.Groups}\n active={active === FilterTypes.Groups}\n onPress={() =>\n navigation.setParams({\n chat_group_graph_id: undefined,\n group_source_app_name: 'Groups',\n })\n }\n accessibilityLabel=\"Filter to group conversations\"\n />\n\n <ToggleButton\n title={FilterTypes.Teams}\n active={active === FilterTypes.Teams}\n onPress={() =>\n navigation.setParams({\n chat_group_graph_id: undefined,\n group_source_app_name: 'Services',\n })\n }\n accessibilityLabel=\"Filter to team conversations\"\n />\n </>\n )}\n <ToggleButton\n title={showAppFilters ? FilterTypes.More : 'Filter'}\n onPress={() =>\n navigation.navigate('ConversationFilters', {\n chat_group_graph_id,\n group_source_app_name,\n })\n }\n active={active === FilterTypes.More}\n iconNameRight=\"general.threeReducingHorizontalBars\"\n accessibilityLabel={showAppFilters ? 'View all filters' : 'View more filters'}\n />\n </~~View~~>\n <ChatGroupBadge />\n </View>\n )\n}\n\nconst useStyles = () => {\n const theme = useTheme()\n return StyleSheet.create({\n listHeader: {\n borderBottomWidth: 1,\n borderBottomColor: theme.colors.fillColorNeutral050Base,\n paddingHorizontal: 16,\n paddingBottom: 16,\n gap: 12,\n },\n titleRow: {\n flexDirection: 'row',\n justifyContent: 'space-between',\n paddingTop: 8,\n },\n filterRow: {\n flexDirection: 'row',\n justifyContent: 'flex-start',\n gap: 8,\n },\n })\n}\n"]}
1	+ {"version":3,"file":"list_header_component.js","sourceRoot":"","sources":["../../../../src/screens/conversations/components/list_header_component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'\nimport React, { useCallback, useMemo } from 'react'\nimport { Alert, ScrollView, StyleSheet, View } from 'react-native'\nimport { Heading, TextButton, ToggleButton } from '../../../components'\nimport { useCurrentPerson, useCurrentPersonCache, useTheme } from '../../../hooks'\nimport { useMarkAllRead } from '../../../hooks/use_conversations_actions'\nimport { useCanDisplayGroups } from '../../../hooks/use_groups'\nimport { ConversationScreenProps } from '../conversations_screen'\nimport { ChatGroupBadge } from './chat_group_badge'\n\nenum FilterTypes {\n All = 'All',\n Groups = 'Groups',\n Teams = 'Teams',\n More = 'More',\n}\n\nexport const ListHeaderComponent = () => {\n const styles = useStyles()\n const navigation = useNavigation()\n const canFilterByTeams = useCanDisplayGroups({ source_app_name: 'Services', source_type: 'Team' })\n const canFilterByGroups = useCanDisplayGroups({ source_app_name: 'Groups', source_type: 'Group' })\n const route = useRoute<RouteProp<ConversationScreenProps['route']>>()\n const { chat_group_graph_id, group_source_app_name = '' } = route.params \|\| {}\n\n const { unreadCount } = useCurrentPerson()\n const currentPersonCache = useCurrentPersonCache()\n const { markAllRead, isPending } = useMarkAllRead()\n\n const active: FilterTypes = useMemo(() => {\n if (chat_group_graph_id) {\n return FilterTypes.More\n } else if (/groups/i.test(group_source_app_name)) {\n return FilterTypes.Groups\n } else if (/services/i.test(group_source_app_name)) {\n return FilterTypes.Teams\n }\n\n return FilterTypes.All\n }, [chat_group_graph_id, group_source_app_name])\n\n const handleMarkAllRead = useCallback(() => {\n currentPersonCache.update({ unreadCount: 0 })\n markAllRead()\n }, [currentPersonCache, markAllRead])\n\n const alertMarkAllRead = useCallback(() => {\n if (active === FilterTypes.All) return handleMarkAllRead()\n\n Alert.alert('Mark all read', 'This includes conversations not shown by the current filter.', [\n { text: 'Cancel' },\n { text: 'OK', onPress: () => handleMarkAllRead() },\n ])\n }, [active, handleMarkAllRead])\n\n const showAppFilters = canFilterByGroups && canFilterByTeams\n\n return (\n <View style={styles.listHeader}>\n <View style={styles.titleRow}>\n <Heading numberOfLines={1} variant=\"h2\">\n Conversations\n </Heading>\n <TextButton onPress={alertMarkAllRead} disabled={isPending \|\| !unreadCount}>\n Mark all read\n </TextButton>\n </View>\n <ScrollView\n horizontal\n showsHorizontalScrollIndicator={false}\n contentContainerStyle={styles.filterRow}\n accessibilityRole=\"toolbar\"\n >\n {showAppFilters && (\n <>\n <ToggleButton\n title={FilterTypes.All}\n active={active === FilterTypes.All}\n onPress={() =>\n navigation.setParams({\n chat_group_graph_id: undefined,\n group_source_app_name: undefined,\n })\n }\n accessibilityLabel=\"Show all conversations\"\n />\n <ToggleButton\n title={FilterTypes.Groups}\n active={active === FilterTypes.Groups}\n onPress={() =>\n navigation.setParams({\n chat_group_graph_id: undefined,\n group_source_app_name: 'Groups',\n })\n }\n accessibilityLabel=\"Filter to group conversations\"\n />\n\n <ToggleButton\n title={FilterTypes.Teams}\n active={active === FilterTypes.Teams}\n onPress={() =>\n navigation.setParams({\n chat_group_graph_id: undefined,\n group_source_app_name: 'Services',\n })\n }\n accessibilityLabel=\"Filter to team conversations\"\n />\n </>\n )}\n <ToggleButton\n title={showAppFilters ? FilterTypes.More : 'Filter'}\n onPress={() =>\n navigation.navigate('ConversationFilters', {\n chat_group_graph_id,\n group_source_app_name,\n })\n }\n active={active === FilterTypes.More}\n iconNameRight=\"general.threeReducingHorizontalBars\"\n accessibilityLabel={showAppFilters ? 'View all filters' : 'View more filters'}\n />\n </ScrollView>\n <ChatGroupBadge />\n </View>\n )\n}\n\nconst useStyles = () => {\n const theme = useTheme()\n return StyleSheet.create({\n listHeader: {\n borderBottomWidth: 1,\n borderBottomColor: theme.colors.fillColorNeutral050Base,\n paddingHorizontal: 16,\n paddingBottom: 16,\n gap: 12,\n },\n titleRow: {\n flexDirection: 'row',\n justifyContent: 'space-between',\n paddingTop: 8,\n },\n filterRow: {\n flexDirection: 'row',\n justifyContent: 'flex-start',\n gap: 8,\n },\n })\n}\n"]}

package/build/screens/message_actions_screen.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"message_actions_screen.d.ts","sourceRoot":"","sources":["../../src/screens/message_actions_screen.tsx"],"names":[],"mappings":"AACA,OAAO,EAAgB,iBAAiB,EAAiB,MAAM,0BAA0B,CAAA;AACzF,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAA;AAE7E,OAAO,KAAsB,MAAM,OAAO,CAAA;~~AAc1C~~,eAAO,MAAM,2BAA2B,EAAE,4BAKzC,CAAA;AAED,MAAM,MAAM,yBAAyB,GAAG,iBAAiB,CAAC;IACxD,UAAU,EAAE,MAAM,CAAA;IAClB,eAAe,EAAE,MAAM,CAAA;IACvB,4BAA4B,CAAC,EAAE,OAAO,CAAA;CACvC,CAAC,CAAA;AAEF,wBAAgB,oBAAoB,CAAC,EAAE,KAAK,EAAE,EAAE,yBAAyB,~~qBAkJxE~~"}
1	+ {"version":3,"file":"message_actions_screen.d.ts","sourceRoot":"","sources":["../../src/screens/message_actions_screen.tsx"],"names":[],"mappings":"AACA,OAAO,EAAgB,iBAAiB,EAAiB,MAAM,0BAA0B,CAAA;AACzF,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAA;AAE7E,OAAO,KAAsB,MAAM,OAAO,CAAA;AAa1C,eAAO,MAAM,2BAA2B,EAAE,4BAKzC,CAAA;AAED,MAAM,MAAM,yBAAyB,GAAG,iBAAiB,CAAC;IACxD,UAAU,EAAE,MAAM,CAAA;IAClB,eAAe,EAAE,MAAM,CAAA;IACvB,4BAA4B,CAAC,EAAE,OAAO,CAAA;CACvC,CAAC,CAAA;AAEF,wBAAgB,oBAAoB,CAAC,EAAE,KAAK,EAAE,EAAE,yBAAyB,qBAsHxE"}

package/build/screens/message_actions_screen.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { PlatformPressable } from '@react-navigation/elements';
 import { StackActions, useNavigation } from '@react-navigation/native';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
 import React, { useCallback } from 'react';
 import { Alert, Platform, StyleSheet, useWindowDimensions, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -8,8 +8,8 @@ import { Text, TextButton } from '../components';
 import { REACTION_EMOJIS, useReactionStyles } from '../components/conversation/message_reaction';
 import { useTheme } from '../hooks';
 import { useApiClient } from '../hooks/use_api_client';
-import { getMessagesRequestArgs, useConversationMessages } from '../hooks/use_conversation_messages';
-import { updateRecordInPagesData } from '../utils';
+import { useConversationMessages } from '../hooks/use_conversation_messages';
+import { useMessageReactionToggle } from '../hooks/use_message_reaction_toggle';
 import { Clipboard } from '../utils/native_adapters';
 import { isNil, omitBy } from 'lodash';
 export const MessageActionsScreenOptions = {
@@ -22,10 +22,11 @@ export function MessageActionsScreen({ route }) {
     const navigation = useNavigation();
     const { conversation_id, message_id, canDeleteNonAuthoredMessages } = route.params;
     const apiClient = useApiClient();
-    const queryClient = useQueryClient();
     const styles = useStyles();
-    const { messages, queryKey, refetch } = useConversationMessages({ conversation_id }, { refetchOnMount: false });
+    const { messages, refetch } = useConversationMessages({ conversation_id }, { refetchOnMount: false });
     const message = messages.find(m => m.id === message_id);
+    if (!message)
+        fail('Message not found');
     const myReactions = message?.reactionCounts
         .filter(reaction => reaction.mine)
         .map(reaction => reaction.value);
@@ -40,42 +41,15 @@ export function MessageActionsScreen({ route }) {
         Clipboard.setStringAsync(text || '');
         navigation.goBack();
     };
-    const handleReactionPress = useCallback(({ value, mine }) => {
-        const requestParams = getMessagesRequestArgs({ conversation_id });
-        // Value has already been updated
-        const endpoint = !mine ? 'react' : 'unreact';
-        const url = `/me/conversations/${conversation_id}/messages/${message_id}/${endpoint}`;
-        const fieldsWithValueJoined = Object.fromEntries(Object.entries(requestParams.data.fields).map(([k, v]) => [k, v.join(',')]));
-        return apiClient.chat.post({
-            url,
-            data: {
-                ...requestParams.data,
-                data: {
-                    type: 'Message',
-                    attributes: { value: value },
-                },
-                fields: fieldsWithValueJoined,
-            },
-        });
-    }, [apiClient, conversation_id, message_id]);
+    const { handleReactionToggle, isPending } = useMessageReactionToggle({
+        conversation_id,
+        message,
+        onSuccess: () => navigation.goBack(),
+    });
     const deleteMessage = useCallback(() => {
         const url = `/me/conversations/${conversation_id}/messages/${message_id}/`;
         return apiClient.chat.delete({ url });
     }, [apiClient, conversation_id, message_id]);
-    const { mutate: handleReaction, isPending } = useMutation({
-        mutationFn: handleReactionPress,
-        onSuccess: result => {
-            const updatedMessage = result.data;
-            queryClient.setQueryData(queryKey, data => updateRecordInPagesData({
-                data,
-                record: updatedMessage,
-            }));
-            navigation.goBack();
-        },
-        onError: () => {
-            Alert.alert('Oops', 'We were unable to react to this message. Please try again.');
-        },
-    });
     const { mutate: handleDeleteMessage } = useMutation({
         mutationFn: deleteMessage,
         onSuccess: () => {
@@ -105,7 +79,10 @@ export function MessageActionsScreen({ route }) {
     }, [navigation, conversation_id, message_id]);
     return (<View style={styles.container}>
       <View style={styles.reactionList}>
-        {availableReactions.map((reaction, index) => (<Reaction key={index} reaction={reaction} onPress={() => handleReaction(reaction)}/>))}
+        {availableReactions.map((reaction, index) => (<Reaction key={index} reaction={reaction} onPress={() => handleReactionToggle({
+                value: reaction.value,
+                mine: reaction.mine,
+            })}/>))}
       </View>
       <View style={styles.actions}>
         <View style={styles.actionButton}>

package/build/screens/message_actions_screen.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"message_actions_screen.js","sourceRoot":"","sources":["../../src/screens/message_actions_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { PlatformPressable } from '@react-navigation/elements'\nimport { StackActions, StaticScreenProps, useNavigation } from '@react-navigation/native'\nimport { NativeStackNavigationOptions } from '@react-navigation/native-stack'\nimport { InfiniteData, useMutation, useQueryClient } from '@tanstack/react-query'\nimport React, { useCallback } from 'react'\nimport { Alert, Platform, StyleSheet, useWindowDimensions, View } from 'react-native'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { Text, TextButton } from '../components'\nimport { REACTION_EMOJIS, useReactionStyles } from '../components/conversation/message_reaction'\nimport { useTheme } from '../hooks'\nimport { useApiClient } from '../hooks/use_api_client'\nimport { getMessagesRequestArgs, useConversationMessages } from '../hooks/use_conversation_messages'\nimport { ApiCollection, ApiResource, MessageResource } from '../types'\nimport { ReactionCountResource } from '../types/resources/reaction'\nimport { updateRecordInPagesData } from '../utils'\nimport { Clipboard } from '../utils/native_adapters'\nimport { isNil, omitBy } from 'lodash'\n\nexport const MessageActionsScreenOptions: NativeStackNavigationOptions = {\n presentation: 'formSheet',\n headerShown: false,\n sheetAllowedDetents: [0.35],\n sheetGrabberVisible: true,\n}\n\nexport type MessageActionsScreenProps = StaticScreenProps<{\n message_id: string\n conversation_id: number\n canDeleteNonAuthoredMessages?: boolean\n}>\n\nexport function MessageActionsScreen({ route }: MessageActionsScreenProps) {\n const navigation = useNavigation()\n const { conversation_id, message_id, canDeleteNonAuthoredMessages } = route.params\n\n const apiClient = useApiClient()\n const queryClient = useQueryClient()\n const styles = useStyles()\n\n const { messages, queryKey, refetch } = useConversationMessages(\n { conversation_id },\n { refetchOnMount: false }\n )\n const message = messages.find(m => m.id === message_id)\n const myReactions = message?.reactionCounts\n .filter(reaction => reaction.mine)\n .map(reaction => reaction.value)\n\n const availableReactions = Object.entries(REACTION_EMOJIS).map(([value, emoji]) => {\n return {\n value: value as ReactionCountResource['value'],\n emoji,\n mine: myReactions?.includes(value as ReactionCountResource['value']),\n }\n })\n\n const handleCopyPress = (text?: string \| null) => {\n Clipboard.setStringAsync(text \|\| '')\n navigation.goBack()\n }\n\n const handleReactionPress = useCallback(\n ({ value, mine }: { value: keyof typeof REACTION_EMOJIS; mine?: boolean }) => {\n const requestParams = getMessagesRequestArgs({ conversation_id })\n\n // Value has already been updated\n const endpoint = !mine ? 'react' : 'unreact'\n const url = `/me/conversations/${conversation_id}/messages/${message_id}/${endpoint}`\n const fieldsWithValueJoined = Object.fromEntries(\n Object.entries(requestParams.data.fields).map(([k, v]) => [k, v.join(',')])\n )\n\n return apiClient.chat.post<ApiResource<MessageResource>>({\n url,\n data: {\n ...requestParams.data,\n data: {\n type: 'Message',\n attributes: { value: value },\n },\n fields: fieldsWithValueJoined,\n },\n })\n },\n [apiClient, conversation_id, message_id]\n )\n\n const deleteMessage = useCallback(() => {\n const url = `/me/conversations/${conversation_id}/messages/${message_id}/`\n\n return apiClient.chat.delete({ url })\n }, [apiClient, conversation_id, message_id])\n\n const { mutate: handleReaction, isPending } = useMutation({\n mutationFn: handleReactionPress,\n onSuccess: result => {\n const updatedMessage = result.data\n type QueryData = InfiniteData<ApiCollection<MessageResource>>\n\n queryClient.setQueryData<QueryData>(queryKey, data =>\n updateRecordInPagesData({\n data,\n record: updatedMessage,\n })\n )\n navigation.goBack()\n },\n onError: () => {\n Alert.alert('Oops', 'We were unable to react to this message. Please try again.')\n },\n })\n\n const { mutate: handleDeleteMessage } = useMutation({\n mutationFn: deleteMessage,\n onSuccess: () => {\n refetch()\n navigation.goBack()\n },\n onError: () => {\n Alert.alert('Oops', 'We were unable to delete this message. Please try again.')\n },\n })\n\n const handleEditPress = useCallback(() => {\n const state = navigation.getState?.()\n const targetRoute = state?.routes?.find(r => r.name === 'Conversation')\n const params = omitBy(\n {\n ...(targetRoute?.params \|\| {}),\n conversation_id,\n editing_message_id: message_id,\n },\n isNil\n )\n navigation.dispatch(StackActions.popTo('Conversation', params))\n }, [navigation, conversation_id, message_id])\n\n const handleViewReadReceiptsPress = useCallback(() => {\n const params = omitBy(\n {\n conversation_id,\n message_id,\n },\n isNil\n )\n navigation.dispatch(StackActions.popTo('MessageReadReceipts', params))\n }, [navigation, conversation_id, message_id])\n\n return (\n <View style={styles.container}>\n <View style={styles.reactionList}>\n {availableReactions.map((reaction, index) => (\n <Reaction key={index} reaction={reaction} onPress={() => handleReaction(reaction)} />\n ))}\n </View>\n <View style={styles.actions}>\n <View style={styles.actionButton}>\n <TextButton onPress={() => handleCopyPress(message?.text)}>Copy</TextButton>\n {message?.mine && <TextButton onPress={() => handleEditPress()}>Edit</TextButton>}\n {message?.mine && (\n <TextButton onPress={() => handleViewReadReceiptsPress()}>\n View read receipts\n </TextButton>\n )}\n {(message?.mine \|\| canDeleteNonAuthoredMessages) && (\n <TextButton\n appearance=\"danger\"\n onPress={() => handleDeleteMessage()}\n disabled={isPending}\n >\n Delete\n </TextButton>\n )}\n </View>\n </View>\n </View>\n )\n}\n\nconst Reaction = ({\n reaction,\n onPress,\n}: {\n reaction: { value: ReactionCountResource['value']; emoji: string; mine: boolean \| undefined }\n onPress: () => void\n}) => {\n const styles = useStyles()\n const reactionStyles = useReactionStyles({ mine: reaction.mine ? 1 : 0 })\n\n return (\n <PlatformPressable\n key={reaction.value}\n style={[reactionStyles.reaction, styles.reaction]}\n onPress={onPress}\n >\n <Text style={reactionStyles.reactionEmoji}>{REACTION_EMOJIS[reaction.value]}</Text>\n </PlatformPressable>\n )\n}\n\nconst useStyles = () => {\n const theme = useTheme()\n const { height } = useWindowDimensions()\n const { bottom } = useSafeAreaInsets()\n const btnBorderWidth = 1\n const baseSize = 44\n const reactionBtnSize = Platform.select({\n ios: baseSize,\n android: baseSize + btnBorderWidth * 2,\n })\n\n return StyleSheet.create({\n container: {\n justifyContent: 'flex-start',\n paddingTop: 12,\n paddingBottom: bottom,\n width: '100%',\n backgroundColor: theme.colors.fillColorNeutral100Inverted,\n height,\n },\n reaction: {\n height: reactionBtnSize,\n width: reactionBtnSize,\n borderWidth: btnBorderWidth,\n borderRadius: 32,\n justifyContent: 'center',\n },\n reactionList: {\n justifyContent: 'center',\n gap: 24,\n paddingVertical: 12,\n flexDirection: 'row',\n borderBottomColor: theme.colors.fillColorNeutral040,\n borderBottomWidth: 1,\n },\n actions: { flex: 1 },\n actionButton: { padding: 12, paddingBottom: 100, gap: 12 },\n })\n}\n"]}
1	+ {"version":3,"file":"message_actions_screen.js","sourceRoot":"","sources":["../../src/screens/message_actions_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EAAE,YAAY,EAAqB,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAEzF,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACnD,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAC1C,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,mBAAmB,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACrF,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAClE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAChD,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,6CAA6C,CAAA;AAChG,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AACnC,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AACtD,OAAO,EAAE,uBAAuB,EAAE,MAAM,oCAAoC,CAAA;AAC5E,OAAO,EAAE,wBAAwB,EAAE,MAAM,sCAAsC,CAAA;AAE/E,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AAEtC,MAAM,CAAC,MAAM,2BAA2B,GAAiC;IACvE,YAAY,EAAE,WAAW;IACzB,WAAW,EAAE,KAAK;IAClB,mBAAmB,EAAE,CAAC,IAAI,CAAC;IAC3B,mBAAmB,EAAE,IAAI;CAC1B,CAAA;AAQD,MAAM,UAAU,oBAAoB,CAAC,EAAE,KAAK,EAA6B;IACvE,MAAM,UAAU,GAAG,aAAa,EAAE,CAAA;IAClC,MAAM,EAAE,eAAe,EAAE,UAAU,EAAE,4BAA4B,EAAE,GAAG,KAAK,CAAC,MAAM,CAAA;IAElF,MAAM,SAAS,GAAG,YAAY,EAAE,CAAA;IAChC,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAE1B,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,uBAAuB,CACnD,EAAE,eAAe,EAAE,EACnB,EAAE,cAAc,EAAE,KAAK,EAAE,CAC1B,CAAA;IACD,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,UAAU,CAAC,CAAA;IAEvD,IAAI,CAAC,OAAO;QAAE,IAAI,CAAC,mBAAmB,CAAC,CAAA;IAEvC,MAAM,WAAW,GAAG,OAAO,EAAE,cAAc;SACxC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;SACjC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IAElC,MAAM,kBAAkB,GAAG,MAAM,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,EAAE;QAChF,OAAO;YACL,KAAK,EAAE,KAAuC;YAC9C,KAAK;YACL,IAAI,EAAE,WAAW,EAAE,QAAQ,CAAC,KAAuC,CAAC;SACrE,CAAA;IACH,CAAC,CAAC,CAAA;IAEF,MAAM,eAAe,GAAG,CAAC,IAAoB,EAAE,EAAE;QAC/C,SAAS,CAAC,cAAc,CAAC,IAAI,IAAI,EAAE,CAAC,CAAA;QACpC,UAAU,CAAC,MAAM,EAAE,CAAA;IACrB,CAAC,CAAA;IAED,MAAM,EAAE,oBAAoB,EAAE,SAAS,EAAE,GAAG,wBAAwB,CAAC;QACnE,eAAe;QACf,OAAO;QACP,SAAS,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,MAAM,EAAE;KACrC,CAAC,CAAA;IAEF,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE;QACrC,MAAM,GAAG,GAAG,qBAAqB,eAAe,aAAa,UAAU,GAAG,CAAA;QAE1E,OAAO,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,GAAG,EAAE,CAAC,CAAA;IACvC,CAAC,EAAE,CAAC,SAAS,EAAE,eAAe,EAAE,UAAU,CAAC,CAAC,CAAA;IAE5C,MAAM,EAAE,MAAM,EAAE,mBAAmB,EAAE,GAAG,WAAW,CAAC;QAClD,UAAU,EAAE,aAAa;QACzB,SAAS,EAAE,GAAG,EAAE;YACd,OAAO,EAAE,CAAA;YACT,UAAU,CAAC,MAAM,EAAE,CAAA;QACrB,CAAC;QACD,OAAO,EAAE,GAAG,EAAE;YACZ,KAAK,CAAC,KAAK,CAAC,MAAM,EAAE,0DAA0D,CAAC,CAAA;QACjF,CAAC;KACF,CAAC,CAAA;IAEF,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACvC,MAAM,KAAK,GAAG,UAAU,CAAC,QAAQ,EAAE,EAAE,CAAA;QACrC,MAAM,WAAW,GAAG,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,cAAc,CAAC,CAAA;QACvE,MAAM,MAAM,GAAG,MAAM,CACnB;YACE,GAAG,CAAC,WAAW,EAAE,MAAM,IAAI,EAAE,CAAC;YAC9B,eAAe;YACf,kBAAkB,EAAE,UAAU;SAC/B,EACD,KAAK,CACN,CAAA;QACD,UAAU,CAAC,QAAQ,CAAC,YAAY,CAAC,KAAK,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC,CAAA;IACjE,CAAC,EAAE,CAAC,UAAU,EAAE,eAAe,EAAE,UAAU,CAAC,CAAC,CAAA;IAE7C,MAAM,2BAA2B,GAAG,WAAW,CAAC,GAAG,EAAE;QACnD,MAAM,MAAM,GAAG,MAAM,CACnB;YACE,eAAe;YACf,UAAU;SACX,EACD,KAAK,CACN,CAAA;QACD,UAAU,CAAC,QAAQ,CAAC,YAAY,CAAC,KAAK,CAAC,qBAAqB,EAAE,MAAM,CAAC,CAAC,CAAA;IACxE,CAAC,EAAE,CAAC,UAAU,EAAE,eAAe,EAAE,UAAU,CAAC,CAAC,CAAA;IAE7C,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAC5B;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAC/B;QAAA,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,CAAC,CAC3C,CAAC,QAAQ,CACP,GAAG,CAAC,CAAC,KAAK,CAAC,CACX,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,OAAO,CAAC,CAAC,GAAG,EAAE,CACZ,oBAAoB,CAAC;gBACnB,KAAK,EAAE,QAAQ,CAAC,KAAK;gBACrB,IAAI,EAAE,QAAQ,CAAC,IAAI;aACpB,CACH,CAAC,EACD,CACH,CAAC,CACJ;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAC1B;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAC/B;UAAA,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,UAAU,CAC3E;UAAA,CAAC,OAAO,EAAE,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,eAAe,EAAE,CAAC,CAAC,IAAI,EAAE,UAAU,CAAC,CACjF;UAAA,CAAC,OAAO,EAAE,IAAI,IAAI,CAChB,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,2BAA2B,EAAE,CAAC,CACvD;;YACF,EAAE,UAAU,CAAC,CACd,CACD;UAAA,CAAC,CAAC,OAAO,EAAE,IAAI,IAAI,4BAA4B,CAAC,IAAI,CAClD,CAAC,UAAU,CACT,UAAU,CAAC,QAAQ,CACnB,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,mBAAmB,EAAE,CAAC,CACrC,QAAQ,CAAC,CAAC,SAAS,CAAC,CAEpB;;YACF,EAAE,UAAU,CAAC,CACd,CACH;QAAA,EAAE,IAAI,CACR;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,MAAM,QAAQ,GAAG,CAAC,EAChB,QAAQ,EACR,OAAO,GAIR,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,cAAc,GAAG,iBAAiB,CAAC,EAAE,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;IAEzE,OAAO,CACL,CAAC,iBAAiB,CAChB,GAAG,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CACpB,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,QAAQ,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC,CAClD,OAAO,CAAC,CAAC,OAAO,CAAC,CAEjB;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC,CAAC,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CACpF;IAAA,EAAE,iBAAiB,CAAC,CACrB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,EAAE,MAAM,EAAE,GAAG,mBAAmB,EAAE,CAAA;IACxC,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAA;IACtC,MAAM,cAAc,GAAG,CAAC,CAAA;IACxB,MAAM,QAAQ,GAAG,EAAE,CAAA;IACnB,MAAM,eAAe,GAAG,QAAQ,CAAC,MAAM,CAAC;QACtC,GAAG,EAAE,QAAQ;QACb,OAAO,EAAE,QAAQ,GAAG,cAAc,GAAG,CAAC;KACvC,CAAC,CAAA;IAEF,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,SAAS,EAAE;YACT,cAAc,EAAE,YAAY;YAC5B,UAAU,EAAE,EAAE;YACd,aAAa,EAAE,MAAM;YACrB,KAAK,EAAE,MAAM;YACb,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,2BAA2B;YACzD,MAAM;SACP;QACD,QAAQ,EAAE;YACR,MAAM,EAAE,eAAe;YACvB,KAAK,EAAE,eAAe;YACtB,WAAW,EAAE,cAAc;YAC3B,YAAY,EAAE,EAAE;YAChB,cAAc,EAAE,QAAQ;SACzB;QACD,YAAY,EAAE;YACZ,cAAc,EAAE,QAAQ;YACxB,GAAG,EAAE,EAAE;YACP,eAAe,EAAE,EAAE;YACnB,aAAa,EAAE,KAAK;YACpB,iBAAiB,EAAE,KAAK,CAAC,MAAM,CAAC,mBAAmB;YACnD,iBAAiB,EAAE,CAAC;SACrB;QACD,OAAO,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE;QACpB,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,aAAa,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE;KAC3D,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import { PlatformPressable } from '@react-navigation/elements'\nimport { StackActions, StaticScreenProps, useNavigation } from '@react-navigation/native'\nimport { NativeStackNavigationOptions } from '@react-navigation/native-stack'\nimport { useMutation } from '@tanstack/react-query'\nimport React, { useCallback } from 'react'\nimport { Alert, Platform, StyleSheet, useWindowDimensions, View } from 'react-native'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { Text, TextButton } from '../components'\nimport { REACTION_EMOJIS, useReactionStyles } from '../components/conversation/message_reaction'\nimport { useTheme } from '../hooks'\nimport { useApiClient } from '../hooks/use_api_client'\nimport { useConversationMessages } from '../hooks/use_conversation_messages'\nimport { useMessageReactionToggle } from '../hooks/use_message_reaction_toggle'\nimport { ReactionCountResource } from '../types/resources/reaction'\nimport { Clipboard } from '../utils/native_adapters'\nimport { isNil, omitBy } from 'lodash'\n\nexport const MessageActionsScreenOptions: NativeStackNavigationOptions = {\n presentation: 'formSheet',\n headerShown: false,\n sheetAllowedDetents: [0.35],\n sheetGrabberVisible: true,\n}\n\nexport type MessageActionsScreenProps = StaticScreenProps<{\n message_id: string\n conversation_id: number\n canDeleteNonAuthoredMessages?: boolean\n}>\n\nexport function MessageActionsScreen({ route }: MessageActionsScreenProps) {\n const navigation = useNavigation()\n const { conversation_id, message_id, canDeleteNonAuthoredMessages } = route.params\n\n const apiClient = useApiClient()\n const styles = useStyles()\n\n const { messages, refetch } = useConversationMessages(\n { conversation_id },\n { refetchOnMount: false }\n )\n const message = messages.find(m => m.id === message_id)\n\n if (!message) fail('Message not found')\n\n const myReactions = message?.reactionCounts\n .filter(reaction => reaction.mine)\n .map(reaction => reaction.value)\n\n const availableReactions = Object.entries(REACTION_EMOJIS).map(([value, emoji]) => {\n return {\n value: value as ReactionCountResource['value'],\n emoji,\n mine: myReactions?.includes(value as ReactionCountResource['value']),\n }\n })\n\n const handleCopyPress = (text?: string \| null) => {\n Clipboard.setStringAsync(text \|\| '')\n navigation.goBack()\n }\n\n const { handleReactionToggle, isPending } = useMessageReactionToggle({\n conversation_id,\n message,\n onSuccess: () => navigation.goBack(),\n })\n\n const deleteMessage = useCallback(() => {\n const url = `/me/conversations/${conversation_id}/messages/${message_id}/`\n\n return apiClient.chat.delete({ url })\n }, [apiClient, conversation_id, message_id])\n\n const { mutate: handleDeleteMessage } = useMutation({\n mutationFn: deleteMessage,\n onSuccess: () => {\n refetch()\n navigation.goBack()\n },\n onError: () => {\n Alert.alert('Oops', 'We were unable to delete this message. Please try again.')\n },\n })\n\n const handleEditPress = useCallback(() => {\n const state = navigation.getState?.()\n const targetRoute = state?.routes?.find(r => r.name === 'Conversation')\n const params = omitBy(\n {\n ...(targetRoute?.params \|\| {}),\n conversation_id,\n editing_message_id: message_id,\n },\n isNil\n )\n navigation.dispatch(StackActions.popTo('Conversation', params))\n }, [navigation, conversation_id, message_id])\n\n const handleViewReadReceiptsPress = useCallback(() => {\n const params = omitBy(\n {\n conversation_id,\n message_id,\n },\n isNil\n )\n navigation.dispatch(StackActions.popTo('MessageReadReceipts', params))\n }, [navigation, conversation_id, message_id])\n\n return (\n <View style={styles.container}>\n <View style={styles.reactionList}>\n {availableReactions.map((reaction, index) => (\n <Reaction\n key={index}\n reaction={reaction}\n onPress={() =>\n handleReactionToggle({\n value: reaction.value,\n mine: reaction.mine,\n })\n }\n />\n ))}\n </View>\n <View style={styles.actions}>\n <View style={styles.actionButton}>\n <TextButton onPress={() => handleCopyPress(message?.text)}>Copy</TextButton>\n {message?.mine && <TextButton onPress={() => handleEditPress()}>Edit</TextButton>}\n {message?.mine && (\n <TextButton onPress={() => handleViewReadReceiptsPress()}>\n View read receipts\n </TextButton>\n )}\n {(message?.mine \|\| canDeleteNonAuthoredMessages) && (\n <TextButton\n appearance=\"danger\"\n onPress={() => handleDeleteMessage()}\n disabled={isPending}\n >\n Delete\n </TextButton>\n )}\n </View>\n </View>\n </View>\n )\n}\n\nconst Reaction = ({\n reaction,\n onPress,\n}: {\n reaction: { value: ReactionCountResource['value']; emoji: string; mine: boolean \| undefined }\n onPress: () => void\n}) => {\n const styles = useStyles()\n const reactionStyles = useReactionStyles({ mine: reaction.mine ? 1 : 0 })\n\n return (\n <PlatformPressable\n key={reaction.value}\n style={[reactionStyles.reaction, styles.reaction]}\n onPress={onPress}\n >\n <Text style={reactionStyles.reactionEmoji}>{REACTION_EMOJIS[reaction.value]}</Text>\n </PlatformPressable>\n )\n}\n\nconst useStyles = () => {\n const theme = useTheme()\n const { height } = useWindowDimensions()\n const { bottom } = useSafeAreaInsets()\n const btnBorderWidth = 1\n const baseSize = 44\n const reactionBtnSize = Platform.select({\n ios: baseSize,\n android: baseSize + btnBorderWidth * 2,\n })\n\n return StyleSheet.create({\n container: {\n justifyContent: 'flex-start',\n paddingTop: 12,\n paddingBottom: bottom,\n width: '100%',\n backgroundColor: theme.colors.fillColorNeutral100Inverted,\n height,\n },\n reaction: {\n height: reactionBtnSize,\n width: reactionBtnSize,\n borderWidth: btnBorderWidth,\n borderRadius: 32,\n justifyContent: 'center',\n },\n reactionList: {\n justifyContent: 'center',\n gap: 24,\n paddingVertical: 12,\n flexDirection: 'row',\n borderBottomColor: theme.colors.fillColorNeutral040,\n borderBottomWidth: 1,\n },\n actions: { flex: 1 },\n actionButton: { padding: 12, paddingBottom: 100, gap: 12 },\n })\n}\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.6.1-rc.1",
+  "version": "3.7.0-rc.1",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -55,5 +55,5 @@
     "prettier": "^3.4.2",
     "typescript": "<5.6.0"
   },
-  "gitHead": "1645d7c15ce9a88987e199b10d6081787206e771"
+  "gitHead": "4055650e8470bb2262658c1bc16e258a515833b6"
 }

package/src/components/conversation/message.tsx CHANGED Viewed

@@ -142,6 +142,8 @@ export function Message(props: MessageProps) {
                   key={reaction.value}
                   reaction={reaction}
                   onLongPress={handleReactionLongPress}
+                  message={props}
+                  conversationId={conversation_id}
                 />
               ))}
             </View>

package/src/components/conversation/message_reaction.tsx CHANGED Viewed

@@ -4,7 +4,9 @@ import React from 'react'
 import { StyleSheet } from 'react-native'
 import { Text } from '../../components/display'
 import { useTheme } from '../../hooks'
+import { useMessageReactionToggle } from '../../hooks/use_message_reaction_toggle'
 import { ReactionCountResource } from '../../types/resources/reaction'
+import { MessageResource } from '../../types'
 export const REACTION_EMOJIS: Record<ReactionCountResource['value'], string> = {
   thumbs_up: '👍',
@@ -17,20 +19,33 @@ export const REACTION_EMOJIS: Record<ReactionCountResource['value'], string> = {
 export function MessageReaction({
   reaction,
   onLongPress,
+  message,
+  conversationId,
 }: {
   reaction: ReactionCountResource
   onLongPress: (_reaction: ReactionCountResource) => void
+  message: MessageResource
+  conversationId: number
 }) {
   const styles = useReactionStyles(reaction)
+  const { handleReactionToggle } = useMessageReactionToggle({
+    conversation_id: conversationId,
+    message,
+  })
   if (!reaction.count) return null
   if (!REACTION_EMOJIS[reaction.value]) return null
+  const handlePress = () => {
+    handleReactionToggle({ value: reaction.value, mine: !!reaction.mine })
+  }
   return (
     <PlatformPressable
       key={reaction.value}
       style={styles.reaction}
       onLongPress={() => onLongPress(reaction)}
+      onPress={handlePress}
     >
       <Text style={styles.reactionEmoji}>{REACTION_EMOJIS[reaction.value]}</Text>
       <Text style={styles.reactionText}>{reaction.count}</Text>

package/src/hooks/index.ts CHANGED Viewed

@@ -10,3 +10,4 @@ export * from './use_groups_groups'
 export * from './use_groups'
 export * from './use_api'
 export * from './use_api_client'
+export * from './use_message_reaction_toggle'

package/src/hooks/use_message_reaction_toggle.ts ADDED Viewed

@@ -0,0 +1,136 @@
+import { InfiniteData, useMutation, useQueryClient } from '@tanstack/react-query'
+import { useCallback } from 'react'
+import { Alert } from 'react-native'
+import { useApiClient } from './use_api_client'
+import { getMessagesQueryKey, getMessagesRequestArgs } from './use_conversation_messages'
+import { ApiCollection, ApiResource, MessageResource } from '../types'
+import { ReactionCountResource } from '../types/resources/reaction'
+import { updateRecordInPagesData } from '../utils'
+type UseMessageReactionToggleProps = {
+  conversation_id: number
+  message: MessageResource
+  onSuccess?: () => void
+}
+type ToggleReactionParams = {
+  value: ReactionCountResource['value']
+  mine?: boolean
+}
+type QueryData = InfiniteData<ApiCollection<MessageResource>>
+export function useMessageReactionToggle({
+  conversation_id,
+  message,
+  onSuccess,
+}: UseMessageReactionToggleProps) {
+  const apiClient = useApiClient()
+  const queryClient = useQueryClient()
+  const queryKey = getMessagesQueryKey({ conversation_id })
+  const message_id = message.id
+  const toggleReaction = useCallback(
+    ({ value, mine }: ToggleReactionParams) => {
+      const requestParams = getMessagesRequestArgs({ conversation_id })
+      // If already reacted, unreact; otherwise react
+      const endpoint = !mine ? 'react' : 'unreact'
+      const url = `/me/conversations/${conversation_id}/messages/${message_id}/${endpoint}`
+      const fieldsWithValueJoined = Object.fromEntries(
+        Object.entries(requestParams.data.fields).map(([k, v]) => [k, v.join(',')])
+      )
+      return apiClient.chat.post<ApiResource<MessageResource>>({
+        url,
+        data: {
+          ...requestParams.data,
+          data: {
+            type: 'Message',
+            attributes: { value: value },
+          },
+          fields: fieldsWithValueJoined,
+        },
+      })
+    },
+    [apiClient, conversation_id, message_id]
+  )
+  const { mutate: handleReactionToggle, isPending } = useMutation({
+    mutationFn: toggleReaction,
+    onMutate: variables => {
+      const previousData = queryClient.getQueryData<QueryData>(queryKey)
+      if (previousData) {
+        queryClient.setQueryData<QueryData>(queryKey, data =>
+          optimisticUpdate({
+            message,
+            data,
+            value: variables.value,
+            state: !variables.mine,
+          })
+        )
+      }
+      return { previousData }
+    },
+    onSuccess: result => {
+      const updatedMessage = result.data
+      queryClient.setQueryData<QueryData>(queryKey, data =>
+        updateRecordInPagesData({
+          data,
+          record: updatedMessage,
+        })
+      )
+      if (onSuccess) {
+        onSuccess()
+      }
+    },
+    onError: (_data, _variables, context) => {
+      if (context?.previousData) {
+        queryClient.setQueryData<QueryData>(queryKey, context.previousData)
+      }
+      Alert.alert('Oops', 'We were unable to react to this message. Please try again.')
+    },
+  })
+  return {
+    handleReactionToggle,
+    isPending,
+  }
+}
+const optimisticUpdate = ({
+  message,
+  data,
+  value,
+  state,
+}: {
+  message: MessageResource
+  data: QueryData | undefined
+  value: ReactionCountResource['value']
+  state: boolean
+}) => {
+  if (!data) return data
+  const updatedReactionCounts: ReactionCountResource[] = message.reactionCounts.map(reaction => {
+    if (reaction.value === value) {
+      return {
+        ...reaction,
+        mine: state ? 1 : 0,
+        count: state ? reaction.count + 1 : reaction.count - 1,
+      } as ReactionCountResource
+    }
+    return reaction
+  })
+  const updatedMessage: MessageResource = {
+    ...message,
+    reactionCounts: updatedReactionCounts,
+  }
+  return updateRecordInPagesData({
+    data,
+    record: updatedMessage,
+  })
+}

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

@@ -1,6 +1,6 @@
 import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'
 import React, { useCallback, useMemo } from 'react'
-import { Alert, StyleSheet, View } from 'react-native'
+import { Alert, ScrollView, StyleSheet, View } from 'react-native'
 import { Heading, TextButton, ToggleButton } from '../../../components'
 import { useCurrentPerson, useCurrentPersonCache, useTheme } from '../../../hooks'
 import { useMarkAllRead } from '../../../hooks/use_conversations_actions'
@@ -65,7 +65,12 @@ export const ListHeaderComponent = () => {
           Mark all read
         </TextButton>
       </View>
-      <View accessibilityRole="toolbar" style={styles.filterRow}>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.filterRow}
+        accessibilityRole="toolbar"
+      >
         {showAppFilters && (
           <>
             <ToggleButton
@@ -116,7 +121,7 @@ export const ListHeaderComponent = () => {
           iconNameRight="general.threeReducingHorizontalBars"
           accessibilityLabel={showAppFilters ? 'View all filters' : 'View more filters'}
         />
-      </View>
+      </ScrollView>
       <ChatGroupBadge />
     </View>
   )

package/src/screens/message_actions_screen.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import { PlatformPressable } from '@react-navigation/elements'
 import { StackActions, StaticScreenProps, useNavigation } from '@react-navigation/native'
 import { NativeStackNavigationOptions } from '@react-navigation/native-stack'
-import { InfiniteData, useMutation, useQueryClient } from '@tanstack/react-query'
+import { useMutation } from '@tanstack/react-query'
 import React, { useCallback } from 'react'
 import { Alert, Platform, StyleSheet, useWindowDimensions, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
@@ -9,10 +9,9 @@ import { Text, TextButton } from '../components'
 import { REACTION_EMOJIS, useReactionStyles } from '../components/conversation/message_reaction'
 import { useTheme } from '../hooks'
 import { useApiClient } from '../hooks/use_api_client'
-import { getMessagesRequestArgs, useConversationMessages } from '../hooks/use_conversation_messages'
-import { ApiCollection, ApiResource, MessageResource } from '../types'
+import { useConversationMessages } from '../hooks/use_conversation_messages'
+import { useMessageReactionToggle } from '../hooks/use_message_reaction_toggle'
 import { ReactionCountResource } from '../types/resources/reaction'
-import { updateRecordInPagesData } from '../utils'
 import { Clipboard } from '../utils/native_adapters'
 import { isNil, omitBy } from 'lodash'
@@ -34,14 +33,16 @@ export function MessageActionsScreen({ route }: MessageActionsScreenProps) {
   const { conversation_id, message_id, canDeleteNonAuthoredMessages } = route.params
   const apiClient = useApiClient()
-  const queryClient = useQueryClient()
   const styles = useStyles()
-  const { messages, queryKey, refetch } = useConversationMessages(
+  const { messages, refetch } = useConversationMessages(
     { conversation_id },
     { refetchOnMount: false }
   )
   const message = messages.find(m => m.id === message_id)
+  if (!message) fail('Message not found')
   const myReactions = message?.reactionCounts
     .filter(reaction => reaction.mine)
     .map(reaction => reaction.value)
@@ -59,31 +60,11 @@ export function MessageActionsScreen({ route }: MessageActionsScreenProps) {
     navigation.goBack()
   }
-  const handleReactionPress = useCallback(
-    ({ value, mine }: { value: keyof typeof REACTION_EMOJIS; mine?: boolean }) => {
-      const requestParams = getMessagesRequestArgs({ conversation_id })
-      // Value has already been updated
-      const endpoint = !mine ? 'react' : 'unreact'
-      const url = `/me/conversations/${conversation_id}/messages/${message_id}/${endpoint}`
-      const fieldsWithValueJoined = Object.fromEntries(
-        Object.entries(requestParams.data.fields).map(([k, v]) => [k, v.join(',')])
-      )
-      return apiClient.chat.post<ApiResource<MessageResource>>({
-        url,
-        data: {
-          ...requestParams.data,
-          data: {
-            type: 'Message',
-            attributes: { value: value },
-          },
-          fields: fieldsWithValueJoined,
-        },
-      })
-    },
-    [apiClient, conversation_id, message_id]
-  )
+  const { handleReactionToggle, isPending } = useMessageReactionToggle({
+    conversation_id,
+    message,
+    onSuccess: () => navigation.goBack(),
+  })
   const deleteMessage = useCallback(() => {
     const url = `/me/conversations/${conversation_id}/messages/${message_id}/`
@@ -91,25 +72,6 @@ export function MessageActionsScreen({ route }: MessageActionsScreenProps) {
     return apiClient.chat.delete({ url })
   }, [apiClient, conversation_id, message_id])
-  const { mutate: handleReaction, isPending } = useMutation({
-    mutationFn: handleReactionPress,
-    onSuccess: result => {
-      const updatedMessage = result.data
-      type QueryData = InfiniteData<ApiCollection<MessageResource>>
-      queryClient.setQueryData<QueryData>(queryKey, data =>
-        updateRecordInPagesData({
-          data,
-          record: updatedMessage,
-        })
-      )
-      navigation.goBack()
-    },
-    onError: () => {
-      Alert.alert('Oops', 'We were unable to react to this message. Please try again.')
-    },
-  })
   const { mutate: handleDeleteMessage } = useMutation({
     mutationFn: deleteMessage,
     onSuccess: () => {
@@ -150,7 +112,16 @@ export function MessageActionsScreen({ route }: MessageActionsScreenProps) {
     <View style={styles.container}>
       <View style={styles.reactionList}>
         {availableReactions.map((reaction, index) => (
-          <Reaction key={index} reaction={reaction} onPress={() => handleReaction(reaction)} />
+          <Reaction
+            key={index}
+            reaction={reaction}
+            onPress={() =>
+              handleReactionToggle({
+                value: reaction.value,
+                mine: reaction.mine,
+              })
+            }
+          />
         ))}
       </View>
       <View style={styles.actions}>