diff --git a/native/chat/message-reactions-modal.react.js b/native/chat/message-reactions-modal.react.js
index 91c7767e3..c93b0373e 100644
--- a/native/chat/message-reactions-modal.react.js
+++ b/native/chat/message-reactions-modal.react.js
@@ -1,151 +1,151 @@
// @flow
import Icon from '@expo/vector-icons/FontAwesome.js';
import { useNavigation } from '@react-navigation/native';
import * as React from 'react';
import { View, Text, FlatList, TouchableHighlight } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import type { ReactionInfo } from 'lib/selectors/chat-selectors.js';
import { useMessageReactionsList } from 'lib/shared/reaction-utils.js';
import UserAvatar from '../avatars/user-avatar.react.js';
import Modal from '../components/modal.react.js';
import type { RootNavigationProp } from '../navigation/root-navigator.react.js';
import type { NavigationRoute } from '../navigation/route-names.js';
import { useColors, useStyles } from '../themes/colors.js';
export type MessageReactionsModalParams = {
+reactions: ReactionInfo,
};
type Props = {
+navigation: RootNavigationProp<'MessageReactionsModal'>,
+route: NavigationRoute<'MessageReactionsModal'>,
};
function MessageReactionsModal(props: Props): React.Node {
const { reactions } = props.route.params;
const styles = useStyles(unboundStyles);
const colors = useColors();
const navigation = useNavigation();
const modalSafeAreaEdges = React.useMemo(() => ['top'], []);
const modalContainerSafeAreaEdges = React.useMemo(() => ['bottom'], []);
const close = React.useCallback(() => navigation.goBack(), [navigation]);
const reactionsListData = useMessageReactionsList(reactions);
const renderItem = React.useCallback(
({ item }) => (
{item.username}
{item.reaction}
),
[
styles.reactionsListReactionText,
styles.reactionsListRowContainer,
styles.reactionsListUserInfoContainer,
styles.reactionsListUsernameText,
],
);
const itemSeperator = React.useCallback(() => {
return ;
}, [styles.reactionsListItemSeperator]);
return (
- Reactions
+ All reactions
);
}
const unboundStyles = {
modalStyle: {
// we need to set each margin property explicitly to override
marginLeft: 0,
marginRight: 0,
marginBottom: 0,
marginTop: 0,
justifyContent: 'flex-end',
flex: 0,
borderWidth: 0,
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
},
modalContainerStyle: {
justifyContent: 'flex-end',
},
modalContentContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: 24,
marginTop: 8,
},
reactionsListContentContainer: {
paddingBottom: 16,
},
reactionsListTitleText: {
color: 'modalForegroundLabel',
fontSize: 18,
},
reactionsListRowContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
},
reactionsListUserInfoContainer: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
},
reactionsListUsernameText: {
color: 'modalForegroundLabel',
fontSize: 18,
marginLeft: 8,
},
reactionsListReactionText: {
fontSize: 18,
},
reactionsListItemSeperator: {
height: 16,
},
closeButton: {
borderRadius: 4,
width: 18,
height: 18,
alignItems: 'center',
},
closeIcon: {
color: 'modalBackgroundSecondaryLabel',
},
};
export default MessageReactionsModal;
diff --git a/web/modals/chat/message-reactions-modal.react.js b/web/modals/chat/message-reactions-modal.react.js
index b22ebb556..66b75d6c2 100644
--- a/web/modals/chat/message-reactions-modal.react.js
+++ b/web/modals/chat/message-reactions-modal.react.js
@@ -1,43 +1,43 @@
// @flow
import * as React from 'react';
import type { ReactionInfo } from 'lib/selectors/chat-selectors.js';
import { useMessageReactionsList } from 'lib/shared/reaction-utils.js';
import css from './message-reactions-modal.css';
import UserAvatar from '../../avatars/user-avatar.react.js';
import Modal from '../modal.react.js';
type Props = {
+onClose: () => void,
+reactions: ReactionInfo,
};
function MessageReactionsModal(props: Props): React.Node {
const { onClose, reactions } = props;
const messageReactionsList = useMessageReactionsList(reactions);
const reactionsList = React.useMemo(
() =>
messageReactionsList.map(messageReactionUser => (
{messageReactionUser.username}
{messageReactionUser.reaction}
)),
[messageReactionsList],
);
return (
-
+
{reactionsList}
);
}
export default MessageReactionsModal;