diff --git a/native/chat/message-reactions-modal.react.js b/native/chat/message-reactions-modal.react.js --- a/native/chat/message-reactions-modal.react.js +++ b/native/chat/message-reactions-modal.react.js @@ -1,9 +1,14 @@ // @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 { + View, + Text, + FlatList, + TouchableHighlight, + TouchableOpacity, +} from 'react-native'; import { SafeAreaView } from 'react-native-safe-area-context'; import type { ReactionInfo } from 'lib/selectors/chat-selectors.js'; @@ -12,8 +17,9 @@ 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 { type NavigationRoute } from '../navigation/route-names.js'; import { useColors, useStyles } from '../themes/colors.js'; +import { useNavigateToUserProfileBottomSheet } from '../user-profile/user-profile-utils.js'; export type MessageReactionsModalParams = { +reactions: ReactionInfo, @@ -24,30 +30,57 @@ +route: NavigationRoute<'MessageReactionsModal'>, }; function MessageReactionsModal(props: Props): React.Node { - const { reactions } = props.route.params; + const { navigation, route } = props; + + const { navigate, goBackOnce } = navigation; + const { reactions } = 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 navigateToUserProfileBottomSheet = + useNavigateToUserProfileBottomSheet(); + + const [selectedUserID, setSelectedUserID] = React.useState(); + + React.useEffect(() => { + return () => { + if (!selectedUserID) { + return; + } + navigateToUserProfileBottomSheet(selectedUserID); + }; + }, [navigate, navigateToUserProfileBottomSheet, selectedUserID]); + + const onPressUser = React.useCallback( + (userID: string) => { + setSelectedUserID(userID); + goBackOnce(); + }, + [goBackOnce, setSelectedUserID], + ); + const renderItem = React.useCallback( ({ item }) => ( - + onPressUser(item.id)} + key={item.id} + style={styles.reactionsListRowContainer} + > {item.username} {item.reaction} - + ), [ + onPressUser, styles.reactionsListReactionText, styles.reactionsListRowContainer, styles.reactionsListUserInfoContainer, @@ -69,7 +102,7 @@ All reactions