import React from 'react' import PropTypes from 'prop-types' import { getHueForUserId } from '../../../shared/utils/colors' import MessageContent from './message-content' function Message({ message, userId }) { function hue(user) { return user ? getHueForUserId(user.id, userId) : 0 } function getMessageStyle(user) { return { borderColor: `hsl(${hue(user)}, 85%, 40%)`, backgroundColor: `hsl(${hue(user)}, 85%, 40%`, } } function getArrowStyle(user) { return { borderColor: `hsl(${hue(user)}, 85%, 40%)`, } } const isMessageFromSelf = message.user ? message.user.id === userId : false return (
{!isMessageFromSelf && (
{message.user.first_name || message.user.email}
)}
{!isMessageFromSelf && (
)}
{message.contents.map((content, index) => ( ))}
) } Message.propTypes = { message: PropTypes.shape({ contents: PropTypes.arrayOf(PropTypes.string).isRequired, user: PropTypes.shape({ id: PropTypes.string, email: PropTypes.string, first_name: PropTypes.string, }), }), userId: PropTypes.string.isRequired, } export default Message