Differential D7196 Diff 24623 web/modals/chat/message-reactions-modal.react.js

Changeset View

Standalone View

web/modals/chat/message-reactions-modal.react.js

	// @flow			// @flow

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

	import type { ReactionInfo } from 'lib/selectors/chat-selectors.js';			import type { ReactionInfo } from 'lib/selectors/chat-selectors.js';
	import { useMessageReactionsList } from 'lib/shared/reaction-utils.js';			import { useMessageReactionsList } from 'lib/shared/reaction-utils.js';

	import css from './message-reactions-modal.css';			import css from './message-reactions-modal.css';
				import UserAvatar from '../../components/user-avatar.react.js';
	import Modal from '../modal.react.js';			import Modal from '../modal.react.js';

	type Props = {			type Props = {
	+onClose: () => void,			+onClose: () => void,
	+reactions: ReactionInfo,			+reactions: ReactionInfo,
	};			};

	function MessageReactionsModal(props: Props): React.Node {			function MessageReactionsModal(props: Props): React.Node {
	const { onClose, reactions } = props;			const { onClose, reactions } = props;

	const messageReactionsList = useMessageReactionsList(reactions);			const messageReactionsList = useMessageReactionsList(reactions);

	const reactionsList = React.useMemo(			const reactionsList = React.useMemo(
	() =>			() =>
	messageReactionsList.map(messageReactionUser => (			messageReactionsList.map(messageReactionUser => (
	<div key={messageReactionUser.id} className={css.userRowContainer}>			<div key={messageReactionUser.id} className={css.userRowContainer}>
	<div>{messageReactionUser.username}</div>			<div className={css.userInfoContainer}>
				<UserAvatar size="small" userID={messageReactionUser.id} />
				<div className={css.username}>{messageReactionUser.username}</div>
				</div>
	<div>{messageReactionUser.reaction}</div>			<div>{messageReactionUser.reaction}</div>
	</div>			</div>
	)),			)),
	[messageReactionsList],			[messageReactionsList],
	);			);

	return (			return (
	<Modal size="large" name="Reactions" onClose={onClose}>			<Modal size="large" name="Reactions" onClose={onClose}>
	<div className={css.modalContentContainer}>{reactionsList}</div>			<div className={css.modalContentContainer}>{reactionsList}</div>
	</Modal>			</Modal>
	);			);
	}			}

	export default MessageReactionsModal;			export default MessageReactionsModal;