Changeset View
Changeset View
Standalone View
Standalone View
web/chat/inline-engagement.react.js
Show All 12 Lines | |||||
import CommIcon from '../CommIcon.react.js'; | import CommIcon from '../CommIcon.react.js'; | ||||
import MessageReactionsModal from '../modals/chat/message-reactions-modal.react.js'; | import MessageReactionsModal from '../modals/chat/message-reactions-modal.react.js'; | ||||
import { useOnClickThread } from '../selectors/thread-selectors.js'; | import { useOnClickThread } from '../selectors/thread-selectors.js'; | ||||
type Props = { | type Props = { | ||||
+threadInfo: ?ThreadInfo, | +threadInfo: ?ThreadInfo, | ||||
+reactions?: ReactionInfo, | +reactions?: ReactionInfo, | ||||
+positioning: 'left' | 'center' | 'right', | +positioning: 'left' | 'center' | 'right', | ||||
+label?: ?string, | |||||
ginsu: I think this can just be this | |||||
ginsuUnsubmitted Done Inline ActionsAfter reading D7018 the type should be +label: ?string and not +label?: string ginsu: After reading D7018 the type should be `+label: ?string` and not `+label?: string` | |||||
kubaAuthorUnsubmitted Done Inline ActionsI believe that the property is optional, so it should have a label? (we don't want to pass null label i.g. in the RobotextMessage component). Should I change it and pass label={null} at each place it is used? kuba: I believe that the property is optional, so it should have a `label?` (we don't want to pass… | |||||
ginsuUnsubmitted Not Done Inline ActionsHey sorry this took me so long to reply... I did not consider RobotextMessage, but you are right! thanks for clarifying! ginsu: Hey sorry this took me so long to reply... I did not consider `RobotextMessage`, but you are… | |||||
}; | }; | ||||
function InlineEngagement(props: Props): React.Node { | function InlineEngagement(props: Props): React.Node { | ||||
const { threadInfo, reactions, positioning } = props; | const { threadInfo, reactions, positioning, label } = props; | ||||
const { pushModal, popModal } = useModalContext(); | const { pushModal, popModal } = useModalContext(); | ||||
const repliesText = useInlineEngagementText(threadInfo); | const repliesText = useInlineEngagementText(threadInfo); | ||||
const containerClasses = classNames([ | const containerClasses = classNames([ | ||||
css.inlineEngagementContainer, | css.inlineEngagementContainer, | ||||
{ | { | ||||
[css.leftContainer]: positioning === 'left', | [css.leftContainer]: positioning === 'left', | ||||
[css.centerContainer]: positioning === 'center', | [css.centerContainer]: positioning === 'center', | ||||
▲ Show 20 Lines • Show All 50 Lines • ▼ Show 20 Lines | const reactionsList = React.useMemo(() => { | ||||
return ( | return ( | ||||
<a onClick={onClickReactions} className={reactionsContainerClasses}> | <a onClick={onClickReactions} className={reactionsContainerClasses}> | ||||
{reactionText} | {reactionText} | ||||
</a> | </a> | ||||
); | ); | ||||
}, [reactions, onClickReactions, reactionsContainerClasses]); | }, [reactions, onClickReactions, reactionsContainerClasses]); | ||||
const isLeft = positioning === 'left'; | |||||
const messageLabel = React.useMemo(() => { | |||||
if (!label) { | |||||
return null; | |||||
} | |||||
const labelClasses = classNames({ | |||||
[css.messageLabel]: true, | |||||
[css.messageLabelLeft]: isLeft, | |||||
[css.messageLabelRight]: !isLeft, | |||||
[css.onlyMessageLabel]: !sidebarItem && !reactionsList, | |||||
}); | |||||
ginsuUnsubmitted Done Inline ActionsWe can move this outside the useMemo hook ginsu: We can move this outside the useMemo hook | |||||
return ( | |||||
<div className={labelClasses}> | |||||
<span>{label}</span> | |||||
</div> | |||||
); | |||||
}, [isLeft, label, reactionsList, sidebarItem]); | |||||
return ( | return ( | ||||
<div className={containerClasses}> | <div className={containerClasses}> | ||||
{isLeft && messageLabel} | |||||
ginsuUnsubmitted Done Inline ActionsWe shouldn't use ternary conditions inside JSX https://www.notion.so/commapp/Use-ternary-conditionals-sparingly-f4ba44a10259403592a1d15440a9847e ginsu: We shouldn't use ternary conditions inside JSX
https://www.notion.so/commapp/Use-ternary… | |||||
{sidebarItem} | {sidebarItem} | ||||
{reactionsList} | {reactionsList} | ||||
{!isLeft && messageLabel} | |||||
</div> | </div> | ||||
); | ); | ||||
} | } | ||||
export default InlineEngagement; | export default InlineEngagement; |
I think this can just be this