154 lines
4.6 KiB
JavaScript
154 lines
4.6 KiB
JavaScript
import React, { Component } from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { withStyles } from '@material-ui/core/styles'
|
|
import { Mutation } from 'react-apollo'
|
|
|
|
import Button from '@material-ui/core/Button'
|
|
import PersonAddDisabledIcon from '@material-ui/icons/PersonAddDisabled'
|
|
import Dialog from '@material-ui/core/Dialog'
|
|
import DialogActions from '@material-ui/core/DialogActions'
|
|
import DialogContent from '@material-ui/core/DialogContent'
|
|
import DialogTitle from '@material-ui/core/DialogTitle'
|
|
import Typography from '@material-ui/core/Typography'
|
|
|
|
import REMOVE_TEAM_MEMBER from '../../../graphql/teams/RemoveTeamMemberMutation'
|
|
import GET_TEAMS_BY_OWNER from '../../../graphql/teams/GetTeamsByOwnerQuery'
|
|
|
|
import { checkGraphQLError } from '../../../utils/graphql-errors'
|
|
import log from '../../../utils/log'
|
|
|
|
const styles = theme => ({
|
|
dialogContainer: {
|
|
display: 'block',
|
|
margin: '3em',
|
|
minWidth: 400
|
|
},
|
|
buttonRight: {
|
|
justifyContent: 'flex-end'
|
|
}
|
|
})
|
|
|
|
export class ManageMemberDelete extends Component {
|
|
constructor (props) {
|
|
super(props)
|
|
|
|
this.handleClickOpen = this.handleClickOpen.bind(this)
|
|
this.handleClose = this.handleClose.bind(this)
|
|
this.handleChange = this.handleChange.bind(this)
|
|
this.handleSubmit = this.handleSubmit.bind(this)
|
|
|
|
this.state = {
|
|
open: false
|
|
}
|
|
}
|
|
|
|
handleClickOpen () {
|
|
this.setState({ open: true })
|
|
}
|
|
|
|
handleClose () {
|
|
this.setState({ open: false })
|
|
}
|
|
|
|
handleChange (e) {
|
|
this.setState({ name: e.target.value })
|
|
}
|
|
|
|
render () {
|
|
log.debug(this.props, this.props.teamId)
|
|
const { classes, teamId, authId } = this.props
|
|
return (
|
|
<Mutation
|
|
mutation={REMOVE_TEAM_MEMBER}
|
|
refetchQueries={[{ query: GET_TEAMS_BY_OWNER }]}
|
|
>
|
|
{(deleteTeam, { loading, error, data }) => {
|
|
let errors
|
|
let loader
|
|
if (loading) {
|
|
loader = (
|
|
<Typography variant='caption'>Submitting team...</Typography>
|
|
)
|
|
}
|
|
if (error) {
|
|
errors = error.graphQLErrors.map(({ message }, i) => {
|
|
const displayMessage = checkGraphQLError(message)
|
|
log.debug('createTeam error:', displayMessage)
|
|
return (
|
|
<Typography key={i} variant='caption'>
|
|
{message}
|
|
</Typography>
|
|
)
|
|
})
|
|
}
|
|
return (
|
|
<React.Fragment>
|
|
<Button
|
|
size='small'
|
|
color='primary'
|
|
className={classes.buttonRight}
|
|
onClick={this.handleClickOpen}
|
|
>
|
|
<PersonAddDisabledIcon /> Remove
|
|
</Button>
|
|
<Dialog
|
|
open={this.state.open}
|
|
onClose={this.handleClose}
|
|
aria-labelledby='form-dialog-title'
|
|
>
|
|
<div classes={classes.dialogContainer}>
|
|
<DialogTitle id='form-dialog-title'>
|
|
Remove Team Member
|
|
</DialogTitle>
|
|
<DialogContent>
|
|
<Typography variant='subtitle1' color='primary'>
|
|
DANGER - Removing your team cannot be undone
|
|
</Typography>
|
|
<Typography variant='subtitle1'>
|
|
Are you sure you want to remove this team member?
|
|
</Typography>
|
|
{loader}
|
|
{errors}
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button onClick={this.handleClose} color='primary'>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
onClick={e => {
|
|
this.handleSubmit(
|
|
e,
|
|
deleteTeam,
|
|
teamId,
|
|
authId
|
|
)
|
|
}}
|
|
color='primary'
|
|
>
|
|
Remove Member
|
|
</Button>
|
|
</DialogActions>
|
|
</div>
|
|
</Dialog>
|
|
</React.Fragment>
|
|
)
|
|
}}
|
|
</Mutation>
|
|
)
|
|
}
|
|
|
|
async handleSubmit (e, deleteTeam, teamId, memberId) {
|
|
e.preventDefault()
|
|
await deleteTeam({ variables: { teamId, memberId } })
|
|
this.setState({ open: false })
|
|
}
|
|
}
|
|
|
|
ManageMemberDelete.propTypes = {
|
|
classes: PropTypes.object.isRequired,
|
|
teamId: PropTypes.string.isRequired,
|
|
authId: PropTypes.string
|
|
}
|
|
|
|
export default withStyles(styles)(ManageMemberDelete)
|