Change web UI to show empty profile for suspended accounts (#14766)
This commit is contained in:
		
							parent
							
								
									38aa7a9a7f
								
							
						
					
					
						commit
						acbb99f7e5
					
				
					 3 changed files with 58 additions and 39 deletions
				
			
		| 
						 | 
				
			
			@ -140,6 +140,8 @@ class Header extends ImmutablePureComponent {
 | 
			
		|||
      return null;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    const suspended = account.get('suspended');
 | 
			
		||||
 | 
			
		||||
    let info        = [];
 | 
			
		||||
    let actionBtn   = '';
 | 
			
		||||
    let lockedIcon  = '';
 | 
			
		||||
| 
						 | 
				
			
			@ -268,7 +270,7 @@ class Header extends ImmutablePureComponent {
 | 
			
		|||
      <div className={classNames('account__header', { inactive: !!account.get('moved') })} ref={this.setRef}>
 | 
			
		||||
        <div className='account__header__image'>
 | 
			
		||||
          <div className='account__header__info'>
 | 
			
		||||
            {info}
 | 
			
		||||
            {!suspended && info}
 | 
			
		||||
          </div>
 | 
			
		||||
 | 
			
		||||
          <img src={autoPlayGif ? account.get('header') : account.get('header_static')} alt='' className='parallax' />
 | 
			
		||||
| 
						 | 
				
			
			@ -282,11 +284,13 @@ class Header extends ImmutablePureComponent {
 | 
			
		|||
 | 
			
		||||
            <div className='spacer' />
 | 
			
		||||
 | 
			
		||||
            <div className='account__header__tabs__buttons'>
 | 
			
		||||
              {actionBtn}
 | 
			
		||||
            {!suspended && (
 | 
			
		||||
              <div className='account__header__tabs__buttons'>
 | 
			
		||||
                {actionBtn}
 | 
			
		||||
 | 
			
		||||
              <DropdownMenuContainer items={menu} icon='ellipsis-v' size={24} direction='right' />
 | 
			
		||||
            </div>
 | 
			
		||||
                <DropdownMenuContainer items={menu} icon='ellipsis-v' size={24} direction='right' />
 | 
			
		||||
              </div>
 | 
			
		||||
            )}
 | 
			
		||||
          </div>
 | 
			
		||||
 | 
			
		||||
          <div className='account__header__tabs__name'>
 | 
			
		||||
| 
						 | 
				
			
			@ -298,7 +302,7 @@ class Header extends ImmutablePureComponent {
 | 
			
		|||
 | 
			
		||||
          <div className='account__header__extra'>
 | 
			
		||||
            <div className='account__header__bio'>
 | 
			
		||||
              { (fields.size > 0 || identity_proofs.size > 0) && (
 | 
			
		||||
              {(fields.size > 0 || identity_proofs.size > 0) && (
 | 
			
		||||
                <div className='account__header__fields'>
 | 
			
		||||
                  {identity_proofs.map((proof, i) => (
 | 
			
		||||
                    <dl key={i}>
 | 
			
		||||
| 
						 | 
				
			
			@ -324,33 +328,35 @@ class Header extends ImmutablePureComponent {
 | 
			
		|||
                </div>
 | 
			
		||||
              )}
 | 
			
		||||
 | 
			
		||||
              {account.get('id') !== me && <AccountNoteContainer account={account} />}
 | 
			
		||||
              {account.get('id') !== me && !suspended && <AccountNoteContainer account={account} />}
 | 
			
		||||
 | 
			
		||||
              {account.get('note').length > 0 && account.get('note') !== '<p></p>' && <div className='account__header__content' dangerouslySetInnerHTML={content} />}
 | 
			
		||||
            </div>
 | 
			
		||||
 | 
			
		||||
            <div className='account__header__extra__links'>
 | 
			
		||||
              <NavLink isActive={this.isStatusesPageActive} activeClassName='active' to={`/accounts/${account.get('id')}`} title={intl.formatNumber(account.get('statuses_count'))}>
 | 
			
		||||
                <ShortNumber
 | 
			
		||||
                  value={account.get('statuses_count')}
 | 
			
		||||
                  renderer={counterRenderer('statuses')}
 | 
			
		||||
                />
 | 
			
		||||
              </NavLink>
 | 
			
		||||
            {!suspended && (
 | 
			
		||||
              <div className='account__header__extra__links'>
 | 
			
		||||
                <NavLink isActive={this.isStatusesPageActive} activeClassName='active' to={`/accounts/${account.get('id')}`} title={intl.formatNumber(account.get('statuses_count'))}>
 | 
			
		||||
                  <ShortNumber
 | 
			
		||||
                    value={account.get('statuses_count')}
 | 
			
		||||
                    renderer={counterRenderer('statuses')}
 | 
			
		||||
                  />
 | 
			
		||||
                </NavLink>
 | 
			
		||||
 | 
			
		||||
              <NavLink exact activeClassName='active' to={`/accounts/${account.get('id')}/following`} title={intl.formatNumber(account.get('following_count'))}>
 | 
			
		||||
                <ShortNumber
 | 
			
		||||
                  value={account.get('following_count')}
 | 
			
		||||
                  renderer={counterRenderer('following')}
 | 
			
		||||
                />
 | 
			
		||||
              </NavLink>
 | 
			
		||||
                <NavLink exact activeClassName='active' to={`/accounts/${account.get('id')}/following`} title={intl.formatNumber(account.get('following_count'))}>
 | 
			
		||||
                  <ShortNumber
 | 
			
		||||
                    value={account.get('following_count')}
 | 
			
		||||
                    renderer={counterRenderer('following')}
 | 
			
		||||
                  />
 | 
			
		||||
                </NavLink>
 | 
			
		||||
 | 
			
		||||
              <NavLink exact activeClassName='active' to={`/accounts/${account.get('id')}/followers`} title={intl.formatNumber(account.get('followers_count'))}>
 | 
			
		||||
                <ShortNumber
 | 
			
		||||
                  value={account.get('followers_count')}
 | 
			
		||||
                  renderer={counterRenderer('followers')}
 | 
			
		||||
                />
 | 
			
		||||
              </NavLink>
 | 
			
		||||
            </div>
 | 
			
		||||
                <NavLink exact activeClassName='active' to={`/accounts/${account.get('id')}/followers`} title={intl.formatNumber(account.get('followers_count'))}>
 | 
			
		||||
                  <ShortNumber
 | 
			
		||||
                    value={account.get('followers_count')}
 | 
			
		||||
                    renderer={counterRenderer('followers')}
 | 
			
		||||
                  />
 | 
			
		||||
                </NavLink>
 | 
			
		||||
              </div>
 | 
			
		||||
            )}
 | 
			
		||||
          </div>
 | 
			
		||||
        </div>
 | 
			
		||||
      </div>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -15,12 +15,15 @@ import { ScrollContainer } from 'react-router-scroll-4';
 | 
			
		|||
import LoadMore from 'mastodon/components/load_more';
 | 
			
		||||
import MissingIndicator from 'mastodon/components/missing_indicator';
 | 
			
		||||
import { openModal } from 'mastodon/actions/modal';
 | 
			
		||||
import { FormattedMessage } from 'react-intl';
 | 
			
		||||
 | 
			
		||||
const mapStateToProps = (state, props) => ({
 | 
			
		||||
  isAccount: !!state.getIn(['accounts', props.params.accountId]),
 | 
			
		||||
  attachments: getAccountGallery(state, props.params.accountId),
 | 
			
		||||
  isLoading: state.getIn(['timelines', `account:${props.params.accountId}:media`, 'isLoading']),
 | 
			
		||||
  hasMore: state.getIn(['timelines', `account:${props.params.accountId}:media`, 'hasMore']),
 | 
			
		||||
  suspended: state.getIn(['accounts', props.params.accountId, 'suspended'], false),
 | 
			
		||||
  blockedBy: state.getIn(['relationships', props.params.accountId, 'blocked_by'], false),
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
class LoadMoreMedia extends ImmutablePureComponent {
 | 
			
		||||
| 
						 | 
				
			
			@ -56,6 +59,8 @@ class AccountGallery extends ImmutablePureComponent {
 | 
			
		|||
    isLoading: PropTypes.bool,
 | 
			
		||||
    hasMore: PropTypes.bool,
 | 
			
		||||
    isAccount: PropTypes.bool,
 | 
			
		||||
    blockedBy: PropTypes.bool,
 | 
			
		||||
    suspended: PropTypes.bool,
 | 
			
		||||
    multiColumn: PropTypes.bool,
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -119,7 +124,7 @@ class AccountGallery extends ImmutablePureComponent {
 | 
			
		|||
  }
 | 
			
		||||
 | 
			
		||||
  render () {
 | 
			
		||||
    const { attachments, shouldUpdateScroll, isLoading, hasMore, isAccount, multiColumn } = this.props;
 | 
			
		||||
    const { attachments, shouldUpdateScroll, isLoading, hasMore, isAccount, multiColumn, blockedBy, suspended } = this.props;
 | 
			
		||||
    const { width } = this.state;
 | 
			
		||||
 | 
			
		||||
    if (!isAccount) {
 | 
			
		||||
| 
						 | 
				
			
			@ -152,15 +157,21 @@ class AccountGallery extends ImmutablePureComponent {
 | 
			
		|||
          <div className='scrollable scrollable--flex' onScroll={this.handleScroll}>
 | 
			
		||||
            <HeaderContainer accountId={this.props.params.accountId} />
 | 
			
		||||
 | 
			
		||||
            <div role='feed' className='account-gallery__container' ref={this.handleRef}>
 | 
			
		||||
              {attachments.map((attachment, index) => attachment === null ? (
 | 
			
		||||
                <LoadMoreMedia key={'more:' + attachments.getIn(index + 1, 'id')} maxId={index > 0 ? attachments.getIn(index - 1, 'id') : null} onLoadMore={this.handleLoadMore} />
 | 
			
		||||
              ) : (
 | 
			
		||||
                <MediaItem key={attachment.get('id')} attachment={attachment} displayWidth={width} onOpenMedia={this.handleOpenMedia} />
 | 
			
		||||
              ))}
 | 
			
		||||
            {(suspended || blockedBy) ? (
 | 
			
		||||
              <div className='empty-column-indicator'>
 | 
			
		||||
                <FormattedMessage id='empty_column.account_unavailable' defaultMessage='Profile unavailable' />
 | 
			
		||||
              </div>
 | 
			
		||||
            ) : (
 | 
			
		||||
              <div role='feed' className='account-gallery__container' ref={this.handleRef}>
 | 
			
		||||
                {attachments.map((attachment, index) => attachment === null ? (
 | 
			
		||||
                  <LoadMoreMedia key={'more:' + attachments.getIn(index + 1, 'id')} maxId={index > 0 ? attachments.getIn(index - 1, 'id') : null} onLoadMore={this.handleLoadMore} />
 | 
			
		||||
                ) : (
 | 
			
		||||
                  <MediaItem key={attachment.get('id')} attachment={attachment} displayWidth={width} onOpenMedia={this.handleOpenMedia} />
 | 
			
		||||
                ))}
 | 
			
		||||
 | 
			
		||||
              {loadOlder}
 | 
			
		||||
            </div>
 | 
			
		||||
                {loadOlder}
 | 
			
		||||
              </div>
 | 
			
		||||
            )}
 | 
			
		||||
 | 
			
		||||
            {isLoading && attachments.size === 0 && (
 | 
			
		||||
              <div className='scrollable__append'>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -31,6 +31,7 @@ const mapStateToProps = (state, { params: { accountId }, withReplies = false })
 | 
			
		|||
    featuredStatusIds: withReplies ? ImmutableList() : state.getIn(['timelines', `account:${accountId}:pinned`, 'items'], emptyList),
 | 
			
		||||
    isLoading: state.getIn(['timelines', `account:${path}`, 'isLoading']),
 | 
			
		||||
    hasMore: state.getIn(['timelines', `account:${path}`, 'hasMore']),
 | 
			
		||||
    suspended: state.getIn(['accounts', accountId, 'suspended'], false),
 | 
			
		||||
    blockedBy: state.getIn(['relationships', accountId, 'blocked_by'], false),
 | 
			
		||||
  };
 | 
			
		||||
};
 | 
			
		||||
| 
						 | 
				
			
			@ -57,6 +58,7 @@ class AccountTimeline extends ImmutablePureComponent {
 | 
			
		|||
    withReplies: PropTypes.bool,
 | 
			
		||||
    blockedBy: PropTypes.bool,
 | 
			
		||||
    isAccount: PropTypes.bool,
 | 
			
		||||
    suspended: PropTypes.bool,
 | 
			
		||||
    remote: PropTypes.bool,
 | 
			
		||||
    remoteUrl: PropTypes.string,
 | 
			
		||||
    multiColumn: PropTypes.bool,
 | 
			
		||||
| 
						 | 
				
			
			@ -113,7 +115,7 @@ class AccountTimeline extends ImmutablePureComponent {
 | 
			
		|||
  }
 | 
			
		||||
 | 
			
		||||
  render () {
 | 
			
		||||
    const { shouldUpdateScroll, statusIds, featuredStatusIds, isLoading, hasMore, blockedBy, isAccount, multiColumn, remote, remoteUrl } = this.props;
 | 
			
		||||
    const { shouldUpdateScroll, statusIds, featuredStatusIds, isLoading, hasMore, blockedBy, suspended, isAccount, multiColumn, remote, remoteUrl } = this.props;
 | 
			
		||||
 | 
			
		||||
    if (!isAccount) {
 | 
			
		||||
      return (
 | 
			
		||||
| 
						 | 
				
			
			@ -134,7 +136,7 @@ class AccountTimeline extends ImmutablePureComponent {
 | 
			
		|||
 | 
			
		||||
    let emptyMessage;
 | 
			
		||||
 | 
			
		||||
    if (blockedBy) {
 | 
			
		||||
    if (suspended || blockedBy) {
 | 
			
		||||
      emptyMessage = <FormattedMessage id='empty_column.account_unavailable' defaultMessage='Profile unavailable' />;
 | 
			
		||||
    } else if (remote && statusIds.isEmpty()) {
 | 
			
		||||
      emptyMessage = <RemoteHint url={remoteUrl} />;
 | 
			
		||||
| 
						 | 
				
			
			@ -153,7 +155,7 @@ class AccountTimeline extends ImmutablePureComponent {
 | 
			
		|||
          alwaysPrepend
 | 
			
		||||
          append={remoteMessage}
 | 
			
		||||
          scrollKey='account_timeline'
 | 
			
		||||
          statusIds={blockedBy ? emptyList : statusIds}
 | 
			
		||||
          statusIds={(suspended || blockedBy) ? emptyList : statusIds}
 | 
			
		||||
          featuredStatusIds={featuredStatusIds}
 | 
			
		||||
          isLoading={isLoading}
 | 
			
		||||
          hasMore={hasMore}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in a new issue