import ImmutablePropTypes from 'react-immutable-proptypes' import ImmutablePureComponent from 'react-immutable-pure-component' import { Fragment } from 'react' import { NavLink } from 'react-router-dom' import { defineMessages, injectIntl } from 'react-intl' import classNames from 'classnames/bind' import { PLACEHOLDER_MISSING_HEADER_SRC } from '../constants' import { shortNumberFormat } from '../utils/numbers' import Button from './button' import DotTextSeperator from './dot_text_seperator' import Image from './image' import Text from './text' const messages = defineMessages({ members: { id: 'groups.card.members', defaultMessage: 'Members' }, new_statuses: { id: 'groups.sidebar-panel.item.view', defaultMessage: 'new gabs' }, no_recent_activity: { id: 'groups.sidebar-panel.item.no_recent_activity', defaultMessage: 'No recent activity' }, 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]), }) const cx = classNames.bind(_s) export default @connect(mapStateToProps) @injectIntl class GroupCollectionItem extends ImmutablePureComponent { static propTypes = { group: ImmutablePropTypes.map, relationships: ImmutablePropTypes.map, isHidden: PropTypes.bool, } render() { const { intl, group, relationships, isHidden, } = this.props if (!relationships) return null const unreadCount = relationships.get('unread_count') const subtitle = unreadCount > 0 ? ( {shortNumberFormat(unreadCount)}   {intl.formatMessage(messages.new_statuses)} ) : intl.formatMessage(messages.no_recent_activity) 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 ( {group.get('title')} {subtitle} {isMember && intl.formatMessage(messages.member)} {isAdmin && intl.formatMessage(messages.admin)} ) } const navLinkClasses = cx({ default: 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 (
{ !!coverSrc && !coverMissing && {group.get('title')} } { (!coverSrc || coverMissing) && (isMember || isAdmin) &&
} { (isMember || isAdmin) &&
{ isMember && {intl.formatMessage(messages.member)} } { isAdmin && {intl.formatMessage(messages.admin)} }
}
{group.get('title')}
{shortNumberFormat(group.get('member_count'))}   {intl.formatMessage(messages.members)} {subtitle}
) } }