Differential D10419 Diff 36183 web/tooltips/reaction-tooltip.react.js

Changeset View

Standalone View

web/tooltips/reaction-tooltip.react.js

	// @flow			// @flow

	import * as React from 'react';			import * as React from 'react';

	import { useModalContext } from 'lib/components/modal-provider.react.js';			import { useModalContext } from 'lib/components/modal-provider.react.js';
				import { useENSNames } from 'lib/hooks/ens-cache.js';
	import type { ReactionInfo } from 'lib/selectors/chat-selectors';			import type { ReactionInfo } from 'lib/selectors/chat-selectors';

	import css from './reaction-tooltip.css';			import css from './reaction-tooltip.css';
	import {			import {
	tooltipLabelStyle,			tooltipLabelStyle,
	reactionTooltipStyle,			reactionTooltipStyle,
	reactionSeeMoreLabel,			reactionSeeMoreLabel,
	reactionSeeMoreLabelStyle,			reactionSeeMoreLabelStyle,
	} from './tooltip-constants.js';			} from './tooltip-constants.js';
	import MessageReactionsModal from '../modals/chat/message-reactions-modal.react.js';			import MessageReactionsModal from '../modals/chat/message-reactions-modal.react.js';

				const useENSNamesOptions = { allAtOnce: true };

	type Props = {			type Props = {
	+reactions: ReactionInfo,			+reactions: ReactionInfo,
	+reaction: string,			+reaction: string,
	};			};

	function ReactionTooltip(props: Props): React.Node {			function ReactionTooltip(props: Props): React.Node {
	const { reactions, reaction } = props;			const { reactions, reaction } = props;
				const { users } = reactions[reaction];

	const { pushModal, popModal } = useModalContext();			const { pushModal, popModal } = useModalContext();

	const onClickReactionTooltip = React.useCallback(			const onClickReactionTooltip = React.useCallback(
	(event: SyntheticEvent<HTMLElement>) => {			(event: SyntheticEvent<HTMLElement>) => {
	event.preventDefault();			event.preventDefault();

	pushModal(			pushModal(
	<MessageReactionsModal onClose={popModal} reactions={reactions} />,			<MessageReactionsModal onClose={popModal} reactions={reactions} />,
	);			);
	},			},
	[popModal, pushModal, reactions],			[popModal, pushModal, reactions],
	);			);

	const usernames = React.useMemo(() => {			const resolvedUsers = useENSNames(users, useENSNamesOptions);
	const { users } = reactions[reaction];

	return users.map(user => (			const usernames = React.useMemo(() => {
				return resolvedUsers.map(user => (
	<p			<p
	key={user.id}			key={user.id}
	className={css.usernameText}			className={css.usernameText}
	style={{ height: tooltipLabelStyle.height }}			style={{ height: tooltipLabelStyle.height }}
	>			>
	{user.username}			{user.username}
	</p>			</p>
	));			));
	}, [reaction, reactions]);			}, [resolvedUsers]);

	let seeMoreText;			let seeMoreText;
	if (usernames && usernames.length > 5) {			if (usernames && usernames.length > 5) {
	seeMoreText = (			seeMoreText = (
	<p			<p
	className={css.seeMoreText}			className={css.seeMoreText}
	style={{ height: reactionSeeMoreLabelStyle.height }}			style={{ height: reactionSeeMoreLabelStyle.height }}
	>			>
	Show All 18 Lines