gab-social/app/javascript/gabsocial/components/notification.js

196 lines
6.3 KiB
JavaScript
Raw Normal View History

import React from 'react'
import PropTypes from 'prop-types'
2020-03-04 03:45:16 +00:00
import { NavLink } from 'react-router-dom'
import { injectIntl, defineMessages } from 'react-intl'
2020-03-02 22:26:25 +00:00
import ImmutablePureComponent from 'react-immutable-pure-component'
import ImmutablePropTypes from 'react-immutable-proptypes'
2020-05-01 06:50:27 +01:00
import { me } from '../initial_state'
import {
CX,
BREAKPOINT_EXTRA_SMALL,
} from '../constants'
import Responsive from '../features/ui/util/responsive_component'
2020-04-24 04:17:27 +01:00
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'
2020-04-24 04:17:27 +01:00
import DisplayName from './display_name'
2020-03-04 03:45:16 +00:00
2020-03-02 22:26:25 +00:00
class Notification extends ImmutablePureComponent {
static contextTypes = {
router: PropTypes.object,
}
2020-04-11 23:29:19 +01:00
render() {
2020-04-28 06:33:58 +01:00
const {
intl,
accounts,
createdAt,
type,
statusId,
isHidden,
isUnread,
2020-04-28 06:33:58 +01:00
} = this.props
2020-04-11 23:29:19 +01:00
const count = !!accounts ? accounts.size : 0
2020-04-03 02:05:49 +01:00
2020-04-11 23:29:19 +01:00
let message
let icon
2020-04-11 23:29:19 +01:00
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':
2020-05-01 06:50:27 +01:00
let msg = messages.poll
if (accounts.size === 1) {
if (accounts.first().get('id') === me) {
msg = messages.ownPoll
}
}
2020-04-11 23:29:19 +01:00
icon = 'poll'
2020-05-01 06:50:27 +01:00
message = intl.formatMessage(msg)
2020-04-11 23:29:19 +01:00
break
default:
return null
}
2020-04-03 02:05:49 +01:00
2020-04-28 06:33:58 +01:00
if (isHidden) {
return (
<React.Fragment>
{
accounts && accounts.slice(0, 1).map((account, i) => (
<DisplayName key={i} account={account} noUsername />
))
}
{message}
</React.Fragment>
)
2020-04-28 06:33:58 +01:00
}
const containerClasses = CX({
d: 1,
px10: 1,
cursorPointer: 1,
bgSubtle_onHover: !isUnread,
highlightedComment: isUnread,
})
2020-04-03 02:05:49 +01:00
return (
<div
className={containerClasses}
tabIndex='0'
aria-label={`${message} ${createdAt}`}
>
<div className={[_s.d, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
<div className={[_s.d, _s.flexRow, _s.my10, _s.py10, _s.px10].join(' ')}>
2020-03-04 03:45:16 +00:00
<Responsive min={BREAKPOINT_EXTRA_SMALL}>
<Icon id={icon} size='20px' className={[_s.cPrimary, _s.minW20PX, _s.mt5, _s.mr15].join(' ')} />
</Responsive>
2020-04-03 02:05:49 +01:00
<div className={[_s.d, _s.flexNormal].join(' ')}>
<div className={[_s.d, _s.flexRow, _s.flexWrap].join(' ')}>
2020-04-03 02:05:49 +01:00
{
accounts && accounts.map((account, i) => (
2020-04-03 02:05:49 +01:00
<NavLink
to={`/${account.get('acct')}`}
key={`fav-avatar-${i}`}
className={[_s.mr5, _s.mb5].join(' ')}
2020-04-03 02:05:49 +01:00
>
<Avatar size={34} account={account} />
2020-04-03 02:05:49 +01:00
</NavLink>
))
}
</div>
<div className={[_s.d, _s.pt5].join(' ')}>
<div className={[_s.d, _s.flexRow, _s.aiEnd].join(' ')}>
2020-04-03 02:05:49 +01:00
<div className={_s.text}>
{
accounts && accounts.slice(0, 1).map((account, i) => (
2020-04-03 02:05:49 +01:00
<DisplayName key={i} account={account} noUsername />
))
}
</div>
<Text size='medium'>
{' '}
2020-04-11 23:29:19 +01:00
{message}
2020-04-03 02:05:49 +01:00
</Text>
{
!!createdAt &&
<React.Fragment>
<DotTextSeperator />
<Text size='small' color='tertiary' className={_s.ml5}>
<RelativeTimestamp timestamp={createdAt} />
</Text>
</React.Fragment>
}
2020-04-03 02:05:49 +01:00
</div>
</div>
2020-04-11 23:29:19 +01:00
{
!!statusId &&
<div className={[_s.d, _s.pt10, _s.mt5].join(' ')}>
2020-04-11 23:29:19 +01:00
<StatusContainer
2020-05-05 06:16:01 +01:00
contextType='notification'
2020-04-11 23:29:19 +01:00
id={statusId}
isChild
2020-05-14 07:03:22 +01:00
isNotification
2020-04-11 23:29:19 +01:00
/>
2020-03-04 03:45:16 +00:00
</div>
2020-04-11 23:29:19 +01:00
}
2020-03-04 03:45:16 +00:00
</div>
2020-03-02 22:26:25 +00:00
2020-03-04 03:45:16 +00:00
</div>
</div>
2020-04-03 02:05:49 +01:00
</div>
2020-03-04 03:45:16 +00:00
)
2020-03-02 22:26:25 +00:00
}
}
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,
}
export default injectIntl(Notification)