bigbuffet-rw/app/soapbox/features/ui/components/pending_status.js
2022-03-06 23:20:13 +01:00

112 lines
4.2 KiB
JavaScript

import classNames from 'classnames';
import React from 'react';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { 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 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';
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;
}
}
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' 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>
<StatusReplyMentions status={status} />
<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>
);
}
}