77 lines
2.5 KiB
JavaScript
77 lines
2.5 KiB
JavaScript
import ImmutablePropTypes from 'react-immutable-proptypes';
|
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
|
import { defineMessages, injectIntl } from 'react-intl';
|
|
import { NavLink } from 'react-router-dom';
|
|
import Button from '../../../../components/button';
|
|
|
|
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' },
|
|
edit: { id: 'groups.edit', defaultMessage: 'Edit' }
|
|
});
|
|
|
|
export default
|
|
@injectIntl
|
|
class Header extends ImmutablePureComponent {
|
|
static propTypes = {
|
|
group: ImmutablePropTypes.map,
|
|
relationships: ImmutablePropTypes.map,
|
|
toggleMembership: PropTypes.func.isRequired,
|
|
};
|
|
|
|
static contextTypes = {
|
|
router: PropTypes.object,
|
|
};
|
|
|
|
getActionButton() {
|
|
const { group, relationships, toggleMembership, intl } = this.props;
|
|
const toggle = () => toggleMembership(group, relationships);
|
|
|
|
if (!relationships) {
|
|
return '';
|
|
} else if (!relationships.get('member')) {
|
|
return <Button className='logo-button' text={intl.formatMessage(messages.join)} onClick={toggle} />;
|
|
} else if (relationships.get('member')) {
|
|
return <Button className='logo-button' text={intl.formatMessage(messages.leave, { name: group.get('title') })} onClick={toggle} />;
|
|
}
|
|
}
|
|
|
|
getAdminMenu() {
|
|
const { group, intl } = this.props;
|
|
|
|
const menu = [
|
|
{ text: intl.formatMessage(messages.edit), to: `/groups/${group.get('id')}/edit` },
|
|
{ text: intl.formatMessage(messages.removed_accounts), to: `/groups/${group.get('id')}/removed-accounts` },
|
|
];
|
|
|
|
// <DropdownMenuContainer items={menu} icon='ellipsis-v' size={24} direction='right' />;
|
|
return <div></div>
|
|
}
|
|
|
|
render () {
|
|
const { group, relationships } = this.props;
|
|
|
|
if (!group || !relationships) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className='group__header-container'>
|
|
<div className="group__header">
|
|
<div className='group__cover'>
|
|
<img src={group.get('cover_image_url')} alt='' className='parallax' />
|
|
</div>
|
|
|
|
<div className='group__tabs'>
|
|
<NavLink exact className='group__tabs__tab' activeClassName='group__tabs__tab--active' to={`/groups/${group.get('id')}`}>Posts</NavLink>
|
|
<NavLink exact className='group__tabs__tab' activeClassName='group__tabs__tab--active' to={`/groups/${group.get('id')}/members`}>Members</NavLink>
|
|
{this.getActionButton()}
|
|
{relationships.get('admin') && this.getAdminMenu()}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|