gab-social/app/javascript/gabsocial/components/group_collection_item.js

169 lines
5.0 KiB
JavaScript
Raw Normal View History

import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
2020-02-22 23:26:23 +00:00
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'
2020-02-22 23:26:23 +00:00
import { shortNumberFormat } from '../utils/numbers'
2020-04-02 04:17:21 +01:00
import Image from './image'
import Text from './text'
import GroupActionButton from './group_action_button'
2020-02-22 23:26:23 +00:00
class GroupCollectionItem extends ImmutablePureComponent {
2020-04-08 02:06:59 +01:00
2020-02-22 23:26:23 +00:00
render() {
2020-04-28 06:33:58 +01:00
const {
intl,
group,
relationships,
isHidden,
isAddable,
2020-04-28 06:33:58 +01:00
} = this.props
2020-02-22 23:26:23 +00:00
if (!relationships) return null
2020-04-02 04:17:21 +01:00
const isMember = relationships.get('member')
2020-04-08 02:06:59 +01:00
const isAdmin = relationships.get('admin')
const isModerator = relationships.get('moderator')
2020-04-28 06:33:58 +01:00
const coverSrc = group.get('cover_image_url') || ''
const coverMissing = coverSrc.indexOf(PLACEHOLDER_MISSING_HEADER_SRC) > -1 || !coverSrc
if (isHidden) {
return (
<React.Fragment>
2020-04-28 06:33:58 +01:00
{group.get('title')}
{isMember && intl.formatMessage(messages.member)}
{isAdmin && intl.formatMessage(messages.admin)}
{isModerator && intl.formatMessage(messages.moderator)}
</React.Fragment>
2020-04-28 06:33:58 +01:00
)
}
2020-02-22 23:26:23 +00:00
const navLinkClasses = CX({
d: 1,
2020-02-22 23:26:23 +00:00
noUnderline: 1,
overflowHidden: 1,
borderColorSecondary: 1,
2020-04-25 18:00:51 +01:00
boxShadowBlock: 1,
2020-02-22 23:26:23 +00:00
radiusSmall: 1,
2020-04-25 18:00:51 +01:00
borderTop1PX: 1,
2020-03-11 23:56:18 +00:00
mb10: 1,
ml5: 1,
mr5: 1,
2020-04-29 23:32:49 +01:00
bgPrimary: 1,
bgSubtle_onHover: isMember,
2020-02-22 23:26:23 +00:00
})
let groupTitle = group.get('title') || ''
if (isAddable && groupTitle.length > 52) groupTitle = `${groupTitle.substring(0, 52).trim()}...`
2020-02-22 23:26:23 +00:00
return (
<div className={_s.d}>
2020-02-22 23:26:23 +00:00
<NavLink
to={`/groups/${group.get('id')}`}
className={navLinkClasses}
>
2020-04-08 02:06:59 +01:00
{
2020-04-28 06:33:58 +01:00
!!coverSrc && !coverMissing &&
2020-04-08 02:06:59 +01:00
<Image
src={coverSrc}
alt={group.get('title')}
className={_s.h158PX}
2020-04-08 02:06:59 +01:00
/>
}
{
(!coverSrc || coverMissing) && (isMember || isAdmin || isModerator) &&
<div className={[_s.d, _s.h40PX, _s.bgSubtle, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')} />
2020-04-08 02:06:59 +01:00
}
{
(isMember || isAdmin || isModerator) &&
<div className={[_s.d, _s.flexRow, _s.posAbs, _s.top0, _s.right0, _s.pt10, _s.mr10].join(' ')}>
2020-04-08 02:06:59 +01:00
{
isMember &&
<Text
2020-04-23 07:13:29 +01:00
isBadge
2020-04-29 23:32:49 +01:00
className={_s.bgWhite}
2020-04-08 02:06:59 +01:00
size='extraSmall'
color='brand'
>
{intl.formatMessage(messages.member)}
</Text>
}
{
isAdmin &&
<Text
2020-04-23 07:13:29 +01:00
isBadge
2020-04-29 23:32:49 +01:00
className={[_s.bgBlack, _s.ml5].join(' ')}
2020-04-08 02:06:59 +01:00
size='extraSmall'
color='white'
>
{intl.formatMessage(messages.admin)}
</Text>
}
{
isModerator &&
<Text
isBadge
className={[_s.bgBlack, _s.ml5].join(' ')}
size='extraSmall'
color='white'
>
{intl.formatMessage(messages.moderator)}
</Text>
}
2020-04-08 02:06:59 +01:00
</div>
}
2020-04-02 04:17:21 +01:00
<div className={[_s.d, _s.px10, _s.my10].join(' ')}>
2020-02-22 23:26:23 +00:00
<Text color='primary' size='medium' weight='bold'>
{groupTitle}
2020-02-22 23:26:23 +00:00
</Text>
<div className={[_s.d, _s.flexRow, _s.aiCenter, _s.mt5, _s.mb5].join(' ')}>
2020-02-22 23:26:23 +00:00
<Text color='secondary' size='small'>
{shortNumberFormat(group.get('member_count'))}
&nbsp;
2020-04-08 02:06:59 +01:00
{intl.formatMessage(messages.members)}
2020-02-22 23:26:23 +00:00
</Text>
</div>
{
isAddable &&
<div className={[_s.d, _s.pt10].join(' ')}>
<GroupActionButton group={group} relationships={relationships} />
</div>
}
2020-02-22 23:26:23 +00:00
</div>
</NavLink>
</div>
)
}
2020-04-08 02:06:59 +01:00
}
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' },
moderator: { id: 'moderator', defaultMessage: 'Moderator' },
})
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,
isAddable: PropTypes.bool,
}
export default injectIntl(connect(mapStateToProps)(GroupCollectionItem))