Add "Replying to ..." to pending statuses

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

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

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';
 import ImmutablePureComponent from 'react-immutable-pure-component';
+import { FormattedMessage, injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 import { Link, NavLink } from 'react-router-dom';
 
@@ -29,6 +30,7 @@ const mapStateToProps = (state, props) => {
 };
 
 export default @connect(mapStateToProps)
+@injectIntl
 class PendingStatus extends ImmutablePureComponent {
 
   renderMedia = () => {
@@ -47,6 +49,56 @@ class PendingStatus extends ImmutablePureComponent {
     }
   }
 
+  renderReplyMentions = () => {
+    const { status } = this.props;
+
+    if (!status.get('in_reply_to_id')) {
+      return null;
+    }
+
+    const to = status.get('mentions', []);
+
+    if (to.size === 0) {
+      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: <span className='reply-mentions__account'>@{status.getIn(['account', 'username'])}</span>,
+                more: false,
+              }}
+            />
+          </div>
+        );
+      } else {
+        return (
+          <div className='reply-mentions'>
+            <FormattedMessage id='reply_mentions.reply_empty' defaultMessage='Replying to post' />
+          </div>
+        );
+      }
+    }
+
+
+    return (
+      <div className='reply-mentions'>
+        <FormattedMessage
+          id='reply_mentions.reply'
+          defaultMessage='Replying to {accounts}{more}'
+          values={{
+            accounts: to.slice(0, 2).map(account => (<>
+              <span key={account.username} className='reply-mentions__account'>@{account.username}</span>
+              {' '}
+            </>)),
+            more: to.size > 2 && <FormattedMessage id='reply_mentions.more' defaultMessage='and {count} more' values={{ count: to.size - 2 }} />,
+          }}
+        />
+      </div>
+    );
+  }
+
   render() {
     const { status, className } = this.props;
     if (!status) return null;
@@ -84,6 +136,8 @@ class PendingStatus extends ImmutablePureComponent {
               </div>
             </div>
 
+            {this.renderReplyMentions()}
+
             <StatusContent
               status={status}
               expanded

app/soapbox/features/ui/util/pending_status_builder.js

@@ -1,14 +1,24 @@
 import { fromJS } from 'immutable';
+import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 
 import { normalizeStatus } from 'soapbox/actions/importer/normalizer';
-import { makeGetAccount } from 'soapbox/selectors';
+import { makeGetAccount, makeGetStatus } from 'soapbox/selectors';
 
 export const buildStatus = (state, pendingStatus, idempotencyKey) => {
   const getAccount = makeGetAccount();
+  const getStatus = makeGetStatus();
 
   const me = state.get('me');
   const account = getAccount(state, me);
 
+  let replyToSelf = false;
+  if (pendingStatus.get('in_reply_to_id')) {
+    const inReplyTo = getStatus(state, { id: pendingStatus.get('in_reply_to_id') });
+
+    if (inReplyTo.getIn(['account', 'id']) === me)
+      replyToSelf = true;
+  }
+
   const status = normalizeStatus({
     account,
     application: null,
@@ -24,7 +34,13 @@ export const buildStatus = (state, pendingStatus, idempotencyKey) => {
     in_reply_to_id: pendingStatus.get('in_reply_to_id'),
     language: null,
     media_attachments: pendingStatus.get('media_ids').map(id => ({ id })),
-    mentions: [],
+    mentions: (
+      replyToSelf
+        ? ImmutableOrderedSet([account.get('acct')]).union(pendingStatus.get('to'))
+        : pendingStatus.get('to')
+    ).map(mention => ({
+      username: mention.split('@')[0],
+    })),
     muted: false,
     pinned: false,
     poll: pendingStatus.get('poll', null),