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

189 lines
5.7 KiB
JavaScript
Raw Normal View History

import React from 'react'
import PropTypes from 'prop-types'
2020-03-08 23:02:28 +00:00
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 { me } from '../initial_state'
2020-03-08 23:02:28 +00:00
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'
class CommentHeader extends ImmutablePureComponent {
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'])
const myComment = status.getIn(['account', 'id']) === me
2020-03-08 23:02:28 +00:00
return (
<div className={[_s.d, _s.aiStart, _s.py2, _s.maxW100PC, _s.flexGrow1].join(' ')}>
2020-03-08 23:02:28 +00:00
<div className={[_s.d, _s.flexRow, _s.flexWrap, _s.overflowHidden, _s.w100PC, _s.maxW100PC, _s.aiCenter].join(' ')}>
2020-03-08 23:02:28 +00:00
<NavLink
className={[_s.d, _s.flexRow, _s.aiStart, _s.noUnderline].join(' ')}
2020-03-08 23:02:28 +00:00
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.d, _s.aiCenter, _s.ml5].join(' ')}>
2020-05-05 06:16:01 +01:00
<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.cBrand} />
2020-05-05 06:16:01 +01:00
</div>
}
2020-05-07 00:40:54 +01:00
{
!!status.get('group') &&
<React.Fragment>
2020-05-07 00:40:54 +01:00
<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>
</React.Fragment>
2020-05-07 00:40:54 +01:00
}
2020-03-08 23:02:28 +00:00
{
status.get('revised_at') !== null &&
<React.Fragment>
2020-03-08 23:02:28 +00:00
<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>
</React.Fragment>
2020-03-08 23:02:28 +00:00
}
{
favoriteCount > 0 &&
<React.Fragment>
2020-03-08 23:02:28 +00:00
<DotTextSeperator />
<Button
2020-04-23 07:13:29 +01:00
isText
underlineOnHover={myComment}
2020-03-08 23:02:28 +00:00
backgroundColor='none'
color='tertiary'
2020-03-11 23:56:18 +00:00
className={_s.ml5}
onClick={myComment ? this.openLikesList : undefined}
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>
</React.Fragment>
2020-03-08 23:02:28 +00:00
}
{
repostCount > 0 &&
<React.Fragment>
2020-03-08 23:02:28 +00:00
<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>
</React.Fragment>
2020-03-08 23:02:28 +00:00
}
<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>
)
}
}
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}}' },
original: { id: 'original_gabber', defaultMessage: 'Original Gabber' },
})
CommentHeader.propTypes = {
intl: PropTypes.object.isRequired,
ancestorAccountId: PropTypes.string.isRequired,
status: ImmutablePropTypes.map.isRequired,
onOpenLikes: PropTypes.func.isRequired,
onOpenReposts: PropTypes.func.isRequired,
onOpenRevisions: PropTypes.func.isRequired,
}
export default injectIntl(CommentHeader)