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

94 lines
2.9 KiB
JavaScript
Raw Normal View History

import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
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'
import MediaGalleryPanelPlaceholder from '../placeholder/media_gallery_panel_placeholder'
2020-02-24 21:56:07 +00:00
2020-02-28 15:20:47 +00:00
class MediaGalleryPanel extends ImmutablePureComponent {
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 {
account,
attachments,
intl,
isLoading,
2020-03-07 04:53:28 +00:00
} = this.props
if (!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)}
headerButtonTitle={!!account ? intl.formatMessage(messages.show_all) : undefined}
headerButtonTo={!!account ? `/${account.get('acct')}/media` : undefined}
2020-04-29 23:32:49 +01:00
>
<div className={[_s.d, _s.flexRow, _s.flexWrap, _s.px10, _s.py10].join(' ')}>
{
!!account && attachments.size > 0 &&
attachments.slice(0, 16).map((attachment, i) => (
<MediaItem
isSmall
key={attachment.get('id')}
attachment={attachment}
account={account}
/>
))
}
{
!account || (attachments.size === 0 && isLoading) &&
<div className={[_s.d, _s.w100PC].join(' ')}>
<MediaGalleryPanelPlaceholder />
</div>
}
</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
}
const messages = defineMessages({
title: { id: 'media_gallery_panel.title', defaultMessage: 'Media' },
show_all: { id: 'media_gallery_panel.all', defaultMessage: 'Show all' },
})
const mapStateToProps = (state, { account }) => {
const accountId = !!account ? account.get('id') : -1
return {
accountId,
isLoading: state.getIn(['timelines', `account:${accountId}:media`, 'isLoading'], true),
attachments: getAccountGallery(state, accountId),
}
}
MediaGalleryPanel.propTypes = {
dispatch: PropTypes.func.isRequired,
accountId: PropTypes.string,
account: ImmutablePropTypes.map,
isLoading: PropTypes.bool,
attachments: ImmutablePropTypes.list.isRequired,
intl: PropTypes.object.isRequired,
}
export default injectIntl(connect(mapStateToProps)(MediaGalleryPanel))