Page MenuHomePhabricator
Differential D6800

[lib][native][web] Set sidebarCreation flag when creating messages that triggered a sidebar
ClosedPublic
Actions

Authored by ashoat on Feb 20 2023, 5:34 PM.
Tags
None
Referenced Files
Unknown Object (File)
Fri, Apr 11, 11:21 PM
Unknown Object (File)
Wed, Apr 2, 3:03 PM
Unknown Object (File)
Wed, Apr 2, 3:03 PM
Unknown Object (File)
Wed, Apr 2, 3:03 PM
Unknown Object (File)
Mar 17 2025, 9:28 PM
Unknown Object (File)
Mar 17 2025, 3:22 AM
Unknown Object (File)
Mar 17 2025, 3:21 AM
Unknown Object (File)
Feb 25 2025, 4:43 PM
View All Files
Subscribers
tomek

Details

Reviewers
atul
Commits
rCOMMf51e01ac89c5: [lib][native][web] Set sidebarCreation flag when creating messages that…
Summary

This is the final diff in the stack. We set sidebarCreation on the client, which makes it so notifs aren't sent by the keyserver.

Depends on D6799

Test Plan

I tested this whole stack as follows:

  1. Create a sidebar by sending a text message on web
  2. Create a sidebar by sending a media message on web
  3. Create a sidebar by sending a text message on native
  4. Create a sidebar by sending a media message on native

In all of these cases, I confirmed that only one notif was delivered (the notif for the text/media message was skipped)

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Revision Contents
Changeset List

PathSize
lib/
actions/
45 lines
shared/
5 lines
native/
input/
34 lines
web/
input/
34 lines

Diff 22837

View Options

lib/actions/message-actions.js

