import React from 'react'; import PropTypes from 'prop-types'; import { Link } from 'react-router-dom'; import moment from 'moment'; import { UserType, MessageType } from './Types'; import Icon from './Icon'; import Avatar from './Avatar'; import { UserLink } from './UserInfo'; import { format } from '../utils/embed'; import './Message.css'; function Message({ data, visitor, children, ...rest }) { const isCode = (data.tags || []).indexOf('code') >= 0; return (
{data.photo &&

} {children}
); } export default React.memo(Message); function MessageContainer({ isCode, data }) { return isCode ? (
) : (

); } function Tags({ data, user, ...rest }) { return data.length > 0 && (

{ data.map(tag => { return ({tag}); }).reduce((prev, curr) => [prev, ', ', curr]) }
); } const TagsList = React.memo(Tags); function Recommends({ forMessage, ...rest }) { const { likes, recommendations } = forMessage; return recommendations && recommendations.length > 0 && (
{'❤️ by '} { recommendations.map(it => ( )).reduce((prev, curr) => [prev, ', ', curr]) } { likes > recommendations.length && ( and {likes - recommendations.length} others) }
) || null; } const Recommendations = React.memo(Recommends); Message.propTypes = { data: MessageType, visitor: UserType.isRequired, children: PropTypes.node }; MessageContainer.propTypes = { isCode: PropTypes.bool.isRequired, data: PropTypes.array.isRequired }; Tags.propTypes = { user: UserType.isRequired, data: PropTypes.array };