gab-social/app/javascript/gabsocial/components/popover/group_options_popover.js
mgabdev 99982c0391 Finished updating the reformatting of propTypes and set redux, intl functions to end of component
• Finished:
- updating the reformatting of propTypes and set redux, intl functions to end of component

• Removed:
- Gif implementation
2020-08-18 19:22:15 -05:00

133 lines
3.8 KiB
JavaScript

import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import ImmutablePureComponent from 'react-immutable-pure-component'
import ImmutablePropTypes from 'react-immutable-proptypes'
import { defineMessages, injectIntl } from 'react-intl'
import {
addShortcut,
removeShortcut,
} from '../../actions/shortcuts'
import { closePopover } from '../../actions/popover'
import PopoverLayout from './popover_layout'
import List from '../list'
class GroupOptionsPopover extends ImmutablePureComponent {
handleOnClosePopover = () => {
this.props.onClosePopover()
}
handleOnToggleShortcut = () => {
this.handleOnClosePopover()
if (this.props.isShortcut) {
this.props.onRemoveShortcut(this.props.group.get('id'))
} else {
this.props.onAddShortcut(this.props.group.get('id'))
}
}
render() {
const {
group,
intl,
isAdmin,
isShortcut,
isXS,
} = this.props
if (!group) return <div/>
const groupId = group.get('id')
const listItems = []
if (isAdmin) {
listItems.push({
hideArrow: true,
icon: 'group',
title: intl.formatMessage(messages.groupMembers),
onClick: this.handleOnClosePopover,
to: `/groups/${groupId}/members`,
isHidden: !isAdmin,
})
listItems.push({
hideArrow: true,
icon: 'block',
title: intl.formatMessage(messages.removedMembers),
onClick: this.handleOnClosePopover,
to: `/groups/${groupId}/removed-accounts`,
isHidden: !isAdmin,
})
listItems.push({
hideArrow: true,
icon: 'pencil',
title: intl.formatMessage(messages.editGroup),
onClick: this.handleOnClosePopover,
to: `/groups/${groupId}/edit`,
isHidden: !isAdmin,
})
}
listItems.push({
hideArrow: true,
icon: 'star',
title: intl.formatMessage(isShortcut ? messages.remove_from_shortcuts : messages.add_to_shortcuts),
onClick: this.handleOnToggleShortcut,
})
return (
<PopoverLayout
width={240}
isXS={isXS}
onClose={this.handleOnClosePopover}
>
<List
scrollKey='group_options'
items={listItems}
size={isXS ? 'large' : 'small'}
/>
</PopoverLayout>
)
}
}
const messages = defineMessages({
groupMembers: { id: 'group_members', defaultMessage: 'Group members' },
removedMembers: { id: 'group_removed_members', defaultMessage: 'Removed accounts' },
editGroup: { id: 'edit_group', defaultMessage: 'Edit group' },
add_to_shortcuts: { id: 'account.add_to_shortcuts', defaultMessage: 'Add to shortcuts' },
remove_from_shortcuts: { id: 'account.remove_from_shortcuts', defaultMessage: 'Remove from shortcuts' },
})
const mapStateToProps = (state, { group }) => {
const groupId = group ? group.get('id') : null
const shortcuts = state.getIn(['shortcuts', 'items'])
const isShortcut = !!shortcuts.find((s) => {
return s.get('shortcut_id') == groupId && s.get('shortcut_type') === 'group'
})
return { isShortcut }
}
const mapDispatchToProps = (dispatch) => ({
onClosePopover: () => dispatch(closePopover()),
onAddShortcut(groupId) {
dispatch(addShortcut('group', groupId))
},
onRemoveShortcut(groupId) {
dispatch(removeShortcut(null, 'group', groupId))
},
})
GroupOptionsPopover.defaultProps = {
group: ImmutablePropTypes.map.isRequired,
isAdmin: PropTypes.bool,
intl: PropTypes.object.isRequired,
isXS: PropTypes.bool,
isShortcut: PropTypes.bool,
onAddShortcut: PropTypes.func.isRequired,
onRemoveShortcut: PropTypes.func.isRequired,
onClosePopover: PropTypes.func.isRequired,
}
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(GroupOptionsPopover))