161 lines
4.6 KiB
JavaScript
161 lines
4.6 KiB
JavaScript
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'
|
|
import { makeGetStatus } from '../selectors';
|
|
import CommentHeader from './comment_header'
|
|
import Avatar from './avatar'
|
|
import Button from './button'
|
|
import DisplayName from './display_name'
|
|
import DotTextSeperator from './dot_text_seperator'
|
|
import RelativeTimestamp from './relative_timestamp'
|
|
import Text from './text'
|
|
import StatusContent from './status_content'
|
|
|
|
const messages = defineMessages({
|
|
follow: { id: 'follow', defaultMessage: 'Follow' },
|
|
})
|
|
|
|
const makeMapStateToProps = () => {
|
|
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,
|
|
}
|
|
}
|
|
|
|
return mapStateToProps
|
|
}
|
|
|
|
export default
|
|
@injectIntl
|
|
@connect(makeMapStateToProps)
|
|
class Comment extends ImmutablePureComponent {
|
|
|
|
static propTypes = {
|
|
status: ImmutablePropTypes.map.isRequired,
|
|
descendantsIds: ImmutablePropTypes.list,
|
|
}
|
|
|
|
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')}`
|
|
// )
|
|
}
|
|
|
|
render() {
|
|
const { status } = this.props
|
|
|
|
console.log("status:", status)
|
|
|
|
return (
|
|
<div className={[_s.default, _s.px10, _s.mb10, _s.py5].join(' ')} data-comment={status.get('id')}>
|
|
<div className={[_s.default].join(' ')}>
|
|
|
|
<div className={[_s.default, _s.flexRow].join(' ')}>
|
|
<NavLink
|
|
to={`/${status.getIn(['account', 'acct'])}`}
|
|
title={status.getIn(['account', 'acct'])}
|
|
className={[_s.default, _s.mr10, _s.pt5].join(' ')}
|
|
>
|
|
<Avatar account={status.get('account')} size={32} />
|
|
</NavLink>
|
|
|
|
<div className={[_s.default, _s.flexGrow1].join(' ')}>
|
|
<div className={[_s.default, _s.px10, _s.py5, _s.radiusSmall, _s.backgroundSubtle].join(' ')}>
|
|
<div className={_s.pt2}>
|
|
<CommentHeader status={status} />
|
|
</div>
|
|
<div className={[_s.py5].join(' ')}>
|
|
<StatusContent
|
|
status={status}
|
|
onClick={this.handleClick}
|
|
isComment
|
|
collapsable
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className={[_s.default, _s.flexRow, _s.mt5].join(' ')}>
|
|
|
|
<Button
|
|
text
|
|
radiusSmall
|
|
backgroundColor='none'
|
|
color='tertiary'
|
|
className={[_s.px5, _s.backgroundSubtle_onHover, _s.py2, _s.mr5].join(' ')}
|
|
>
|
|
<Text size='extraSmall' color='inherit' weight='bold'>
|
|
Like
|
|
</Text>
|
|
</Button>
|
|
|
|
<Button
|
|
text
|
|
radiusSmall
|
|
backgroundColor='none'
|
|
color='tertiary'
|
|
className={[_s.px5, _s.backgroundSubtle_onHover, _s.py2, _s.mr5].join(' ')}
|
|
>
|
|
<Text size='extraSmall' color='inherit' weight='bold'>
|
|
Reply
|
|
</Text>
|
|
</Button>
|
|
|
|
<Button
|
|
text
|
|
radiusSmall
|
|
backgroundColor='none'
|
|
color='tertiary'
|
|
className={[_s.px5, _s.backgroundSubtle_onHover, _s.py2, _s.mr5].join(' ')}
|
|
>
|
|
<Text size='extraSmall' color='inherit' weight='bold'>
|
|
···
|
|
</Text>
|
|
</Button>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
}
|