import React from 'react' import PropTypes from 'prop-types' import { NavLink } from 'react-router-dom' import { injectIntl, defineMessages } from 'react-intl' import ImmutablePureComponent from 'react-immutable-pure-component' import ImmutablePropTypes from 'react-immutable-proptypes' import { me } from '../initial_state' import { CX, BREAKPOINT_EXTRA_SMALL, } from '../constants' import Responsive from '../features/ui/util/responsive_component' import StatusContainer from '../containers/status_container' import Avatar from './avatar' import Icon from './icon' import Text from './text' import DotTextSeperator from './dot_text_seperator' import RelativeTimestamp from './relative_timestamp' import DisplayName from './display_name' class Notification extends ImmutablePureComponent { static contextTypes = { router: PropTypes.object, } render() { const { intl, accounts, createdAt, type, statusId, isHidden, isUnread, isDeckConnected, } = this.props const count = !!accounts ? accounts.size : 0 let message let icon switch (type) { case 'follow': icon = 'group' message = intl.formatMessage(count > 1 ? messages.followedYouMultiple : messages.followedYouOne, { count: count - 1, }) break case 'mention': icon = 'comment' message = intl.formatMessage(messages.mentionedInPost) break case 'like': icon = 'like' message = intl.formatMessage(count > 1 ? messages.likedStatusMultiple : messages.likedStatusOne, { count: count - 1, }) break case 'repost': icon = 'repost' message = intl.formatMessage(count > 1 ? messages.repostedStatusMultiple : messages.repostedStatusOne, { count: count - 1, }) break case 'poll': let msg = messages.poll if (accounts.size === 1) { if (accounts.first().get('id') === me) { msg = messages.ownPoll } } icon = 'poll' message = intl.formatMessage(msg) break default: return null } if (isHidden) { return ( { accounts && accounts.slice(0, 1).map((account, i) => ( )) } {message} ) } const containerClasses = CX({ d: 1, px10: !isDeckConnected, cursorPointer: 1, bgSubtle_onHover: !isUnread, highlightedComment: isUnread, }) return (
{ !isDeckConnected && }
{ accounts && accounts.map((account, i) => ( )) }
{ accounts && accounts.slice(0, 1).map((account, i) => ( )) }
{' '} {message} { !!createdAt && }
{ !!statusId &&
}
) } } const messages = defineMessages({ poll: { id: 'notification.poll', defaultMessage: 'A poll you have voted in has ended' }, ownPoll: { id: 'notification.own_poll', defaultMessage: 'Your poll has ended' }, mentionedInPost: { id: 'mentioned_in_post', defaultMessage: 'mentioned you in their post' }, mentionedInComment: { id: 'mentioned_in_comment', defaultMessage: 'mentioned you in their comment' }, followedYouOne: { id: 'followed_you_one', defaultMessage: 'followed you' }, followedYouMultiple: { id: 'followed_you_multiple', defaultMessage: 'and {count} others followed you' }, likedStatusOne: { id: 'liked_status_one', defaultMessage: 'liked your status' }, likedStatusMultiple: { id: 'liked_status_multiple', defaultMessage: 'and {count} others liked your status' }, repostedStatusOne: { id: 'reposted_status_one', defaultMessage: 'reposted your status' }, repostedStatusMultiple: { id: 'reposted_status_multiple', defaultMessage: 'and {count} others reposted your status' }, }) Notification.propTypes = { intl: PropTypes.object.isRequired, accounts: ImmutablePropTypes.list.isRequired, createdAt: PropTypes.string, statusId: PropTypes.string, type: PropTypes.string.isRequired, isHidden: PropTypes.bool, isUnread: PropTypes.bool, isDeckConnected: PropTypes.bool, } export default injectIntl(Notification)