diff --git a/web/chat/inline-engagement.react.js b/web/chat/inline-engagement.react.js index ac8d85639..9b709ea34 100644 --- a/web/chat/inline-engagement.react.js +++ b/web/chat/inline-engagement.react.js @@ -1,120 +1,117 @@ // @flow import classNames from 'classnames'; import * as React from 'react'; import { useModalContext } from 'lib/components/modal-provider.react.js'; import type { ReactionInfo } from 'lib/selectors/chat-selectors.js'; import { getInlineEngagementSidebarText } from 'lib/shared/inline-engagement-utils.js'; import type { ThreadInfo } from 'lib/types/thread-types.js'; import css from './inline-engagement.css'; import CommIcon from '../CommIcon.react.js'; import MessageReactionsModal from '../modals/chat/message-reactions-modal.react.js'; import { useOnClickThread } from '../selectors/thread-selectors.js'; type Props = { +sidebarThreadInfo: ?ThreadInfo, - +reactions?: ReactionInfo, + +reactions: ReactionInfo, +positioning: 'left' | 'center' | 'right', +label?: ?string, }; function InlineEngagement(props: Props): React.Node { const { sidebarThreadInfo, reactions, positioning, label } = props; const { pushModal, popModal } = useModalContext(); const isLeft = positioning === 'left'; const labelClasses = classNames({ [css.messageLabel]: true, [css.messageLabelLeft]: isLeft, [css.messageLabelRight]: !isLeft, }); const editedLabel = React.useMemo(() => { if (!label) { return null; } return (
{label}
); }, [label, labelClasses]); const onClickSidebarInner = useOnClickThread(sidebarThreadInfo); const onClickSidebar = React.useCallback( (event: SyntheticEvent) => { popModal(); onClickSidebarInner(event); }, [popModal, onClickSidebarInner], ); const repliesText = getInlineEngagementSidebarText(sidebarThreadInfo); const sidebarItem = React.useMemo(() => { if (!sidebarThreadInfo || !repliesText) { return null; } return ( {repliesText} ); }, [sidebarThreadInfo, repliesText, onClickSidebar]); const onClickReaction = React.useCallback( (event: SyntheticEvent) => { event.preventDefault(); - if (!reactions) { - return; - } pushModal( , ); }, [popModal, pushModal, reactions], ); const reactionsList = React.useMemo(() => { - if (!reactions || Object.keys(reactions).length === 0) { + if (Object.keys(reactions).length === 0) { return null; } return Object.keys(reactions).map(reaction => { const numOfReacts = reactions[reaction].users.length; return ( {`${reaction} ${numOfReacts}`} ); }); }, [reactions, onClickReaction]); const containerClasses = classNames([ css.inlineEngagementContainer, { [css.leftContainer]: positioning === 'left', [css.centerContainer]: positioning === 'center', [css.rightContainer]: positioning === 'right', }, ]); return (
{editedLabel} {sidebarItem} {reactionsList}
); } export default InlineEngagement;