Reblogs fixed

5 files changed, 46 insertions, 6 deletions

diff --git a/app/assets/javascripts/components/actions/interactions.jsx b/app/assets/javascripts/components/actions/interactions.jsx
index 281d3be87..964655530 100644
--- a/app/assets/javascripts/components/actions/interactions.jsx
+++ b/app/assets/javascripts/components/actions/interactions.jsx
@@ -15,7 +15,9 @@ export function reblog(status) {
     dispatch(reblogRequest(status));
 
     api(getState).post(`/api/statuses/${status.get('id')}/reblog`).then(function (response) {
-      dispatch(reblogSuccess(status, response.data));
+      // The reblog API method returns a new status wrapped around the original. In this case we are only
+      // interested in how the original is modified, hence passing it skipping the wrapper
+      dispatch(reblogSuccess(status, response.data.reblog));
     }).catch(function (error) {
       dispatch(reblogFail(status, error));
     });
diff --git a/app/assets/javascripts/components/components/display_name.jsx b/app/assets/javascripts/components/components/display_name.jsx
new file mode 100644
index 000000000..1d579731b
--- /dev/null
+++ b/app/assets/javascripts/components/components/display_name.jsx
@@ -0,0 +1,19 @@
+import ImmutablePropTypes from 'react-immutable-proptypes';
+
+const DisplayName = React.createClass({
+
+  propTypes: {
+    account: ImmutablePropTypes.map.isRequired
+  },
+
+  render () {
+    return (
+      <span style={{ display: 'block', maxWidth: '100%', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>
+        <strong style={{ fontWeight: 'bold' }}>{this.props.account.get('display_name')}</strong> <span style={{ fontSize: '14px' }}>@{this.props.account.get('acct')}</span>
+      </span>
+    );
+  }
+
+});
+
+export default DisplayName;
diff --git a/app/assets/javascripts/components/components/reply_indicator.jsx b/app/assets/javascripts/components/components/reply_indicator.jsx
index 2531b7f43..9598a5874 100644
--- a/app/assets/javascripts/components/components/reply_indicator.jsx
+++ b/app/assets/javascripts/components/components/reply_indicator.jsx
@@ -2,6 +2,7 @@ import PureRenderMixin    from 'react-addons-pure-render-mixin';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import Avatar             from './avatar';
 import IconButton         from './icon_button';
+import DisplayName        from './display_name';
 
 const ReplyIndicator = React.createClass({
 
@@ -26,7 +27,7 @@ const ReplyIndicator = React.createClass({
 
           <a href={this.props.status.getIn(['account', 'url'])} className='reply-indicator__display-name' style={{ display: 'block', maxWidth: '100%', paddingRight: '25px', color: '#282c37', textDecoration: 'none', overflow: 'hidden', lineHeight: '24px' }}>
             <div style={{ float: 'left', marginRight: '5px' }}><Avatar size={24} src={this.props.status.getIn(['account', 'avatar'])} /></div>
-            <strong style={{ fontWeight: '500' }}>{this.props.status.getIn(['account', 'display_name'])}</strong> <span>@{this.props.status.getIn(['account', 'acct'])}</span>
+            <DisplayName account={this.props.status.get('account')} />
           </a>
         </div>
 
diff --git a/app/assets/javascripts/components/components/status.jsx b/app/assets/javascripts/components/components/status.jsx
index 7885360e6..fabe85bab 100644
--- a/app/assets/javascripts/components/components/status.jsx
+++ b/app/assets/javascripts/components/components/status.jsx
@@ -3,6 +3,7 @@ import Avatar             from './avatar';
 import RelativeTimestamp  from './relative_timestamp';
 import PureRenderMixin    from 'react-addons-pure-render-mixin';
 import IconButton         from './icon_button';
+import DisplayName        from './display_name';
 
 const Status = React.createClass({
 
@@ -29,7 +30,20 @@ const Status = React.createClass({
 
   render () {
     var content = { __html: this.props.status.get('content') };
-    var status  = this.props.status;
+    var { status, ...other } = this.props;
+
+    if (status.get('reblog') !== null) {
+      return (
+        <div>
+          <div style={{ marginLeft: '68px', color: '#616b86', padding: '8px 0', paddingBottom: '2px', fontSize: '14px', position: 'relative' }}>
+            <div style={{ position: 'absolute', 'left': '-26px'}}><i className='fa fa-fw fa-retweet'></i></div>
+            <a href={status.getIn(['account', 'url'])} style={{ color: '#616b86' }}>{status.getIn(['account', 'display_name'])}</a> reblogged
+          </div>
+
+          <Status {...other} status={status.get('reblog')} />
+        </div>
+      );
+    }
 
     return (
       <div style={{ padding: '8px 10px', paddingLeft: '68px', position: 'relative', minHeight: '48px', borderBottom: '1px solid #363c4b', cursor: 'pointer' }}>
@@ -43,9 +57,7 @@ const Status = React.createClass({
               <Avatar src={status.getIn(['account', 'avatar'])} size={48} />
             </div>
 
-            <span style={{ display: 'block', maxWidth: '100%', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>
-              <strong style={{ fontWeight: 'bold', color: '#fff' }}>{status.getIn(['account', 'display_name'])}</strong> <span style={{ fontSize: '14px' }}>@{status.getIn(['account', 'acct'])}</span>
-            </span>
+            <DisplayName account={status.get('account')} />
           </a>
         </div>
 
diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
index 4050babf9..f17160161 100644
--- a/app/assets/stylesheets/components.scss
+++ b/app/assets/stylesheets/components.scss
@@ -76,6 +76,12 @@
   text-decoration: none;
 }
 
+.status__display-name {
+  strong {
+    color: #fff;
+  }
+}
+
 .status__display-name, .reply-indicator__display-name {
   &:hover {
     strong {