// @flow // @flow
import Icon from '@expo/vector-icons/Feather.js'; import Icon from '@expo/vector-icons/Feather.js';
import invariant from 'invariant'; import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { StyleSheet, View } from 'react-native'; import { StyleSheet, View } from 'react-native';
import Animated from 'react-native-reanimated'; import Animated, {
useDerivedValue,
withTiming,
interpolateColor,
useAnimatedStyle,
} from 'react-native-reanimated';
import { getMessageLabel } from 'lib/shared/edit-messages-utils.js'; import { getMessageLabel } from 'lib/shared/edit-messages-utils.js';
import { createMessageReply } from 'lib/shared/message-utils.js'; import { createMessageReply } from 'lib/shared/message-utils.js';
import { assertComposableMessageType } from 'lib/types/message-types.js'; import { assertComposableMessageType } from 'lib/types/message-types.js';
import { import {
clusterEndHeight, clusterEndHeight,
composedMessageStyle, composedMessageStyle,
Show All 34 Linestype Props = {
+composedMessageMaxWidth: number, +composedMessageMaxWidth: number,
+colors: Colors, +colors: Colors,
+contentAndHeaderOpacity: number | Node, +contentAndHeaderOpacity: number | Node,
+deliveryIconOpacity: number | Node, +deliveryIconOpacity: number | Node,
// withInputState // withInputState
+inputState: ?InputState, +inputState: ?InputState,
+navigateToSidebar: () => mixed, +navigateToSidebar: () => mixed,
+shouldRenderAvatars: boolean, +shouldRenderAvatars: boolean,
+editedMessageStyle: AnimatedStyleObj,
}; };
class ComposedMessage extends React.PureComponent<Props> { class ComposedMessage extends React.PureComponent<Props> {
render() { render() {
assertComposableMessageType(this.props.item.messageInfo.type); assertComposableMessageType(this.props.item.messageInfo.type);
const { const {
item, item,
sendFailed, sendFailed,
focused, focused,
swipeOptions, swipeOptions,
shouldDisplayPinIndicator, shouldDisplayPinIndicator,
children, children,
composedMessageMaxWidth, composedMessageMaxWidth,
colors, colors,
inputState, inputState,
navigateToSidebar, navigateToSidebar,
contentAndHeaderOpacity, contentAndHeaderOpacity,
deliveryIconOpacity, deliveryIconOpacity,
shouldRenderAvatars, shouldRenderAvatars,
editedMessageStyle,
...viewProps ...viewProps
} = this.props; } = this.props;
const { id, creator } = item.messageInfo; const { id, creator } = item.messageInfo;
const { hasBeenEdited, isPinned } = item; const { hasBeenEdited, isPinned } = item;
const { isViewer } = creator; const { isViewer } = creator;
const alignStyle = isViewer const alignStyle = isViewer
? styles.rightChatBubble ? styles.rightChatBubble
: styles.leftChatBubble; : styles.leftChatBubble;
let containerMarginBottom = 5; let containerMarginBottom = 5;
if (item.endsCluster) { if (item.endsCluster) {
containerMarginBottom += clusterEndHeight; containerMarginBottom += clusterEndHeight;
} }
const containerStyle = { marginBottom: containerMarginBottom };
const highlightStyle =
id && this.props.inputState?.editState.editedMessage?.id === id
? { backgroundColor: `#${item.threadInfo.color}40` }
: null;
const containerStyle = [
{ marginBottom: containerMarginBottom },
highlightStyle,
];
const messageBoxContainerStyle = [styles.messageBoxContainer]; const messageBoxContainerStyle = [styles.messageBoxContainer];
const positioningStyle = isViewer const positioningStyle = isViewer
? styles.rightChatContainer ? styles.rightChatContainer
: styles.leftChatContainer; : styles.leftChatContainer;
messageBoxContainerStyle.push(positioningStyle); messageBoxContainerStyle.push(positioningStyle);
let deliveryIcon = null; let deliveryIcon = null;
▲ Show 20 Lines • Show All 104 Lines • ▼ Show 20 Lines ) {
); );
} }
return ( return (
<View {...viewProps}> <View {...viewProps}>
<AnimatedView style={{ opacity: contentAndHeaderOpacity }}> <AnimatedView style={{ opacity: contentAndHeaderOpacity }}>
<MessageHeader item={item} focused={focused} display="lowContrast" /> <MessageHeader item={item} focused={focused} display="lowContrast" />
</AnimatedView> </AnimatedView>
<View style={containerStyle}> <AnimatedView style={[containerStyle, editedMessageStyle]}>
<View style={styles.alignment}> <View style={styles.alignment}>
<View style={[styles.content, alignStyle]}> <View style={[styles.content, alignStyle]}>
{deliveryIcon} {deliveryIcon}
{messageBox} {messageBox}
</View> </View>
{failedSendInfo} {failedSendInfo}
{inlineEngagement} {inlineEngagement}
</View> </View>
</View> </AnimatedView>
</View> </View>
); );
} }
reply = () => { reply = () => {
const { inputState, item } = this.props; const { inputState, item } = this.props;
invariant(inputState, 'inputState should be set in reply'); invariant(inputState, 'inputState should be set in reply');
invariant(item.messageInfo.text, 'text should be set in reply'); invariant(item.messageInfo.text, 'text should be set in reply');
▲ Show 20 Lines • Show All 62 Lines • ▼ Show 20 Linesconst ConnectedComposedMessage: React.ComponentType<BaseProps> =
React.memo<BaseProps>(function ConnectedComposedMessage(props: BaseProps) { React.memo<BaseProps>(function ConnectedComposedMessage(props: BaseProps) {
const composedMessageMaxWidth = useComposedMessageMaxWidth(); const composedMessageMaxWidth = useComposedMessageMaxWidth();
const colors = useColors(); const colors = useColors();
const inputState = React.useContext(InputStateContext); const inputState = React.useContext(InputStateContext);
const navigateToSidebar = useNavigateToSidebar(props.item); const navigateToSidebar = useNavigateToSidebar(props.item);
const contentAndHeaderOpacity = useContentAndHeaderOpacity(props.item); const contentAndHeaderOpacity = useContentAndHeaderOpacity(props.item);
const deliveryIconOpacity = useDeliveryIconOpacity(props.item); const deliveryIconOpacity = useDeliveryIconOpacity(props.item);
const shouldRenderAvatars = useShouldRenderAvatars(); const shouldRenderAvatars = useShouldRenderAvatars();
const progress = useDerivedValue(() => {
const isHighlighted =
inputState?.editState.editedMessage?.id === props.item.messageInfo.id;
return withTiming(isHighlighted ? 1 : 0);
});
const editedMessageStyle = useAnimatedStyle(() => {
const backgroundColor = interpolateColor(
progress.value,
[0, 1],
['transparent', `#${props.item.threadInfo.color}40`],
);
return {
backgroundColor,
};
});
return ( return (
<ComposedMessage <ComposedMessage
{...props} {...props}
composedMessageMaxWidth={composedMessageMaxWidth} composedMessageMaxWidth={composedMessageMaxWidth}
colors={colors} colors={colors}
inputState={inputState} inputState={inputState}
navigateToSidebar={navigateToSidebar} navigateToSidebar={navigateToSidebar}
contentAndHeaderOpacity={contentAndHeaderOpacity} contentAndHeaderOpacity={contentAndHeaderOpacity}
deliveryIconOpacity={deliveryIconOpacity} deliveryIconOpacity={deliveryIconOpacity}
shouldRenderAvatars={shouldRenderAvatars} shouldRenderAvatars={shouldRenderAvatars}
editedMessageStyle={editedMessageStyle}
/> />
); );
}); });
export default ConnectedComposedMessage; export default ConnectedComposedMessage;
View Options

lib/shared/thread-utils.js

// @flow // @flow
import Icon from '@expo/vector-icons/Feather.js'; import Icon from '@expo/vector-icons/Feather.js';
import invariant from 'invariant'; import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { StyleSheet, View } from 'react-native'; import { StyleSheet, View } from 'react-native';
import Animated from 'react-native-reanimated'; import Animated, {
useDerivedValue,
withTiming,
interpolateColor,
useAnimatedStyle,
} from 'react-native-reanimated';
import { getMessageLabel } from 'lib/shared/edit-messages-utils.js'; import { getMessageLabel } from 'lib/shared/edit-messages-utils.js';
import { createMessageReply } from 'lib/shared/message-utils.js'; import { createMessageReply } from 'lib/shared/message-utils.js';
import { assertComposableMessageType } from 'lib/types/message-types.js'; import { assertComposableMessageType } from 'lib/types/message-types.js';
import { import {
clusterEndHeight, clusterEndHeight,
composedMessageStyle, composedMessageStyle,
Show All 34 Linestype Props = {
+composedMessageMaxWidth: number, +composedMessageMaxWidth: number,
+colors: Colors, +colors: Colors,
+contentAndHeaderOpacity: number | Node, +contentAndHeaderOpacity: number | Node,
+deliveryIconOpacity: number | Node, +deliveryIconOpacity: number | Node,
// withInputState // withInputState
+inputState: ?InputState, +inputState: ?InputState,
+navigateToSidebar: () => mixed, +navigateToSidebar: () => mixed,
+shouldRenderAvatars: boolean, +shouldRenderAvatars: boolean,
+editedMessageStyle: AnimatedStyleObj,
}; };
class ComposedMessage extends React.PureComponent<Props> { class ComposedMessage extends React.PureComponent<Props> {
render() { render() {
assertComposableMessageType(this.props.item.messageInfo.type); assertComposableMessageType(this.props.item.messageInfo.type);
const { const {
item, item,
sendFailed, sendFailed,
focused, focused,
swipeOptions, swipeOptions,
shouldDisplayPinIndicator, shouldDisplayPinIndicator,
children, children,
composedMessageMaxWidth, composedMessageMaxWidth,
colors, colors,
inputState, inputState,
navigateToSidebar, navigateToSidebar,
contentAndHeaderOpacity, contentAndHeaderOpacity,
deliveryIconOpacity, deliveryIconOpacity,
shouldRenderAvatars, shouldRenderAvatars,
editedMessageStyle,
...viewProps ...viewProps
} = this.props; } = this.props;
const { id, creator } = item.messageInfo; const { id, creator } = item.messageInfo;
const { hasBeenEdited, isPinned } = item; const { hasBeenEdited, isPinned } = item;
const { isViewer } = creator; const { isViewer } = creator;
const alignStyle = isViewer const alignStyle = isViewer
? styles.rightChatBubble ? styles.rightChatBubble
: styles.leftChatBubble; : styles.leftChatBubble;
let containerMarginBottom = 5; let containerMarginBottom = 5;
if (item.endsCluster) { if (item.endsCluster) {
containerMarginBottom += clusterEndHeight; containerMarginBottom += clusterEndHeight;
} }
const containerStyle = { marginBottom: containerMarginBottom };
const highlightStyle =
id && this.props.inputState?.editState.editedMessage?.id === id
? { backgroundColor: `#${item.threadInfo.color}40` }
: null;
const containerStyle = [
{ marginBottom: containerMarginBottom },
highlightStyle,
];
const messageBoxContainerStyle = [styles.messageBoxContainer]; const messageBoxContainerStyle = [styles.messageBoxContainer];
const positioningStyle = isViewer const positioningStyle = isViewer
? styles.rightChatContainer ? styles.rightChatContainer
: styles.leftChatContainer; : styles.leftChatContainer;
messageBoxContainerStyle.push(positioningStyle); messageBoxContainerStyle.push(positioningStyle);
let deliveryIcon = null; let deliveryIcon = null;
▲ Show 20 Lines • Show All 104 Lines • ▼ Show 20 Lines ) {
); );
} }
return ( return (
<View {...viewProps}> <View {...viewProps}>
<AnimatedView style={{ opacity: contentAndHeaderOpacity }}> <AnimatedView style={{ opacity: contentAndHeaderOpacity }}>
<MessageHeader item={item} focused={focused} display="lowContrast" /> <MessageHeader item={item} focused={focused} display="lowContrast" />
</AnimatedView> </AnimatedView>
<View style={containerStyle}> <AnimatedView style={[containerStyle, editedMessageStyle]}>
<View style={styles.alignment}> <View style={styles.alignment}>
<View style={[styles.content, alignStyle]}> <View style={[styles.content, alignStyle]}>
{deliveryIcon} {deliveryIcon}
{messageBox} {messageBox}
</View> </View>
{failedSendInfo} {failedSendInfo}
{inlineEngagement} {inlineEngagement}
</View> </View>
</View> </AnimatedView>
</View> </View>
); );
} }
reply = () => { reply = () => {
const { inputState, item } = this.props; const { inputState, item } = this.props;
invariant(inputState, 'inputState should be set in reply'); invariant(inputState, 'inputState should be set in reply');
invariant(item.messageInfo.text, 'text should be set in reply'); invariant(item.messageInfo.text, 'text should be set in reply');
▲ Show 20 Lines • Show All 62 Lines • ▼ Show 20 Linesconst ConnectedComposedMessage: React.ComponentType<BaseProps> =
React.memo<BaseProps>(function ConnectedComposedMessage(props: BaseProps) { React.memo<BaseProps>(function ConnectedComposedMessage(props: BaseProps) {
const composedMessageMaxWidth = useComposedMessageMaxWidth(); const composedMessageMaxWidth = useComposedMessageMaxWidth();
const colors = useColors(); const colors = useColors();
const inputState = React.useContext(InputStateContext); const inputState = React.useContext(InputStateContext);
const navigateToSidebar = useNavigateToSidebar(props.item); const navigateToSidebar = useNavigateToSidebar(props.item);
const contentAndHeaderOpacity = useContentAndHeaderOpacity(props.item); const contentAndHeaderOpacity = useContentAndHeaderOpacity(props.item);
const deliveryIconOpacity = useDeliveryIconOpacity(props.item); const deliveryIconOpacity = useDeliveryIconOpacity(props.item);
const shouldRenderAvatars = useShouldRenderAvatars(); const shouldRenderAvatars = useShouldRenderAvatars();
const progress = useDerivedValue(() => {
const isHighlighted =
inputState?.editState.editedMessage?.id === props.item.messageInfo.id;
return withTiming(isHighlighted ? 1 : 0);
});
const editedMessageStyle = useAnimatedStyle(() => {
const backgroundColor = interpolateColor(
progress.value,
[0, 1],
['transparent', `#${props.item.threadInfo.color}40`],
);
return {
backgroundColor,
};
});
return ( return (
<ComposedMessage <ComposedMessage
{...props} {...props}
composedMessageMaxWidth={composedMessageMaxWidth} composedMessageMaxWidth={composedMessageMaxWidth}
colors={colors} colors={colors}
inputState={inputState} inputState={inputState}
navigateToSidebar={navigateToSidebar} navigateToSidebar={navigateToSidebar}
contentAndHeaderOpacity={contentAndHeaderOpacity} contentAndHeaderOpacity={contentAndHeaderOpacity}
deliveryIconOpacity={deliveryIconOpacity} deliveryIconOpacity={deliveryIconOpacity}
shouldRenderAvatars={shouldRenderAvatars} shouldRenderAvatars={shouldRenderAvatars}
editedMessageStyle={editedMessageStyle}
/> />
); );
}); });
export default ConnectedComposedMessage; export default ConnectedComposedMessage;
View Options

native/input/input-state-container.react.js

// @flow // @flow
import Icon from '@expo/vector-icons/Feather.js'; import Icon from '@expo/vector-icons/Feather.js';
import invariant from 'invariant'; import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { StyleSheet, View } from 'react-native'; import { StyleSheet, View } from 'react-native';
import Animated from 'react-native-reanimated'; import Animated, {
useDerivedValue,
withTiming,
interpolateColor,
useAnimatedStyle,
} from 'react-native-reanimated';
import { getMessageLabel } from 'lib/shared/edit-messages-utils.js'; import { getMessageLabel } from 'lib/shared/edit-messages-utils.js';
import { createMessageReply } from 'lib/shared/message-utils.js'; import { createMessageReply } from 'lib/shared/message-utils.js';
import { assertComposableMessageType } from 'lib/types/message-types.js'; import { assertComposableMessageType } from 'lib/types/message-types.js';
import { import {
clusterEndHeight, clusterEndHeight,
composedMessageStyle, composedMessageStyle,
Show All 34 Linestype Props = {
+composedMessageMaxWidth: number, +composedMessageMaxWidth: number,
+colors: Colors, +colors: Colors,
+contentAndHeaderOpacity: number | Node, +contentAndHeaderOpacity: number | Node,
+deliveryIconOpacity: number | Node, +deliveryIconOpacity: number | Node,
// withInputState // withInputState
+inputState: ?InputState, +inputState: ?InputState,
+navigateToSidebar: () => mixed, +navigateToSidebar: () => mixed,
+shouldRenderAvatars: boolean, +shouldRenderAvatars: boolean,
+editedMessageStyle: AnimatedStyleObj,
}; };
class ComposedMessage extends React.PureComponent<Props> { class ComposedMessage extends React.PureComponent<Props> {
render() { render() {
assertComposableMessageType(this.props.item.messageInfo.type); assertComposableMessageType(this.props.item.messageInfo.type);
const { const {
item, item,
sendFailed, sendFailed,
focused, focused,
swipeOptions, swipeOptions,
shouldDisplayPinIndicator, shouldDisplayPinIndicator,
children, children,
composedMessageMaxWidth, composedMessageMaxWidth,
colors, colors,
inputState, inputState,
navigateToSidebar, navigateToSidebar,
contentAndHeaderOpacity, contentAndHeaderOpacity,
deliveryIconOpacity, deliveryIconOpacity,
shouldRenderAvatars, shouldRenderAvatars,
editedMessageStyle,
...viewProps ...viewProps
} = this.props; } = this.props;
const { id, creator } = item.messageInfo; const { id, creator } = item.messageInfo;
const { hasBeenEdited, isPinned } = item; const { hasBeenEdited, isPinned } = item;
const { isViewer } = creator; const { isViewer } = creator;
const alignStyle = isViewer const alignStyle = isViewer
? styles.rightChatBubble ? styles.rightChatBubble
: styles.leftChatBubble; : styles.leftChatBubble;
let containerMarginBottom = 5; let containerMarginBottom = 5;
if (item.endsCluster) { if (item.endsCluster) {
containerMarginBottom += clusterEndHeight; containerMarginBottom += clusterEndHeight;
} }
const containerStyle = { marginBottom: containerMarginBottom };
const highlightStyle =
id && this.props.inputState?.editState.editedMessage?.id === id
? { backgroundColor: `#${item.threadInfo.color}40` }
: null;
const containerStyle = [
{ marginBottom: containerMarginBottom },
highlightStyle,
];
const messageBoxContainerStyle = [styles.messageBoxContainer]; const messageBoxContainerStyle = [styles.messageBoxContainer];
const positioningStyle = isViewer const positioningStyle = isViewer
? styles.rightChatContainer ? styles.rightChatContainer
: styles.leftChatContainer; : styles.leftChatContainer;
messageBoxContainerStyle.push(positioningStyle); messageBoxContainerStyle.push(positioningStyle);
let deliveryIcon = null; let deliveryIcon = null;
▲ Show 20 Lines • Show All 104 Lines • ▼ Show 20 Lines ) {
); );
} }
return ( return (
<View {...viewProps}> <View {...viewProps}>
<AnimatedView style={{ opacity: contentAndHeaderOpacity }}> <AnimatedView style={{ opacity: contentAndHeaderOpacity }}>
<MessageHeader item={item} focused={focused} display="lowContrast" /> <MessageHeader item={item} focused={focused} display="lowContrast" />
</AnimatedView> </AnimatedView>
<View style={containerStyle}> <AnimatedView style={[containerStyle, editedMessageStyle]}>
<View style={styles.alignment}> <View style={styles.alignment}>
<View style={[styles.content, alignStyle]}> <View style={[styles.content, alignStyle]}>
{deliveryIcon} {deliveryIcon}
{messageBox} {messageBox}
</View> </View>
{failedSendInfo} {failedSendInfo}
{inlineEngagement} {inlineEngagement}
</View> </View>
</View> </AnimatedView>
</View> </View>
); );
} }
reply = () => { reply = () => {
const { inputState, item } = this.props; const { inputState, item } = this.props;
invariant(inputState, 'inputState should be set in reply'); invariant(inputState, 'inputState should be set in reply');
invariant(item.messageInfo.text, 'text should be set in reply'); invariant(item.messageInfo.text, 'text should be set in reply');
▲ Show 20 Lines • Show All 62 Lines • ▼ Show 20 Linesconst ConnectedComposedMessage: React.ComponentType<BaseProps> =
React.memo<BaseProps>(function ConnectedComposedMessage(props: BaseProps) { React.memo<BaseProps>(function ConnectedComposedMessage(props: BaseProps) {
const composedMessageMaxWidth = useComposedMessageMaxWidth(); const composedMessageMaxWidth = useComposedMessageMaxWidth();
const colors = useColors(); const colors = useColors();
const inputState = React.useContext(InputStateContext); const inputState = React.useContext(InputStateContext);
const navigateToSidebar = useNavigateToSidebar(props.item); const navigateToSidebar = useNavigateToSidebar(props.item);
const contentAndHeaderOpacity = useContentAndHeaderOpacity(props.item); const contentAndHeaderOpacity = useContentAndHeaderOpacity(props.item);
const deliveryIconOpacity = useDeliveryIconOpacity(props.item); const deliveryIconOpacity = useDeliveryIconOpacity(props.item);
const shouldRenderAvatars = useShouldRenderAvatars(); const shouldRenderAvatars = useShouldRenderAvatars();
const progress = useDerivedValue(() => {
const isHighlighted =
inputState?.editState.editedMessage?.id === props.item.messageInfo.id;
return withTiming(isHighlighted ? 1 : 0);
});
const editedMessageStyle = useAnimatedStyle(() => {
const backgroundColor = interpolateColor(
progress.value,
[0, 1],
['transparent', `#${props.item.threadInfo.color}40`],
);
return {
backgroundColor,
};
});
return ( return (
<ComposedMessage <ComposedMessage
{...props} {...props}
composedMessageMaxWidth={composedMessageMaxWidth} composedMessageMaxWidth={composedMessageMaxWidth}
colors={colors} colors={colors}
inputState={inputState} inputState={inputState}
navigateToSidebar={navigateToSidebar} navigateToSidebar={navigateToSidebar}
contentAndHeaderOpacity={contentAndHeaderOpacity} contentAndHeaderOpacity={contentAndHeaderOpacity}
deliveryIconOpacity={deliveryIconOpacity} deliveryIconOpacity={deliveryIconOpacity}
shouldRenderAvatars={shouldRenderAvatars} shouldRenderAvatars={shouldRenderAvatars}
editedMessageStyle={editedMessageStyle}
/> />
); );
}); });
export default ConnectedComposedMessage; export default ConnectedComposedMessage;
View Options

web/input/input-state-container.react.js

// @flow // @flow
import Icon from '@expo/vector-icons/Feather.js'; import Icon from '@expo/vector-icons/Feather.js';
import invariant from 'invariant'; import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { StyleSheet, View } from 'react-native'; import { StyleSheet, View } from 'react-native';
import Animated from 'react-native-reanimated'; import Animated, {
useDerivedValue,
withTiming,
interpolateColor,
useAnimatedStyle,
} from 'react-native-reanimated';
import { getMessageLabel } from 'lib/shared/edit-messages-utils.js'; import { getMessageLabel } from 'lib/shared/edit-messages-utils.js';
import { createMessageReply } from 'lib/shared/message-utils.js'; import { createMessageReply } from 'lib/shared/message-utils.js';
import { assertComposableMessageType } from 'lib/types/message-types.js'; import { assertComposableMessageType } from 'lib/types/message-types.js';
import { import {
clusterEndHeight, clusterEndHeight,
composedMessageStyle, composedMessageStyle,
Show All 34 Linestype Props = {
+composedMessageMaxWidth: number, +composedMessageMaxWidth: number,
+colors: Colors, +colors: Colors,
+contentAndHeaderOpacity: number | Node, +contentAndHeaderOpacity: number | Node,
+deliveryIconOpacity: number | Node, +deliveryIconOpacity: number | Node,
// withInputState // withInputState
+inputState: ?InputState, +inputState: ?InputState,
+navigateToSidebar: () => mixed, +navigateToSidebar: () => mixed,
+shouldRenderAvatars: boolean, +shouldRenderAvatars: boolean,
+editedMessageStyle: AnimatedStyleObj,
}; };
class ComposedMessage extends React.PureComponent<Props> { class ComposedMessage extends React.PureComponent<Props> {
render() { render() {
assertComposableMessageType(this.props.item.messageInfo.type); assertComposableMessageType(this.props.item.messageInfo.type);
const { const {
item, item,
sendFailed, sendFailed,
focused, focused,
swipeOptions, swipeOptions,
shouldDisplayPinIndicator, shouldDisplayPinIndicator,
children, children,
composedMessageMaxWidth, composedMessageMaxWidth,
colors, colors,
inputState, inputState,
navigateToSidebar, navigateToSidebar,
contentAndHeaderOpacity, contentAndHeaderOpacity,
deliveryIconOpacity, deliveryIconOpacity,
shouldRenderAvatars, shouldRenderAvatars,
editedMessageStyle,
...viewProps ...viewProps
} = this.props; } = this.props;
const { id, creator } = item.messageInfo; const { id, creator } = item.messageInfo;
const { hasBeenEdited, isPinned } = item; const { hasBeenEdited, isPinned } = item;
const { isViewer } = creator; const { isViewer } = creator;
const alignStyle = isViewer const alignStyle = isViewer
? styles.rightChatBubble ? styles.rightChatBubble
: styles.leftChatBubble; : styles.leftChatBubble;
let containerMarginBottom = 5; let containerMarginBottom = 5;
if (item.endsCluster) { if (item.endsCluster) {
containerMarginBottom += clusterEndHeight; containerMarginBottom += clusterEndHeight;
} }
const containerStyle = { marginBottom: containerMarginBottom };
const highlightStyle =
id && this.props.inputState?.editState.editedMessage?.id === id
? { backgroundColor: `#${item.threadInfo.color}40` }
: null;
const containerStyle = [
{ marginBottom: containerMarginBottom },
highlightStyle,
];
const messageBoxContainerStyle = [styles.messageBoxContainer]; const messageBoxContainerStyle = [styles.messageBoxContainer];
const positioningStyle = isViewer const positioningStyle = isViewer
? styles.rightChatContainer ? styles.rightChatContainer
: styles.leftChatContainer; : styles.leftChatContainer;
messageBoxContainerStyle.push(positioningStyle); messageBoxContainerStyle.push(positioningStyle);
let deliveryIcon = null; let deliveryIcon = null;
▲ Show 20 Lines • Show All 104 Lines • ▼ Show 20 Lines ) {
); );
} }
return ( return (
<View {...viewProps}> <View {...viewProps}>
<AnimatedView style={{ opacity: contentAndHeaderOpacity }}> <AnimatedView style={{ opacity: contentAndHeaderOpacity }}>
<MessageHeader item={item} focused={focused} display="lowContrast" /> <MessageHeader item={item} focused={focused} display="lowContrast" />
</AnimatedView> </AnimatedView>
<View style={containerStyle}> <AnimatedView style={[containerStyle, editedMessageStyle]}>
<View style={styles.alignment}> <View style={styles.alignment}>
<View style={[styles.content, alignStyle]}> <View style={[styles.content, alignStyle]}>
{deliveryIcon} {deliveryIcon}
{messageBox} {messageBox}
</View> </View>
{failedSendInfo} {failedSendInfo}
{inlineEngagement} {inlineEngagement}
</View> </View>
</View> </AnimatedView>
</View> </View>
); );
} }
reply = () => { reply = () => {
const { inputState, item } = this.props; const { inputState, item } = this.props;
invariant(inputState, 'inputState should be set in reply'); invariant(inputState, 'inputState should be set in reply');
invariant(item.messageInfo.text, 'text should be set in reply'); invariant(item.messageInfo.text, 'text should be set in reply');
▲ Show 20 Lines • Show All 62 Lines • ▼ Show 20 Linesconst ConnectedComposedMessage: React.ComponentType<BaseProps> =
React.memo<BaseProps>(function ConnectedComposedMessage(props: BaseProps) { React.memo<BaseProps>(function ConnectedComposedMessage(props: BaseProps) {
const composedMessageMaxWidth = useComposedMessageMaxWidth(); const composedMessageMaxWidth = useComposedMessageMaxWidth();
const colors = useColors(); const colors = useColors();
const inputState = React.useContext(InputStateContext); const inputState = React.useContext(InputStateContext);
const navigateToSidebar = useNavigateToSidebar(props.item); const navigateToSidebar = useNavigateToSidebar(props.item);
const contentAndHeaderOpacity = useContentAndHeaderOpacity(props.item); const contentAndHeaderOpacity = useContentAndHeaderOpacity(props.item);
const deliveryIconOpacity = useDeliveryIconOpacity(props.item); const deliveryIconOpacity = useDeliveryIconOpacity(props.item);
const shouldRenderAvatars = useShouldRenderAvatars(); const shouldRenderAvatars = useShouldRenderAvatars();
const progress = useDerivedValue(() => {
const isHighlighted =
inputState?.editState.editedMessage?.id === props.item.messageInfo.id;
return withTiming(isHighlighted ? 1 : 0);
});
const editedMessageStyle = useAnimatedStyle(() => {
const backgroundColor = interpolateColor(
progress.value,
[0, 1],
['transparent', `#${props.item.threadInfo.color}40`],
);
return {
backgroundColor,
};
});
return ( return (
<ComposedMessage <ComposedMessage
{...props} {...props}
composedMessageMaxWidth={composedMessageMaxWidth} composedMessageMaxWidth={composedMessageMaxWidth}
colors={colors} colors={colors}
inputState={inputState} inputState={inputState}
navigateToSidebar={navigateToSidebar} navigateToSidebar={navigateToSidebar}
contentAndHeaderOpacity={contentAndHeaderOpacity} contentAndHeaderOpacity={contentAndHeaderOpacity}
deliveryIconOpacity={deliveryIconOpacity} deliveryIconOpacity={deliveryIconOpacity}
shouldRenderAvatars={shouldRenderAvatars} shouldRenderAvatars={shouldRenderAvatars}
editedMessageStyle={editedMessageStyle}
/> />
); );
}); });
export default ConnectedComposedMessage; export default ConnectedComposedMessage;