Page MenuHomePhabricator
Differential D6799

[keyserver][lib] Add sidebarCreation to keyserver message creation endpoints
ClosedPublic
Actions

Authored by ashoat on Feb 20 2023, 5:34 PM.
Tags
None
Referenced Files
Unknown Object (File)
Thu, Apr 3, 8:29 AM
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, 3:22 AM
Unknown Object (File)
Mar 17 2025, 3:21 AM
Unknown Object (File)
Mar 7 2025, 9:21 PM
Unknown Object (File)
Feb 25 2025, 4:43 PM
View All Files
Subscribers
tomek

Details

Reviewers
atul
Commits
rCOMMe0b25fd939a9: [keyserver][lib] Add sidebarCreation to keyserver message creation endpoints
Summary

This makes it possible for a client to set this flag in MessageData to disable notifs.

Depends on D6798

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
keyserver/
src/
responders/
11 lines
lib/
shared/
29 lines
types/
3 lines

Diff 22836

View Options

keyserver/src/responders/message-responders.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/message-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

lib/types/message-types.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;