gab-social/app/javascript/gabsocial/features/groups/timeline/components/header.js

78 lines
2.7 KiB
JavaScript
Raw Normal View History

2019-07-02 08:10:25 +01:00
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
2019-07-15 14:47:05 +01:00
import Button from 'gabsocial/components/button';
2019-07-02 08:10:25 +01:00
import ImmutablePureComponent from 'react-immutable-pure-component';
2019-07-15 14:47:05 +01:00
import { defineMessages, injectIntl } from 'react-intl';
2019-07-02 08:10:25 +01:00
import { NavLink } from 'react-router-dom';
import DropdownMenuContainer from '../../../../containers/dropdown_menu_container';
2019-07-02 08:10:25 +01:00
2019-07-15 14:47:05 +01:00
const messages = defineMessages({
join: { id: 'groups.join', defaultMessage: 'Join group' },
leave: { id: 'groups.leave', defaultMessage: 'Leave group' },
2019-07-17 19:56:06 +01:00
removed_accounts: { id: 'groups.removed_accounts', defaultMessage: 'Removed Accounts' },
edit: { id: 'groups.edit', defaultMessage: 'Edit' }
2019-07-15 14:47:05 +01:00
});
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 = [
2019-07-17 19:56:06 +01:00
{ text: intl.formatMessage(messages.edit), to: `/groups/${group.get('id')}/edit` },
{ text: intl.formatMessage(messages.removed_accounts), to: `/groups/${group.get('id')}/removed_accounts` },
];
return <DropdownMenuContainer items={menu} icon='ellipsis-v' size={24} direction='right' />;
}
2019-07-15 14:47:05 +01:00
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()}
2019-07-15 14:47:05 +01:00
</div>
</div>
</div>
);
}
2019-07-02 08:10:25 +01:00
}