Fix PendingStatus

app/soapbox/features/scheduled_statuses/builder.js

@@ -1,6 +1,7 @@
 import { fromJS } from 'immutable';
 
 import { normalizeStatus } from 'soapbox/normalizers/status';
+import { calculateStatus } from 'soapbox/reducers/statuses';
 import { makeGetAccount } from 'soapbox/selectors';
 
 export const buildStatus = (state, scheduledStatus) => {
@@ -42,5 +43,5 @@ export const buildStatus = (state, scheduledStatus) => {
     visibility: params.get('visibility'),
   };
 
-  return normalizeStatus(fromJS(status));
+  return calculateStatus(normalizeStatus(fromJS(status)));
 };

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

@@ -9,6 +9,7 @@ import Avatar from 'soapbox/components/avatar';
 import DisplayName from 'soapbox/components/display_name';
 import RelativeTimestamp from 'soapbox/components/relative_timestamp';
 import StatusContent from 'soapbox/components/status_content';
+import StatusReplyMentions from 'soapbox/components/status_reply_mentions';
 import PollPreview from 'soapbox/features/ui/components/poll_preview';
 import { getDomain } from 'soapbox/utils/accounts';
 
@@ -63,6 +64,8 @@ class ScheduledStatus extends ImmutablePureComponent {
               </div>
             </div>
 
+            <StatusReplyMentions status={status} />
+
             <StatusContent
               status={status}
               expanded

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

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { FormattedMessage, injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 import { Link, NavLink } from 'react-router-dom';
 
@@ -9,6 +9,7 @@ import Avatar from 'soapbox/components/avatar';
 import DisplayName from 'soapbox/components/display_name';
 import RelativeTimestamp from 'soapbox/components/relative_timestamp';
 import StatusContent from 'soapbox/components/status_content';
+import StatusReplyMentions from 'soapbox/components/status_reply_mentions';
 import PlaceholderCard from 'soapbox/features/placeholder/components/placeholder_card';
 import PlaceholderMediaGallery from 'soapbox/features/placeholder/components/placeholder_media_gallery';
 import QuotedStatus from 'soapbox/features/status/containers/quoted_status_container';
@@ -50,56 +51,6 @@ 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;
@@ -137,7 +88,7 @@ class PendingStatus extends ImmutablePureComponent {
               </div>
             </div>
 
-            {this.renderReplyMentions()}
+            <StatusReplyMentions status={status} />
 
             <StatusContent
               status={status}

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

@@ -1,7 +1,8 @@
 import { fromJS } from 'immutable';
-import { OrderedSet as ImmutableOrderedSet } from 'immutable';
+import { OrderedSet as ImmutableOrderedSet, Map as ImmutableMap } from 'immutable';
 
 import { normalizeStatus } from 'soapbox/normalizers/status';
+import { calculateStatus } from 'soapbox/reducers/statuses';
 import { makeGetAccount, makeGetStatus } from 'soapbox/selectors';
 
 export const buildStatus = (state, pendingStatus, idempotencyKey) => {
@@ -21,8 +22,9 @@ export const buildStatus = (state, pendingStatus, idempotencyKey) => {
       mentions = pendingStatus.get('to', []);
     }
 
-    mentions = mentions.map(mention => ({
+    mentions = mentions.toList().map(mention => ImmutableMap({
       username: mention.split('@')[0],
+      acct: mention,
     }));
   }
 
@@ -59,5 +61,5 @@ export const buildStatus = (state, pendingStatus, idempotencyKey) => {
     visibility: pendingStatus.get('visibility', 'public'),
   };
 
-  return normalizeStatus(fromJS(status));
+  return calculateStatus(normalizeStatus(fromJS(status)));
 };

app/soapbox/reducers/statuses.js

@@ -48,7 +48,7 @@ const minifyStatus = status => {
 
 // Only calculate these values when status first encountered
 // Otherwise keep the ones already in the reducer
-const calculateStatus = (status, oldStatus, expandSpoilers = false) => {
+export const calculateStatus = (status, oldStatus, expandSpoilers = false) => {
   if (oldStatus) {
     return status.merge({
       search_index: oldStatus.get('search_index'),