sforkowany z mirror/soapbox
Merge branch 'next-profile-media-panel' into 'next'
Next: Restore ProfileMediaPanel, convert to TSX+FC See merge request soapbox-pub/soapbox-fe!1227next-virtuoso
Alex Gleason
commit
4efdcc3b14
|
|
@ -1,128 +0,0 @@
|
|||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { FormattedMessage, injectIntl } from 'react-intl';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { openModal } from 'soapbox/actions/modals';
|
||||
import Icon from 'soapbox/components/icon';
|
||||
import { Spinner } from 'soapbox/components/ui';
|
||||
import { getAccountGallery } from 'soapbox/selectors';
|
||||
|
||||
import { expandAccountMediaTimeline } from '../../../actions/timelines';
|
||||
import MediaItem from '../../account_gallery/components/media_item';
|
||||
|
||||
class ProfileMediaPanel extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
account: ImmutablePropTypes.record,
|
||||
attachments: ImmutablePropTypes.list,
|
||||
dispatch: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
state = {
|
||||
isLoading: true,
|
||||
}
|
||||
|
||||
handleOpenMedia = attachment => {
|
||||
if (attachment.get('type') === 'video') {
|
||||
this.props.dispatch(openModal('VIDEO', { media: attachment, status: attachment.get('status') }));
|
||||
} else {
|
||||
const media = attachment.getIn(['status', 'media_attachments']);
|
||||
const index = media.findIndex(x => x.get('id') === attachment.get('id'));
|
||||
|
||||
this.props.dispatch(openModal('MEDIA', { media, index, status: attachment.get('status'), account: attachment.get('account') }));
|
||||
}
|
||||
}
|
||||
|
||||
fetchMedia = () => {
|
||||
const { account } = this.props;
|
||||
|
||||
if (account) {
|
||||
const accountId = account.get('id');
|
||||
|
||||
this.props.dispatch(expandAccountMediaTimeline(accountId))
|
||||
.then(() => this.setState({ isLoading: false }))
|
||||
.catch(() => {});
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.fetchMedia();
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
const oldId = prevProps.account && prevProps.account.get('id');
|
||||
const newId = this.props.account && this.props.account.get('id');
|
||||
|
||||
if (newId !== oldId) {
|
||||
this.setState({ isLoading: true });
|
||||
this.fetchMedia();
|
||||
}
|
||||
}
|
||||
|
||||
renderAttachments() {
|
||||
const { attachments } = this.props;
|
||||
const publicAttachments = attachments.filter(attachment => attachment.getIn(['status', 'visibility']) === 'public');
|
||||
const nineAttachments = publicAttachments.slice(0, 9);
|
||||
|
||||
if (!nineAttachments.isEmpty()) {
|
||||
return (
|
||||
<div className='media-panel__list'>
|
||||
{nineAttachments.map((attachment, index) => (
|
||||
<MediaItem
|
||||
key={`${attachment.getIn(['status', 'id'])}+${attachment.get('id')}`}
|
||||
attachment={attachment}
|
||||
displayWidth={255}
|
||||
onOpenMedia={this.handleOpenMedia}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div className='media-panel__empty'>
|
||||
<FormattedMessage id='media_panel.empty_message' defaultMessage='No media found.' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { account } = this.props;
|
||||
const { isLoading } = this.state;
|
||||
|
||||
return (
|
||||
<div className='media-panel'>
|
||||
<div className='media-panel-header'>
|
||||
<Icon src={require('@tabler/icons/icons/camera.svg')} className='media-panel-header__icon' />
|
||||
<span className='media-panel-header__label'>
|
||||
<FormattedMessage id='media_panel.title' defaultMessage='Media' />
|
||||
</span>
|
||||
</div>
|
||||
{account &&
|
||||
<div className='media-panel__content'>
|
||||
{isLoading ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
this.renderAttachments()
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const mapStateToProps = (state, { account }) => ({
|
||||
attachments: getAccountGallery(state, account.get('id')),
|
||||
});
|
||||
|
||||
export default injectIntl(
|
||||
connect(mapStateToProps, null, null, {
|
||||
forwardRef: true,
|
||||
},
|
||||
)(ProfileMediaPanel));
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
import { List as ImmutableList } from 'immutable';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import { useDispatch } from 'react-redux';
|
||||
|
||||
import { openModal } from 'soapbox/actions/modals';
|
||||
import { Spinner, Widget } from 'soapbox/components/ui';
|
||||
import { useAppSelector } from 'soapbox/hooks';
|
||||
import { getAccountGallery } from 'soapbox/selectors';
|
||||
|
||||
import { expandAccountMediaTimeline } from '../../../actions/timelines';
|
||||
import MediaItem from '../../account_gallery/components/media_item';
|
||||
|
||||
import type { Account, Attachment } from 'soapbox/types/entities';
|
||||
|
||||
interface IProfileMediaPanel {
|
||||
account?: Account,
|
||||
}
|
||||
|
||||
const ProfileMediaPanel: React.FC<IProfileMediaPanel> = ({ account }) => {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const attachments: ImmutableList<Attachment> = useAppSelector((state) => account ? getAccountGallery(state, account?.id) : ImmutableList());
|
||||
|
||||
const handleOpenMedia = (attachment: Attachment): void => {
|
||||
if (attachment.type === 'video') {
|
||||
dispatch(openModal('VIDEO', { media: attachment, status: attachment.status }));
|
||||
} else {
|
||||
const media = attachment.getIn(['status', 'media_attachments']) as ImmutableList<Attachment>;
|
||||
const index = media.findIndex(x => x.id === attachment.id);
|
||||
|
||||
dispatch(openModal('MEDIA', { media, index, status: attachment.status, account: attachment.account }));
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
|
||||
if (account) {
|
||||
dispatch(expandAccountMediaTimeline(account.id))
|
||||
// @ts-ignore yes it does
|
||||
.then(() => setLoading(false))
|
||||
.catch(() => {});
|
||||
}
|
||||
}, [account?.id]);
|
||||
|
||||
const renderAttachments = () => {
|
||||
const publicAttachments = attachments.filter(attachment => attachment.getIn(['status', 'visibility']) === 'public');
|
||||
const nineAttachments = publicAttachments.slice(0, 9);
|
||||
|
||||
if (!nineAttachments.isEmpty()) {
|
||||
return (
|
||||
<div className='media-panel__list'>
|
||||
{nineAttachments.map((attachment, _index) => (
|
||||
<MediaItem
|
||||
key={`${attachment.getIn(['status', 'id'])}+${attachment.id}`}
|
||||
attachment={attachment}
|
||||
displayWidth={255}
|
||||
onOpenMedia={handleOpenMedia}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div className='media-panel__empty'>
|
||||
<FormattedMessage id='media_panel.empty_message' defaultMessage='No media found.' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Widget title={<FormattedMessage id='media_panel.title' defaultMessage='Media' />}>
|
||||
{account && (
|
||||
<div className='media-panel__content'>
|
||||
{loading ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
renderAttachments()
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</Widget>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProfileMediaPanel;
|
||||
|
|
@ -13,6 +13,7 @@ import {
|
|||
WhoToFollowPanel,
|
||||
TrendsPanel,
|
||||
ProfileInfoPanel,
|
||||
ProfileMediaPanel,
|
||||
SignUpPanel,
|
||||
} from 'soapbox/features/ui/util/async-components';
|
||||
import { findAccountByUsername } from 'soapbox/selectors';
|
||||
|
|
@ -155,6 +156,9 @@ class ProfilePage extends ImmutablePureComponent {
|
|||
{Component => <Component key='sign-up-panel' />}
|
||||
</BundleContainer>
|
||||
)}
|
||||
<BundleContainer fetchComponent={ProfileMediaPanel}>
|
||||
{Component => <Component account={account} />}
|
||||
</BundleContainer>
|
||||
{showTrendsPanel && (
|
||||
<BundleContainer fetchComponent={TrendsPanel}>
|
||||
{Component => <Component limit={3} key='trends-panel' />}
|
||||
|
|
|
|||
|
|
@ -47,13 +47,11 @@
|
|||
}
|
||||
|
||||
&__list {
|
||||
padding: 0 5px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
&__empty {
|
||||
padding: 0 15px 10px 15px;
|
||||
font-size: 14px;
|
||||
color: var(--primary-text-color--faint);
|
||||
}
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue