import ImmutablePropTypes from 'react-immutable-proptypes' import ImmutablePureComponent from 'react-immutable-pure-component' import { defineMessages, injectIntl } from 'react-intl' import { openPopover, closePopover } from '../actions/popover' import { openModal } from '../actions/modal' import { joinGroup, leaveGroup } from '../actions/groups' import { PLACEHOLDER_MISSING_HEADER_SRC, BREAKPOINT_EXTRA_SMALL, } from '../constants' import Responsive from '../features/ui/util/responsive_component' import Button from './button' import Block from './block' import Image from './image' import TabBar from './tab_bar' import Text from './text' const messages = defineMessages({ join: { id: 'groups.join', defaultMessage: 'Join group' }, leave: { id: 'groups.leave', defaultMessage: 'Leave group' }, removed_accounts: { id: 'groups.removed_accounts', defaultMessage: 'Removed Accounts' }, group_archived: { id: 'group.detail.archived_group', defaultMessage: 'Archived group' }, group_admin: { id: 'groups.detail.role_admin', defaultMessage: 'You\'re an admin' } }) const mapDispatchToProps = (dispatch, { intl }) => ({ onToggleMembership(group, relationships) { if (relationships.get('member')) { dispatch(leaveGroup(group.get('id'))); } else { dispatch(joinGroup(group.get('id'))); } }, onOpenGroupOptions(targetRef, group) { dispatch(openPopover('GROUP_OPTIONS', { targetRef, group, position: 'top', })) }, }); export default @connect(null, mapDispatchToProps) @injectIntl class GroupHeader extends ImmutablePureComponent { static propTypes = { group: ImmutablePropTypes.map, children: PropTypes.any, intl: PropTypes.object.isRequired, onToggleMembership: PropTypes.func.isRequired, onOpenGroupOptions: PropTypes.func.isRequired, relationships: ImmutablePropTypes.map, } handleOnToggleMembership = () => { const { group, relationships } = this.props this.props.onToggleMembership(group, relationships); } handleOnOpenGroupOptions = () => { this.props.onOpenGroupOptions(this.infoBtn, this.props.group) } setInfoBtn = (c) => { this.infoBtn = c; } render() { const { children, group, intl, relationships, } = this.props const tabs = !group ? null : [ { to: `/groups/${group.get('id')}`, title: 'Latest', }, ] const coverSrc = !!group ? group.get('cover_image_url') : '' const coverSrcMissing = coverSrc.indexOf(PLACEHOLDER_MISSING_HEADER_SRC) > -1 || !coverSrc const title = !!group ? group.get('title') : undefined let isAdmin = false let actionButtonTitle let actionButtonOptions = {} if (relationships) { isAdmin = relationships.get('admin') const isMember = relationships.get('member') actionButtonTitle = intl.formatMessage(!isMember ? messages.join : messages.leave) if (isMember) { actionButtonOptions = { backgroundColor: 'danger', color: 'white', } } } // : todo : // {group.get('archived') && } return (
{ coverSrc && !coverSrcMissing && {title} }
{children}
{ !!actionButtonTitle && } { isAdmin &&
{ /** desktop */}
{ coverSrc && !coverSrcMissing && {title} }
{ !!actionButtonTitle && } { isAdmin &&
) } }