Explicit addressing: remove "Show thread" button, handle StatusReplyMentions edge cases, fixes #793

app/soapbox/components/status.js

@@ -88,7 +88,6 @@ class Status extends ImmutablePureComponent {
     unread: PropTypes.bool,
     onMoveUp: PropTypes.func,
     onMoveDown: PropTypes.func,
-    showThread: PropTypes.bool,
     getScrollPosition: PropTypes.func,
     updateScrollBottom: PropTypes.func,
     cacheMediaWidth: PropTypes.func,
@@ -318,7 +317,7 @@ class Status extends ImmutablePureComponent {
     const poll = null;
     let statusAvatar, prepend, rebloggedByText, reblogContent;
 
-    const { intl, hidden, featured, otherAccounts, unread, showThread, group } = this.props;
+    const { intl, hidden, featured, otherAccounts, unread, group } = this.props;
 
     // FIXME: why does this need to reassign status and account??
     let { status, account, ...other } = this.props; // eslint-disable-line prefer-const
@@ -553,12 +552,6 @@ class Status extends ImmutablePureComponent {
             {media}
             {poll}
 
-            {showThread && status.get('in_reply_to_id') && status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) && (
-              <button className='status__content__read-more-button' onClick={this.handleClick}>
-                <FormattedMessage id='status.show_thread' defaultMessage='Show thread' />
-              </button>
-            )}
-
             <StatusActionBar
               status={status}
               account={account}

app/soapbox/components/status_list.js

@@ -118,7 +118,6 @@ export default class StatusList extends ImmutablePureComponent {
         contextType={timelineId}
         group={group}
         withGroupAdmin={withGroupAdmin}
-        showThread
       />
     );
   }
@@ -138,7 +137,6 @@ export default class StatusList extends ImmutablePureComponent {
             contextType={timelineId}
             group={group}
             withGroupAdmin={withGroupAdmin}
-            showThread
           />
         </div>
       </div>
@@ -157,7 +155,6 @@ export default class StatusList extends ImmutablePureComponent {
         onMoveUp={this.handleMoveUp}
         onMoveDown={this.handleMoveDown}
         contextType={timelineId}
-        showThread
       />
     ));
   }

app/soapbox/components/status_reply_mentions.js

@@ -15,12 +15,46 @@ class StatusReplyMentions extends ImmutablePureComponent {
   render() {
     const { status } = this.props;
 
-    const to = status.get('mentions', []);
+    if (!status.get('in_reply_to_id')) {
-
-    if (!status.get('in_reply_to_id') || !to || to.size === 0) {
       return null;
     }
 
+    const to = status.get('mentions', []);
+
+    // The post is a reply, but it has no mentions.
+    if (to.size === 0) {
+      // The author is replying to themself.
+      if (status.get('in_reply_to_account_id') === status.getIn(['account', 'id'])) {
+        return (
+          <div className='reply-mentions'>
+            <FormattedMessage
+              id='reply_mentions.reply'
+              defaultMessage='Replying to {accounts}{more}'
+              values={{
+                accounts: (<>
+                  <HoverRefWrapper accountId={status.getIn(['account', 'id'])} inline>
+                    <Link to={`/@${status.getIn(['account', 'acct'])}`} className='reply-mentions__account'>@{status.getIn(['account', 'username'])}</Link>
+                  </HoverRefWrapper>
+                </>),
+                more: false,
+              }}
+            />
+          </div>
+        );
+      } else {
+        // The reply-to is unknown. Rare, but it can happen.
+        return (
+          <div className='reply-mentions'>
+            <FormattedMessage
+              id='reply_mentions.reply_empty'
+              defaultMessage='Replying to post'
+            />
+          </div>
+        );
+      }
+    }
+
+    // The typical case with a reply-to and a list of mentions.
     return (
       <div className='reply-mentions'>
         <FormattedMessage
@@ -29,7 +63,7 @@ class StatusReplyMentions extends ImmutablePureComponent {
           values={{
             accounts: to.slice(0, 2).map(account => (<>
               <HoverRefWrapper accountId={account.get('id')} inline>
-                <Link to={`/@${account.get('acct')}`} className='reply-mentions__account'>@{account.get('acct').split('@')[0]}</Link>
+                <Link to={`/@${account.get('acct')}`} className='reply-mentions__account'>@{account.get('username')}</Link>
               </HoverRefWrapper>
               {' '}
             </>)),

app/soapbox/features/scheduled_statuses/components/scheduled_status.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { FormattedMessage } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import StatusContent from 'soapbox/components/status_content';
 import { buildStatus } from '../builder';
@@ -25,7 +24,7 @@ export default @connect(mapStateToProps)
 class ScheduledStatus extends ImmutablePureComponent {
 
   render() {
-    const { status, showThread, account, ...other } = this.props;
+    const { status, account, ...other } = this.props;
     if (!status.get('account')) return null;
 
     const statusUrl = `/scheduled_statuses/${status.get('id')}`;
@@ -74,12 +73,6 @@ class ScheduledStatus extends ImmutablePureComponent {
 
             {status.get('poll') && <PollPreview poll={status.get('poll')} />}
 
-            {showThread && status.get('in_reply_to_id') && status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) && (
-              <button className='status__content__read-more-button' onClick={this.handleClick}>
-                <FormattedMessage id='status.show_thread' defaultMessage='Show thread' />
-              </button>
-            )}
-
             <ScheduledStatusActionBar status={status} account={account} {...other} />
           </div>
         </div>

app/soapbox/features/ui/components/pending_status.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { FormattedMessage } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import StatusContent from 'soapbox/components/status_content';
 import { buildStatus } from '../util/pending_status_builder';
@@ -46,7 +45,7 @@ class PendingStatus extends ImmutablePureComponent {
   }
 
   render() {
-    const { status, className, showThread } = this.props;
+    const { status, className } = this.props;
     if (!status) return null;
     if (!status.get('account')) return null;
 
@@ -91,12 +90,6 @@ class PendingStatus extends ImmutablePureComponent {
             {this.renderMedia()}
             {status.get('poll') && <PollPreview poll={status.get('poll')} />}
 
-            {showThread && status.get('in_reply_to_id') && status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) && (
-              <button className='status__content__read-more-button' onClick={this.handleClick}>
-                <FormattedMessage id='status.show_thread' defaultMessage='Show thread' />
-              </button>
-            )}
-
             {/* TODO */}
             {/* <PlaceholderActionBar /> */}
           </div>