import React from 'react' import PropTypes from 'prop-types' import { connect } from 'react-redux' import { NavLink } from 'react-router-dom' import { defineMessages, injectIntl } from 'react-intl' import ImmutablePureComponent from 'react-immutable-pure-component' import ImmutablePropTypes from 'react-immutable-proptypes' import moment from 'moment-mini' import { shortNumberFormat } from '../../utils/numbers' import slugify from '../../utils/slugify' import PanelLayout from './panel_layout' import Button from '../button' import Divider from '../divider' import Heading from '../heading' import Icon from '../icon' import Text from '../text' import DotTextSeperator from '../dot_text_seperator' import ProfileInfoPanelPlaceholder from '../placeholder/profile_info_panel_placeholder' class GroupInfoPanel extends ImmutablePureComponent { render() { const { intl, group, noPanel, relationships, } = this.props if (!group && !noPanel) { return (
) } const isAdmin = relationships ? relationships.get('admin') : false const groupId = !!group ? group.get('id') : '' const slug = !!group ? !!group.get('slug') ? `g/${group.get('slug')}` : undefined : undefined const isPrivate = !!group ? group.get('is_private') : false const isVisible = !!group ? group.get('is_visible') : false const tags = !!group ? group.get('tags') : [] const groupCategory = !!group ? group.getIn(['group_category', 'text'], null) : null const descriptionHTML = !!group ? { __html: group.get('description_html') } : {} if (noPanel) { return (
{ !!group && {group.get('title')} { !!slug && {slug} }
{intl.formatMessage(isPrivate ? messages.privateGroup : messages.publicGroup)} {shortNumberFormat(group.get('member_count'))}   {intl.formatMessage(messages.members)}
}
) } return ( { !!group &&
{ !!groupCategory && } {moment(group.get('created_at')).format('LL')} { !!tags &&
{ tags.map((tag) => (
{tag}
)) }
} } ) } } class GroupInfoPanelRow extends React.PureComponent { render() { const { icon, title } = this.props return (
{title}
{this.props.children}
) } } GroupInfoPanelRow.propTypes = { icon: PropTypes.string, title: PropTypes.string.isRequired, } const messages = defineMessages({ title: { id: 'about', defaultMessage: 'About' }, members: { id: 'members', defaultMessage: 'Members' }, created: { id: 'created', defaultMessage: 'Created' }, category: { id: 'category', defaultMessage: 'Category' }, tags: { id: 'tags', defaultMessage: 'Tags' }, privateGroup: { id: 'group.private', defaultMessage: 'Private' }, publicGroup: { id: 'group.public', defaultMessage: 'Public' }, visibleGroup: { id: 'group.visible', defaultMessage: 'Visible' }, invisibleGroup: { id: 'group.invisible', defaultMessage: 'Invisible' }, }) const mapStateToProps = (state, { group }) => { const groupId = group ? group.get('id') : -1 const relationships = group === -1 ? null : state.getIn(['group_relationships', groupId]) return { relationships } } GroupInfoPanel.propTypes = { group: ImmutablePropTypes.map.isRequired, intl: PropTypes.object.isRequired, noPanel: PropTypes.bool, relationships: ImmutablePropTypes.map, } export default injectIntl(connect(mapStateToProps)(GroupInfoPanel))