From 74dfefabd39c52b47c6f5413568687ee3c76772f Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Thu, 22 Sep 2016 00:32:27 +0200 Subject: [PATCH] Make in-text mentions open account detailed view when possible --- .../components/components/status.jsx | 13 +++--- .../components/components/status_content.jsx | 41 +++++++++++++++++++ 2 files changed, 49 insertions(+), 5 deletions(-) create mode 100644 app/assets/javascripts/components/components/status_content.jsx diff --git a/app/assets/javascripts/components/components/status.jsx b/app/assets/javascripts/components/components/status.jsx index 1df7f1fcf9d..9f9e877e6b6 100644 --- a/app/assets/javascripts/components/components/status.jsx +++ b/app/assets/javascripts/components/components/status.jsx @@ -6,10 +6,14 @@ import IconButton from './icon_button'; import DisplayName from './display_name'; import MediaGallery from './media_gallery'; import VideoPlayer from './video_player'; -import { hashHistory } from 'react-router'; +import StatusContent from './status_content'; const Status = React.createClass({ + contextTypes: { + router: React.PropTypes.object + }, + propTypes: { status: ImmutablePropTypes.map.isRequired, wrapped: React.PropTypes.bool, @@ -34,20 +38,19 @@ const Status = React.createClass({ handleClick () { const { status } = this.props; - hashHistory.push(`/statuses/${status.getIn(['reblog', 'id'], status.get('id'))}`); + this.context.router.push(`/statuses/${status.getIn(['reblog', 'id'], status.get('id'))}`); }, handleAccountClick (id, e) { if (e.button === 0) { e.preventDefault(); - hashHistory.push(`/accounts/${id}`); + this.context.router.push(`/accounts/${id}`); } e.stopPropagation(); }, render () { - var content = { __html: this.props.status.get('content') }; var media = ''; var { status, ...other } = this.props; @@ -89,7 +92,7 @@ const Status = React.createClass({ -
+ {media} diff --git a/app/assets/javascripts/components/components/status_content.jsx b/app/assets/javascripts/components/components/status_content.jsx new file mode 100644 index 00000000000..98d914514b2 --- /dev/null +++ b/app/assets/javascripts/components/components/status_content.jsx @@ -0,0 +1,41 @@ +import ImmutablePropTypes from 'react-immutable-proptypes'; +import PureRenderMixin from 'react-addons-pure-render-mixin'; + +const StatusContent = React.createClass({ + + contextTypes: { + router: React.PropTypes.object + }, + + propTypes: { + status: ImmutablePropTypes.map.isRequired + }, + + mixins: [PureRenderMixin], + + componentDidMount () { + const node = ReactDOM.findDOMNode(this); + + this.props.status.get('mentions').forEach(mention => { + const links = node.querySelector(`a[href="${mention.get('url')}"]`); + links.addEventListener('click', this.onLinkClick.bind(this, mention)); + }); + }, + + onLinkClick (mention, e) { + if (e.button === 0) { + e.preventDefault(); + this.context.router.push(`/accounts/${mention.get('id')}`); + } + + e.stopPropagation(); + }, + + render () { + const content = { __html: this.props.status.get('content') }; + return
; + }, + +}); + +export default StatusContent;