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

187 lines
5.6 KiB
JavaScript
Raw Normal View History

2020-03-08 23:02:28 +00:00
import { Fragment } from 'react'
import { NavLink } from 'react-router-dom'
import { defineMessages, injectIntl } from 'react-intl'
2020-05-04 19:44:37 +01:00
import ImmutablePropTypes from 'react-immutable-proptypes'
2020-03-08 23:02:28 +00:00
import ImmutablePureComponent from 'react-immutable-pure-component'
import Button from './button'
import DisplayName from './display_name'
import DotTextSeperator from './dot_text_seperator'
2020-05-05 06:16:01 +01:00
import Icon from './icon'
2020-03-08 23:02:28 +00:00
import RelativeTimestamp from './relative_timestamp'
import Text from './text'
2020-05-04 19:44:37 +01:00
const messages = defineMessages({
edited: { id: 'status.edited', defaultMessage: 'Edited' },
likesLabel: { id: 'likes.label', defaultMessage: '{number, plural, one {# like} other {# likes}}' },
repostsLabel: { id: 'reposts.label', defaultMessage: '{number, plural, one {# repost} other {# reposts}}' },
2020-05-07 00:40:54 +01:00
original: { id: 'original_gabber', defaultMessage: 'Original Gabber' },
2020-05-04 19:44:37 +01:00
})
2020-03-08 23:02:28 +00:00
export default
@injectIntl
class CommentHeader extends ImmutablePureComponent {
static propTypes = {
2020-05-04 19:44:37 +01:00
intl: PropTypes.object.isRequired,
2020-05-05 06:16:01 +01:00
ancestorAccountId: PropTypes.string.isRequired,
2020-03-08 23:02:28 +00:00
status: ImmutablePropTypes.map.isRequired,
2020-05-07 00:40:54 +01:00
onOpenLikes: PropTypes.func.isRequired,
onOpenReposts: PropTypes.func.isRequired,
onOpenRevisions: PropTypes.func.isRequired,
2020-05-04 19:44:37 +01:00
}
openLikesList = () => {
this.props.onOpenLikes(this.props.status)
}
openRepostsList = () => {
this.props.onOpenReposts(this.props.status)
2020-03-08 23:02:28 +00:00
}
2020-05-07 00:40:54 +01:00
openRevisions = () => {
this.props.onOpenRevisions(this.props.status)
}
2020-03-08 23:02:28 +00:00
render() {
2020-05-04 19:44:37 +01:00
const {
intl,
status,
2020-05-05 06:16:01 +01:00
ancestorAccountId,
2020-05-04 19:44:37 +01:00
} = this.props
2020-03-08 23:02:28 +00:00
2020-05-05 06:16:01 +01:00
if (!status) return null
2020-04-08 04:22:24 +01:00
const repostCount = status.get('reblogs_count')
const favoriteCount = status.get('favourites_count')
2020-03-08 23:02:28 +00:00
const statusUrl = `/${status.getIn(['account', 'acct'])}/posts/${status.get('id')}`;
2020-05-05 06:16:01 +01:00
const isOwner = ancestorAccountId === status.getIn(['account', 'id'])
2020-03-08 23:02:28 +00:00
return (
2020-05-07 00:40:54 +01:00
<div className={[_s.default, _s.alignItemsStart, _s.py2, _s.maxWidth100PC, _s.flexGrow1].join(' ')}>
2020-03-08 23:02:28 +00:00
2020-05-14 07:03:22 +01:00
<div className={[_s.default, _s.flexRow, _s.flexWrap, _s.overflowHidden, _s.width100PC, _s.maxWidth100PC, _s.alignItemsCenter].join(' ')}>
2020-03-08 23:02:28 +00:00
<NavLink
className={[_s.default, _s.flexRow, _s.alignItemsStart, _s.noUnderline].join(' ')}
to={`/${status.getIn(['account', 'acct'])}`}
title={status.getIn(['account', 'acct'])}
>
2020-05-07 00:40:54 +01:00
<DisplayName
account={status.get('account')}
isSmall
isComment
/>
2020-03-08 23:02:28 +00:00
</NavLink>
2020-05-05 06:16:01 +01:00
{
isOwner &&
<div className={[_s.default, _s.alignItemsCenter, _s.ml5].join(' ')}>
<span className={_s.visiblyHidden}>
2020-05-07 00:40:54 +01:00
{intl.formatMessage(messages.original)}
2020-05-05 06:16:01 +01:00
</span>
<Icon id='mic' size='10px' className={_s.fillBrand} />
</div>
}
2020-05-07 00:40:54 +01:00
{
!!status.get('group') &&
<Fragment>
<DotTextSeperator />
<Button
isText
underlineOnHover
backgroundColor='none'
color='tertiary'
to={`/groups/${status.getIn(['group', 'id'])}`}
className={_s.ml5}
>
<Text size='extraSmall' color='inherit'>
{status.getIn(['group', 'title'])}
</Text>
</Button>
</Fragment>
}
2020-03-08 23:02:28 +00:00
{
status.get('revised_at') !== null &&
<Fragment>
<DotTextSeperator />
<Button
2020-04-23 07:13:29 +01:00
isText
2020-03-08 23:02:28 +00:00
underlineOnHover
backgroundColor='none'
color='tertiary'
2020-05-07 00:40:54 +01:00
onClick={this.openRevisions}
2020-03-11 23:56:18 +00:00
className={_s.ml5}
2020-03-08 23:02:28 +00:00
>
<Text size='extraSmall' color='inherit'>
2020-05-04 19:44:37 +01:00
{intl.formatMessage(messages.edited)}
2020-03-08 23:02:28 +00:00
</Text>
</Button>
</Fragment>
}
{
favoriteCount > 0 &&
<Fragment>
<DotTextSeperator />
<Button
2020-04-23 07:13:29 +01:00
isText
2020-03-08 23:02:28 +00:00
underlineOnHover
backgroundColor='none'
color='tertiary'
2020-03-11 23:56:18 +00:00
className={_s.ml5}
2020-05-04 19:44:37 +01:00
onClick={this.openLikesList}
2020-03-08 23:02:28 +00:00
>
<Text size='extraSmall' color='inherit'>
2020-05-04 19:44:37 +01:00
{intl.formatMessage(messages.likesLabel, {
number: favoriteCount,
})}
2020-03-08 23:02:28 +00:00
</Text>
</Button>
</Fragment>
}
{
repostCount > 0 &&
<Fragment>
<DotTextSeperator />
<Button
2020-04-23 07:13:29 +01:00
isText
2020-03-08 23:02:28 +00:00
underlineOnHover
backgroundColor='none'
color='tertiary'
2020-03-11 23:56:18 +00:00
className={_s.ml5}
2020-05-04 19:44:37 +01:00
onClick={this.openRepostsList}
2020-03-08 23:02:28 +00:00
>
<Text size='extraSmall' color='inherit'>
2020-05-04 19:44:37 +01:00
{intl.formatMessage(messages.repostsLabel, {
number: repostCount,
})}
2020-03-08 23:02:28 +00:00
</Text>
</Button>
</Fragment>
}
<DotTextSeperator />
<Button
2020-04-23 07:13:29 +01:00
isText
2020-03-08 23:02:28 +00:00
underlineOnHover
backgroundColor='none'
color='tertiary'
to={statusUrl}
2020-03-11 23:56:18 +00:00
className={_s.ml5}
2020-03-08 23:02:28 +00:00
>
<Text size='extraSmall' color='inherit'>
<RelativeTimestamp timestamp={status.get('created_at')} />
</Text>
</Button>
</div>
</div>
)
}
}