gab-social/app/javascript/gabsocial/components/group_header.js

220 lines
7.1 KiB
JavaScript
Raw Normal View History

2020-04-11 23:29:19 +01:00
import ImmutablePropTypes from 'react-immutable-proptypes'
import ImmutablePureComponent from 'react-immutable-pure-component'
2020-04-29 03:24:35 +01:00
import { defineMessages, injectIntl } from 'react-intl'
2020-04-11 23:29:19 +01:00
import { openPopover, closePopover } from '../actions/popover'
import { openModal } from '../actions/modal'
2020-04-29 03:24:35 +01:00
import { joinGroup, leaveGroup } from '../actions/groups'
2020-05-09 03:17:19 +01:00
import {
PLACEHOLDER_MISSING_HEADER_SRC,
BREAKPOINT_EXTRA_SMALL,
} from '../constants'
import { me } from '../initial_state'
2020-05-09 03:17:19 +01:00
import Responsive from '../features/ui/util/responsive_component'
2020-04-11 23:29:19 +01:00
import Button from './button'
import Block from './block'
import Image from './image'
import TabBar from './tab_bar'
import Text from './text'
const messages = defineMessages({
2020-04-29 03:24:35 +01:00
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' }
2020-04-11 23:29:19 +01:00
})
const mapDispatchToProps = (dispatch, { intl }) => ({
2020-05-02 07:25:55 +01:00
onToggleMembership(group, relationships) {
2020-04-29 03:24:35 +01:00
if (relationships.get('member')) {
dispatch(leaveGroup(group.get('id')));
} else {
dispatch(joinGroup(group.get('id')));
}
},
onOpenGroupOptions(targetRef, group, isAdmin) {
2020-05-07 06:55:24 +01:00
dispatch(openPopover('GROUP_OPTIONS', {
targetRef,
group,
isAdmin,
2020-05-07 06:55:24 +01:00
position: 'top',
}))
2020-04-11 23:29:19 +01:00
},
});
export default
@connect(null, mapDispatchToProps)
@injectIntl
class GroupHeader extends ImmutablePureComponent {
static propTypes = {
group: ImmutablePropTypes.map,
2020-05-09 03:17:19 +01:00
children: PropTypes.any,
2020-04-29 03:24:35 +01:00
intl: PropTypes.object.isRequired,
onToggleMembership: PropTypes.func.isRequired,
onOpenGroupOptions: PropTypes.func.isRequired,
2020-04-11 23:29:19 +01:00
relationships: ImmutablePropTypes.map,
}
2020-04-29 03:24:35 +01:00
handleOnToggleMembership = () => {
const { group, relationships } = this.props
this.props.onToggleMembership(group, relationships);
}
2020-05-07 06:55:24 +01:00
handleOnOpenGroupOptions = () => {
const { relationships } = this.props
const isAdmin = relationships ? relationships.get('admin') : false
this.props.onOpenGroupOptions(this.infoBtn, this.props.group, isAdmin)
2020-05-07 06:55:24 +01:00
}
setInfoBtn = (c) => {
this.infoBtn = c;
}
2020-04-11 23:29:19 +01:00
render() {
2020-04-29 03:24:35 +01:00
const {
2020-05-09 03:17:19 +01:00
children,
2020-04-29 03:24:35 +01:00
group,
intl,
relationships,
} = this.props
2020-04-11 23:29:19 +01:00
const tabs = !group ? null : [
{
to: `/groups/${group.get('id')}`,
title: 'Latest',
},
]
2020-04-29 03:24:35 +01:00
const coverSrc = !!group ? group.get('cover_image_url') : ''
const coverSrcMissing = coverSrc.indexOf(PLACEHOLDER_MISSING_HEADER_SRC) > -1 || !coverSrc
2020-04-11 23:29:19 +01:00
const title = !!group ? group.get('title') : undefined
let isAdmin = false
2020-04-29 03:24:35 +01:00
let actionButtonTitle
let actionButtonOptions = {}
if (relationships) {
isAdmin = relationships.get('admin')
2020-04-29 03:24:35 +01:00
const isMember = relationships.get('member')
actionButtonTitle = intl.formatMessage(!isMember ? messages.join : messages.leave)
if (isMember) {
actionButtonOptions = {
2020-05-09 03:17:19 +01:00
backgroundColor: 'danger',
color: 'white',
2020-04-29 03:24:35 +01:00
}
}
}
// : todo :
// {group.get('archived') && <Icon id='lock' title={intl.formatMessage(messages.group_archived)} />}
2020-04-11 23:29:19 +01:00
return (
<div className={[_s.default, _s.z1, _s.width100PC, _s.mb15].join(' ')}>
2020-05-09 03:17:19 +01:00
<Responsive max={BREAKPOINT_EXTRA_SMALL}>
<div className={[_s.default, _s.boxShadowBlock, _s.bgPrimary].join(' ')}>
<div className={[_s.default, _s.width100PC].join(' ')}>
{
coverSrc && !coverSrcMissing &&
<Image className={_s.height200PX} src={coverSrc} alt={title} />
}
<div className={[_s.default, _s.width100PC].join(' ')}>
<div className={[_s.default, _s.width100PC, _s.px15, _s.mt10, _s.py10].join(' ')}>
{children}
</div>
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.borderTop1PX, _s.borderColorSecondary, _s.mt5, _s.pt15, _s.height100PC, _s.px15].join(' ')}>
2020-04-29 03:24:35 +01:00
{
!!actionButtonTitle &&
<Button
radiusSmall
className={_s.mr5}
2020-05-02 07:25:55 +01:00
onClick={this.handleOnToggleMembership}
2020-04-29 03:24:35 +01:00
{...actionButtonOptions}
>
2020-05-09 03:17:19 +01:00
<Text color='inherit' size='small' className={_s.px10}>
2020-04-29 03:24:35 +01:00
{actionButtonTitle}
2020-04-11 23:29:19 +01:00
</Text>
2020-04-29 03:24:35 +01:00
</Button>
}
{
isAdmin &&
<Button
radiusSmall
color='primary'
backgroundColor='tertiary'
className={_s.mr5}
icon='ellipsis'
onClick={this.handleOnOpenGroupOptions}
buttonRef={this.setInfoBtn}
/>
}
2020-04-11 23:29:19 +01:00
</div>
2020-05-09 03:17:19 +01:00
<div className={[_s.default, _s.flexRow, _s.height100PC, _s.mt15, _s.pt10, _s.px10].join(' ')}>
<TabBar tabs={tabs} />
</div>
2020-04-11 23:29:19 +01:00
</div>
</div>
</div>
2020-05-09 03:17:19 +01:00
</Responsive>
{ /** desktop */}
<Responsive min={BREAKPOINT_EXTRA_SMALL}>
<Block>
<div className={[_s.default, _s.width100PC].join(' ')}>
{
coverSrc && !coverSrcMissing &&
<Image className={_s.height350PX} src={coverSrc} alt={title} />
}
<div className={[_s.default, _s.height53PX, _s.width100PC].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.height100PC, _s.px10].join(' ')}>
<TabBar tabs={tabs} />
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.height100PC, _s.mlAuto].join(' ')}>
{
!!actionButtonTitle &&
<Button
radiusSmall
className={_s.mr5}
onClick={this.handleOnToggleMembership}
{...actionButtonOptions}
>
<Text color='inherit' size='small' className={_s.px10}>
{actionButtonTitle}
</Text>
</Button>
}
{
!!me &&
<Button
radiusSmall
color='primary'
backgroundColor='tertiary'
className={_s.mr5}
icon='ellipsis'
onClick={this.handleOnOpenGroupOptions}
buttonRef={this.setInfoBtn}
/>
}
2020-05-09 03:17:19 +01:00
</div>
</div>
</div>
</div>
</Block>
</Responsive>
2020-04-11 23:29:19 +01:00
</div>
)
}
}