143 lines
4.0 KiB
JavaScript
143 lines
4.0 KiB
JavaScript
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { connect } from 'react-redux'
|
|
import ImmutablePropTypes from 'react-immutable-proptypes'
|
|
import ImmutablePureComponent from 'react-immutable-pure-component'
|
|
import { NavLink } from 'react-router-dom'
|
|
import { defineMessages, injectIntl } from 'react-intl'
|
|
import { PLACEHOLDER_MISSING_HEADER_SRC, CX } from '../constants'
|
|
import { shortNumberFormat } from '../utils/numbers'
|
|
import Image from './image'
|
|
import Text from './text'
|
|
|
|
class GroupCollectionItem extends ImmutablePureComponent {
|
|
|
|
render() {
|
|
const {
|
|
intl,
|
|
group,
|
|
relationships,
|
|
isHidden,
|
|
} = this.props
|
|
|
|
if (!relationships) return null
|
|
|
|
const isMember = relationships.get('member')
|
|
const isAdmin = relationships.get('admin')
|
|
const coverSrc = group.get('cover_image_url') || ''
|
|
const coverMissing = coverSrc.indexOf(PLACEHOLDER_MISSING_HEADER_SRC) > -1 || !coverSrc
|
|
|
|
|
|
if (isHidden) {
|
|
return (
|
|
<React.Fragment>
|
|
{group.get('title')}
|
|
{isMember && intl.formatMessage(messages.member)}
|
|
{isAdmin && intl.formatMessage(messages.admin)}
|
|
</React.Fragment>
|
|
)
|
|
}
|
|
|
|
const navLinkClasses = CX({
|
|
d: 1,
|
|
noUnderline: 1,
|
|
overflowHidden: 1,
|
|
borderColorSecondary: 1,
|
|
boxShadowBlock: 1,
|
|
radiusSmall: 1,
|
|
borderTop1PX: 1,
|
|
mb10: 1,
|
|
ml5: 1,
|
|
mr5: 1,
|
|
bgPrimary: 1,
|
|
bgSubtle_onHover: isMember,
|
|
})
|
|
|
|
return (
|
|
<div className={_s.d}>
|
|
<NavLink
|
|
to={`/groups/${group.get('id')}`}
|
|
className={navLinkClasses}
|
|
>
|
|
{
|
|
!!coverSrc && !coverMissing &&
|
|
<Image
|
|
src={coverSrc}
|
|
alt={group.get('title')}
|
|
className={_s.h158PX}
|
|
/>
|
|
}
|
|
|
|
{
|
|
(!coverSrc || coverMissing) && (isMember || isAdmin) &&
|
|
<div className={[_s.d, _s.h40PX, _s.bgSubtle, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')} />
|
|
}
|
|
|
|
{
|
|
(isMember || isAdmin) &&
|
|
<div className={[_s.d, _s.flexRow, _s.posAbs, _s.top0, _s.right0, _s.pt10, _s.mr10].join(' ')}>
|
|
{
|
|
isMember &&
|
|
<Text
|
|
isBadge
|
|
className={_s.bgWhite}
|
|
size='extraSmall'
|
|
color='brand'
|
|
>
|
|
{intl.formatMessage(messages.member)}
|
|
</Text>
|
|
}
|
|
{
|
|
isAdmin &&
|
|
<Text
|
|
isBadge
|
|
className={[_s.bgBlack, _s.ml5].join(' ')}
|
|
size='extraSmall'
|
|
color='white'
|
|
>
|
|
{intl.formatMessage(messages.admin)}
|
|
</Text>
|
|
}
|
|
</div>
|
|
}
|
|
|
|
<div className={[_s.d, _s.px10, _s.my10].join(' ')}>
|
|
<Text color='primary' size='medium' weight='bold'>
|
|
{group.get('title')}
|
|
</Text>
|
|
|
|
<div className={[_s.d, _s.flexRow, _s.aiCenter, _s.mt5, _s.mb5].join(' ')}>
|
|
<Text color='secondary' size='small'>
|
|
{shortNumberFormat(group.get('member_count'))}
|
|
|
|
{intl.formatMessage(messages.members)}
|
|
</Text>
|
|
</div>
|
|
</div>
|
|
|
|
</NavLink>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
}
|
|
|
|
const messages = defineMessages({
|
|
members: { id: 'groups.card.members', defaultMessage: 'Members' },
|
|
viewGroup: { id: 'view_group', defaultMessage: 'View Group' },
|
|
member: { id: 'member', defaultMessage: 'Member' },
|
|
admin: { id: 'admin', defaultMessage: 'Admin' },
|
|
})
|
|
|
|
const mapStateToProps = (state, { id }) => ({
|
|
group: state.getIn(['groups', id]),
|
|
relationships: state.getIn(['group_relationships', id]),
|
|
})
|
|
|
|
GroupCollectionItem.propTypes = {
|
|
group: ImmutablePropTypes.map,
|
|
relationships: ImmutablePropTypes.map,
|
|
isHidden: PropTypes.bool,
|
|
}
|
|
|
|
export default injectIntl(connect(mapStateToProps)(GroupCollectionItem)) |