gab-social/app/javascript/gabsocial/components/panel/media_gallery_panel.js

85 lines
2.3 KiB
JavaScript
Raw Normal View History

2020-02-28 15:20:47 +00:00
import { defineMessages, injectIntl } from 'react-intl'
import ImmutablePureComponent from 'react-immutable-pure-component'
import ImmutablePropTypes from 'react-immutable-proptypes'
2020-03-07 04:53:28 +00:00
import { expandAccountMediaTimeline } from '../../actions/timelines'
import { getAccountGallery } from '../../selectors'
2020-02-28 15:20:47 +00:00
import PanelLayout from './panel_layout'
2020-03-07 04:53:28 +00:00
import MediaItem from '../media_item'
2020-02-24 21:56:07 +00:00
const messages = defineMessages({
2020-02-28 15:20:47 +00:00
title: { id: 'media_gallery_panel.title', defaultMessage: 'Media' },
show_all: { id: 'media_gallery_panel.all', defaultMessage: 'Show all' },
})
2020-02-24 21:56:07 +00:00
2020-03-07 04:53:28 +00:00
const mapStateToProps = (state, { account }) => {
const accountId = !!account ? account.get('id') : -1
2020-02-24 21:56:07 +00:00
return {
2020-03-07 04:53:28 +00:00
accountId,
attachments: getAccountGallery(state, accountId),
2020-02-24 21:56:07 +00:00
}
2020-02-28 15:20:47 +00:00
}
2020-02-24 21:56:07 +00:00
2020-02-25 16:04:44 +00:00
export default
2020-03-07 04:53:28 +00:00
@connect(mapStateToProps)
2020-02-24 21:56:07 +00:00
@injectIntl
2020-02-28 15:20:47 +00:00
class MediaGalleryPanel extends ImmutablePureComponent {
2020-02-24 21:56:07 +00:00
static propTypes = {
2020-03-07 04:53:28 +00:00
dispatch: PropTypes.func.isRequired,
accountId: PropTypes.string,
2020-03-24 04:39:12 +00:00
account: ImmutablePropTypes.map,
2020-03-07 04:53:28 +00:00
attachments: ImmutablePropTypes.list.isRequired,
2020-02-24 21:56:07 +00:00
intl: PropTypes.object.isRequired,
2020-02-28 15:20:47 +00:00
}
2020-02-24 21:56:07 +00:00
2020-02-28 15:20:47 +00:00
componentDidMount() {
2020-03-07 04:53:28 +00:00
const { accountId } = this.props
2020-04-11 23:29:19 +01:00
if (accountId && accountId !== -1) {
2020-04-07 02:53:23 +01:00
this.props.dispatch(expandAccountMediaTimeline(accountId, { limit: 8 }))
2020-03-07 04:53:28 +00:00
}
}
componentWillReceiveProps(nextProps) {
if (nextProps.accountId && nextProps.accountId !== this.props.accountId) {
2020-04-07 02:53:23 +01:00
this.props.dispatch(expandAccountMediaTimeline(nextProps.accountId, { limit: 8 }))
2020-03-07 04:53:28 +00:00
}
2020-02-24 21:56:07 +00:00
}
render() {
2020-03-07 04:53:28 +00:00
const {
intl,
account,
attachments
} = this.props
if (!account || !attachments) return null
2020-02-24 21:56:07 +00:00
return (
<PanelLayout
2020-03-07 04:53:28 +00:00
noPadding
2020-02-24 21:56:07 +00:00
title={intl.formatMessage(messages.title)}
2020-02-28 15:20:47 +00:00
headerButtonTitle={intl.formatMessage(messages.show_all)}
2020-03-07 04:53:28 +00:00
headerButtonTo={`/${account.get('acct')}/media`}
2020-04-29 23:32:49 +01:00
>
{
attachments.size > 0 &&
<div className={[_s.default, _s.flexRow, _s.flexWrap, _s.px10, _s.py10].join(' ')}>
{
attachments.slice(0, 16).map((attachment, i) => (
<MediaItem
isSmall
key={attachment.get('id')}
attachment={attachment}
account={account}
/>
))
}
</div>
}
2020-02-24 21:56:07 +00:00
</PanelLayout>
2020-02-28 15:20:47 +00:00
)
}
2020-05-09 03:17:19 +01:00
}