diff --git a/lib/hooks/inline-sidebar-text.react.js b/lib/hooks/inline-sidebar-text.react.js index 8507c32a4..d7a6d2a65 100644 --- a/lib/hooks/inline-sidebar-text.react.js +++ b/lib/hooks/inline-sidebar-text.react.js @@ -1,45 +1,13 @@ // @flow -import * as React from 'react'; - -import { relativeMemberInfoSelectorForMembersOfThread } from '../selectors/user-selectors'; -import { stringForUser } from '../shared/user-utils'; import type { ThreadInfo } from '../types/thread-types'; -import { useSelector } from '../utils/redux-utils'; -import { pluralizeAndTrim } from '../utils/text-utils'; - -function useInlineSidebarText( - threadInfo: ?ThreadInfo, -): { - sendersText: string, - repliesText: string, -} { - const threadMembers = useSelector( - relativeMemberInfoSelectorForMembersOfThread(threadInfo?.id), - ); - const sendersText = React.useMemo(() => { - const senders = threadMembers - .filter(member => member.isSender) - .map(stringForUser); - return senders.length > 0 ? `${pluralizeAndTrim(senders, 25)} sent ` : ''; - }, [threadMembers]); - - const noThreadInfo = !threadInfo; - - return React.useMemo(() => { - if (noThreadInfo) { - return { sendersText: '', repliesText: '' }; - } - const repliesCount = threadInfo?.repliesCount || 1; - const repliesText = `${repliesCount} ${ - repliesCount > 1 ? 'replies' : 'reply' - }`; - return { - sendersText, - repliesText, - }; - }, [noThreadInfo, sendersText, threadInfo?.repliesCount]); +function useInlineSidebarText(threadInfo: ?ThreadInfo): string { + if (!threadInfo) { + return ''; + } + const repliesCount = threadInfo.repliesCount || 1; + return `${repliesCount} ${repliesCount > 1 ? 'replies' : 'reply'}`; } export default useInlineSidebarText; diff --git a/native/chat/inline-sidebar.react.js b/native/chat/inline-sidebar.react.js index f5b800e6a..17faf3a15 100644 --- a/native/chat/inline-sidebar.react.js +++ b/native/chat/inline-sidebar.react.js @@ -1,208 +1,208 @@ // @flow import * as React from 'react'; import { Text, View } from 'react-native'; import Animated, { Extrapolate, interpolateNode, } from 'react-native-reanimated'; import useInlineSidebarText from 'lib/hooks/inline-sidebar-text.react'; import type { MessageReactionInfo } from 'lib/selectors/chat-selectors'; import { stringForReactionList } from 'lib/shared/reaction-utils'; import type { ThreadInfo } from 'lib/types/thread-types'; import CommIcon from '../components/comm-icon.react'; import GestureTouchableOpacity from '../components/gesture-touchable-opacity.react'; import { useStyles } from '../themes/colors'; import type { ChatMessageInfoItemWithHeight } from '../types/chat-types'; import { inlineSidebarStyle, inlineSidebarCenterStyle, inlineSidebarRightStyle, composedMessageStyle, } from './chat-constants'; import { useNavigateToThread } from './message-list-types'; type Props = { +threadInfo: ?ThreadInfo, +reactions?: $ReadOnlyMap, +disabled?: boolean, }; function InlineSidebar(props: Props): React.Node { const { disabled = false, reactions, threadInfo } = props; - const { repliesText } = useInlineSidebarText(threadInfo); + const repliesText = useInlineSidebarText(threadInfo); const navigateToThread = useNavigateToThread(); const onPress = React.useCallback(() => { if (threadInfo && !disabled) { navigateToThread({ threadInfo }); } }, [disabled, navigateToThread, threadInfo]); const styles = useStyles(unboundStyles); const reactionList = React.useMemo(() => { if (!reactions || reactions.size === 0) { return null; } const reactionText = stringForReactionList(reactions); const reactionItems = {reactionText}; return {reactionItems}; }, [reactions, styles.reaction, styles.reactionsContainer]); const unreadStyle = threadInfo?.currentUser.unread ? styles.unread : null; const marginRight = reactionList ? styles.repliesMarginRight : null; const repliesStyles = React.useMemo( () => [marginRight, styles.repliesText, unreadStyle], [marginRight, styles.repliesText, unreadStyle], ); const noThreadInfo = !threadInfo; const sidebarInfo = React.useMemo(() => { if (noThreadInfo) { return null; } return ( <> {repliesText} ); }, [noThreadInfo, styles.icon, repliesStyles, repliesText]); return ( {sidebarInfo} {reactionList} ); } const unboundStyles = { container: { flexDirection: 'row', height: inlineSidebarStyle.height, display: 'flex', borderRadius: 16, }, unread: { color: 'listForegroundLabel', fontWeight: 'bold', }, sidebar: { flexDirection: 'row', display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: 'inlineSidebarBackground', padding: 8, borderRadius: 16, height: inlineSidebarStyle.height, }, icon: { color: 'inlineSidebarLabel', marginRight: 4, }, repliesText: { color: 'inlineSidebarLabel', fontSize: 14, lineHeight: 22, }, repliesMarginRight: { marginRight: 12, }, reaction: { marginLeft: 4, color: 'inlineSidebarLabel', }, reactionsContainer: { display: 'flex', flexDirection: 'row', marginLeft: -4, }, }; type TooltipInlineSidebarProps = { +item: ChatMessageInfoItemWithHeight, +isOpeningSidebar: boolean, +progress: Animated.Node, +windowWidth: number, +positioning: 'left' | 'right' | 'center', +initialCoordinates: { +x: number, +y: number, +width: number, +height: number, }, }; function TooltipInlineSidebar(props: TooltipInlineSidebarProps): React.Node { const { item, isOpeningSidebar, progress, windowWidth, initialCoordinates, positioning, } = props; const inlineSidebarStyles = React.useMemo(() => { if (positioning === 'left') { return { position: 'absolute', top: inlineSidebarStyle.marginTop + inlineSidebarRightStyle.topOffset, left: composedMessageStyle.marginLeft, }; } else if (positioning === 'right') { return { position: 'absolute', right: inlineSidebarRightStyle.marginRight + composedMessageStyle.marginRight, top: inlineSidebarStyle.marginTop + inlineSidebarRightStyle.topOffset, }; } else if (positioning === 'center') { return { alignSelf: 'center', top: inlineSidebarCenterStyle.topOffset, }; } }, [positioning]); const inlineSidebarContainer = React.useMemo(() => { const opacity = isOpeningSidebar ? 0 : interpolateNode(progress, { inputRange: [0, 1], outputRange: [1, 0], extrapolate: Extrapolate.CLAMP, }); return { position: 'absolute', width: windowWidth, top: initialCoordinates.height, left: -initialCoordinates.x, opacity, }; }, [ initialCoordinates.height, initialCoordinates.x, isOpeningSidebar, progress, windowWidth, ]); return ( ); } export { InlineSidebar, TooltipInlineSidebar }; diff --git a/web/chat/inline-sidebar.react.js b/web/chat/inline-sidebar.react.js index c5dcbb3d6..ebe8013c3 100644 --- a/web/chat/inline-sidebar.react.js +++ b/web/chat/inline-sidebar.react.js @@ -1,73 +1,73 @@ // @flow import classNames from 'classnames'; import * as React from 'react'; import useInlineSidebarText from 'lib/hooks/inline-sidebar-text.react'; import type { MessageReactionInfo } from 'lib/selectors/chat-selectors'; import { stringForReactionList } from 'lib/shared/reaction-utils'; import type { ThreadInfo } from 'lib/types/thread-types'; import CommIcon from '../CommIcon.react'; import { useOnClickThread } from '../selectors/thread-selectors'; import css from './inline-sidebar.css'; type Props = { +threadInfo: ?ThreadInfo, +reactions?: $ReadOnlyMap, +positioning: 'left' | 'center' | 'right', }; function InlineSidebar(props: Props): React.Node { const { threadInfo, positioning, reactions } = props; - const inlineSidebarText = useInlineSidebarText(threadInfo); + const repliesText = useInlineSidebarText(threadInfo); const containerClasses = classNames([ css.inlineSidebarContainer, { [css.leftContainer]: positioning === 'left', [css.centerContainer]: positioning === 'center', [css.rightContainer]: positioning === 'right', }, ]); const reactionsList = React.useMemo(() => { if (!reactions || reactions.size === 0) { return null; } const reactionText = stringForReactionList(reactions); return
{reactionText}
; }, [reactions]); const onClick = useOnClickThread(threadInfo); const threadInfoExists = !!threadInfo; const sidebarItem = React.useMemo(() => { - if (!threadInfoExists || !inlineSidebarText) { + if (!threadInfoExists || !repliesText) { return null; } return (
- {inlineSidebarText.repliesText} + {repliesText}
); - }, [threadInfoExists, inlineSidebarText]); + }, [threadInfoExists, repliesText]); return (
{sidebarItem} {reactionsList}
); } export default InlineSidebar;