Merge branch 'profile-media-panel-improvments' into 'develop'

Profile media panel improvements, Fixes #318

Closes #318

See merge request soapbox-pub/soapbox-fe!168
This commit is contained in:
Alex Gleason 2020-08-16 17:24:52 +00:00
commit b3a05c75ff

View file

@ -35,14 +35,17 @@ class ProfileMediaPanel extends ImmutablePureComponent {
this.props.dispatch(expandAccountMediaTimeline(accountId)); this.props.dispatch(expandAccountMediaTimeline(accountId));
} }
render() { componentDidUpdate() {
const { attachments } = this.props; const { account } = this.props;
const nineAttachments = attachments.slice(0, 9); const accountId = account.get('id');
this.props.dispatch(expandAccountMediaTimeline(accountId));
if (attachments.isEmpty()) {
return null;
} }
render() {
const { attachments, account } = this.props;
const publicAttachments = attachments.filter(attachment => attachment.getIn(['status', 'visibility']) === 'public');
const nineAttachments = publicAttachments.slice(0, 9);
return ( return (
<div className='media-panel'> <div className='media-panel'>
<div className='media-panel-header'> <div className='media-panel-header'>
@ -51,9 +54,10 @@ class ProfileMediaPanel extends ImmutablePureComponent {
<FormattedMessage id='media_panel.title' defaultMessage='Media' /> <FormattedMessage id='media_panel.title' defaultMessage='Media' />
</span> </span>
</div> </div>
{account &&
<div className='media-panel__content'> <div className='media-panel__content'>
<div className='media-panel__list'> <div className='media-panel__list'>
{nineAttachments.map((attachment, index) => ( {!nineAttachments.isEmpty() && nineAttachments.map((attachment, index) => (
<MediaItem <MediaItem
key={`${attachment.getIn(['status', 'id'])}+${attachment.get('id')}`} key={`${attachment.getIn(['status', 'id'])}+${attachment.get('id')}`}
attachment={attachment} attachment={attachment}
@ -63,6 +67,7 @@ class ProfileMediaPanel extends ImmutablePureComponent {
))} ))}
</div> </div>
</div> </div>
}
</div> </div>
); );
}; };