Make in-text mentions open account detailed view when possible

2 files changed, 49 insertions, 5 deletions

diff --git a/app/assets/javascripts/components/components/status.jsx b/app/assets/javascripts/components/components/status.jsx
index 1df7f1fcf..9f9e877e6 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({
           </a>
         </div>
 
-        <div className='status__content' dangerouslySetInnerHTML={content} />
+        <StatusContent status={status} />
 
         {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 000000000..98d914514
--- /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 <div className='status__content' dangerouslySetInnerHTML={content} />;
+  },
+
+});
+
+export default StatusContent;