bigbuffet-rw/app/soapbox/features/ui/components/pending_status.js

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';

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 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';
import { getDomain } from 'soapbox/utils/accounts';

import { buildStatus } from '../util/pending_status_builder';

import PollPreview from './poll_preview';

const shouldHaveCard = pendingStatus => {
  return Boolean(pendingStatus.get('content').match(/https?:\/\/\S*/));
};

const mapStateToProps = (state, props) => {
  const { idempotencyKey } = props;
  const pendingStatus = state.getIn(['pending_statuses', idempotencyKey]);
  return {
    status: pendingStatus ? buildStatus(state, pendingStatus, idempotencyKey) : null,
  };
};

export default @connect(mapStateToProps)
@injectIntl
class PendingStatus extends ImmutablePureComponent {

  renderMedia = () => {
    const { status } = this.props;

    if (status.get('media_attachments') && !status.get('media_attachments').isEmpty()) {
      return (
        <PlaceholderMediaGallery
          media={status.get('media_attachments')}
        />
      );
    } else if (!status.get('quote') && shouldHaveCard(status)) {
      return <PlaceholderCard />;
    } else {
      return null;
    }
  }

  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;
    if (!status.get('account')) return null;

    const favicon = status.getIn(['account', 'pleroma', 'favicon']);
    const domain = getDomain(status.get('account'));

    return (
      <div className={classNames('pending-status', className)}>
        <div className={classNames('status__wrapper', `status__wrapper-${status.get('visibility')}`, { 'status__wrapper-reply': !!status.get('in_reply_to_id') })} tabIndex={this.props.muted ? null : 0}>
          <div className={classNames('status', `status-${status.get('visibility')}`, { 'status-reply': !!status.get('in_reply_to_id'), muted: this.props.muted })} data-id={status.get('id')}>
            <div className='status__expand' onClick={this.handleExpandClick} role='presentation' />
            <div className='status__info'>
              <span className='status__relative-time'>
                <RelativeTimestamp timestamp={status.get('created_at')} />
              </span>

              {favicon &&
                <div className='status__favicon'>
                  <Link to={`/timeline/${domain}`}>
                    <img src={favicon} alt='' title={domain} />
                  </Link>
                </div>}

              <div className='status__profile'>
                <div className='status__avatar'>
                  <NavLink to={`/@${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])}>
                    <Avatar account={status.get('account')} size={48} />
                  </NavLink>
                </div>
                <NavLink to={`/@${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])} className='status__display-name'>
                  <DisplayName account={status.get('account')} />
                </NavLink>
              </div>
            </div>

            {this.renderReplyMentions()}

            <StatusContent
              status={status}
              expanded
              collapsable
            />

            {this.renderMedia()}
            {status.get('poll') && <PollPreview poll={status.get('poll')} />}

            {status.get('quote') && <QuotedStatus statusId={status.get('quote')} />}

            {/* TODO */}
            {/* <PlaceholderActionBar /> */}
          </div>
        </div>
      </div>
    );
  }

}