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

161 lines
4.6 KiB
JavaScript
Raw Normal View History

2020-03-04 03:45:16 +00:00
import { Fragment } from 'react'
import { NavLink } from 'react-router-dom'
import ImmutablePropTypes from 'react-immutable-proptypes'
import { defineMessages, injectIntl } from 'react-intl'
import ImmutablePureComponent from 'react-immutable-pure-component'
2020-03-08 23:02:28 +00:00
import { makeGetStatus } from '../selectors';
import CommentHeader from './comment_header'
2020-03-04 03:45:16 +00:00
import Avatar from './avatar'
import Button from './button'
2020-03-08 23:02:28 +00:00
import DisplayName from './display_name'
import DotTextSeperator from './dot_text_seperator'
import RelativeTimestamp from './relative_timestamp'
2020-03-04 03:45:16 +00:00
import Text from './text'
2020-03-08 23:02:28 +00:00
import StatusContent from './status_content'
2020-03-04 03:45:16 +00:00
const messages = defineMessages({
follow: { id: 'follow', defaultMessage: 'Follow' },
})
2020-03-08 23:02:28 +00:00
const makeMapStateToProps = () => {
2020-03-11 23:56:18 +00:00
const getStatus = makeGetStatus()
const mapStateToProps = (state, props) => {
const status = getStatus(state, props)
let descendantsIds = Immutable.List()
if (status) {
// ALL descendants
descendantsIds = descendantsIds.withMutations(mutable => {
const ids = [status.get('id')]
while (ids.length > 0) {
let id = ids.shift();
const replies = state.getIn(['contexts', 'replies', id])
if (status.get('id') !== id) {
mutable.push(id)
}
if (replies) {
replies.reverse().forEach(reply => {
ids.unshift(reply)
});
}
}
})
}
return {
status,
descendantsIds,
}
}
2020-03-08 23:02:28 +00:00
2020-03-11 23:56:18 +00:00
return mapStateToProps
}
2020-03-08 23:02:28 +00:00
2020-03-04 03:45:16 +00:00
export default
@injectIntl
2020-03-08 23:02:28 +00:00
@connect(makeMapStateToProps)
2020-03-04 03:45:16 +00:00
class Comment extends ImmutablePureComponent {
static propTypes = {
status: ImmutablePropTypes.map.isRequired,
2020-03-11 23:56:18 +00:00
descendantsIds: ImmutablePropTypes.list,
2020-03-04 03:45:16 +00:00
}
2020-03-08 23:02:28 +00:00
handleClick = () => {
// if (this.props.onClick) {
// this.props.onClick();
// return;
// }
// if (!this.context.router) return;
// this.context.router.history.push(
// `/${this._properStatus().getIn(['account', 'acct'])}/posts/${this._properStatus().get('id')}`
// )
}
2020-03-04 03:45:16 +00:00
render() {
2020-03-08 23:02:28 +00:00
const { status } = this.props
2020-03-04 03:45:16 +00:00
2020-03-08 23:02:28 +00:00
console.log("status:", status)
2020-03-04 03:45:16 +00:00
return (
2020-03-11 23:56:18 +00:00
<div className={[_s.default, _s.px10, _s.mb10, _s.py5].join(' ')} data-comment={status.get('id')}>
2020-03-08 23:02:28 +00:00
<div className={[_s.default].join(' ')}>
<div className={[_s.default, _s.flexRow].join(' ')}>
<NavLink
to={`/${status.getIn(['account', 'acct'])}`}
title={status.getIn(['account', 'acct'])}
2020-03-11 23:56:18 +00:00
className={[_s.default, _s.mr10, _s.pt5].join(' ')}
2020-03-08 23:02:28 +00:00
>
<Avatar account={status.get('account')} size={32} />
</NavLink>
<div className={[_s.default, _s.flexGrow1].join(' ')}>
2020-03-11 23:56:18 +00:00
<div className={[_s.default, _s.px10, _s.py5, _s.radiusSmall, _s.backgroundSubtle].join(' ')}>
<div className={_s.pt2}>
2020-03-08 23:02:28 +00:00
<CommentHeader status={status} />
</div>
2020-03-11 23:56:18 +00:00
<div className={[_s.py5].join(' ')}>
2020-03-08 23:02:28 +00:00
<StatusContent
status={status}
onClick={this.handleClick}
isComment
collapsable
/>
</div>
</div>
2020-03-11 23:56:18 +00:00
<div className={[_s.default, _s.flexRow, _s.mt5].join(' ')}>
2020-03-08 23:02:28 +00:00
<Button
text
radiusSmall
backgroundColor='none'
color='tertiary'
2020-03-11 23:56:18 +00:00
className={[_s.px5, _s.backgroundSubtle_onHover, _s.py2, _s.mr5].join(' ')}
2020-03-08 23:02:28 +00:00
>
<Text size='extraSmall' color='inherit' weight='bold'>
Like
</Text>
</Button>
<Button
text
radiusSmall
backgroundColor='none'
color='tertiary'
2020-03-11 23:56:18 +00:00
className={[_s.px5, _s.backgroundSubtle_onHover, _s.py2, _s.mr5].join(' ')}
2020-03-08 23:02:28 +00:00
>
<Text size='extraSmall' color='inherit' weight='bold'>
Reply
</Text>
</Button>
<Button
text
radiusSmall
backgroundColor='none'
color='tertiary'
2020-03-11 23:56:18 +00:00
className={[_s.px5, _s.backgroundSubtle_onHover, _s.py2, _s.mr5].join(' ')}
2020-03-08 23:02:28 +00:00
>
<Text size='extraSmall' color='inherit' weight='bold'>
···
</Text>
</Button>
</div>
</div>
</div>
2020-03-04 03:45:16 +00:00
2020-03-08 23:02:28 +00:00
</div>
2020-03-04 03:45:16 +00:00
</div>
)
}
}