import React, { useState, useEffect } from 'react' import PropTypes from 'prop-types' import { Trans, useTranslation } from 'react-i18next' import { useProjectContext, useShareProjectContext, } from './share-project-modal' import Icon from '../../../shared/components/icon' import TransferOwnershipModal from './transfer-ownership-modal' import { Button, Col, Form, FormControl, FormGroup, OverlayTrigger, Tooltip, } from 'react-bootstrap' import { removeMemberFromProject, updateMember } from '../utils/api' export default function EditMember({ member }) { const [privileges, setPrivileges] = useState(member.privileges) const [ confirmingOwnershipTransfer, setConfirmingOwnershipTransfer, ] = useState(false) // update the local state if the member's privileges change externally useEffect(() => { setPrivileges(member.privileges) }, [member.privileges]) const { updateProject, monitorRequest } = useShareProjectContext() const project = useProjectContext() function handleSubmit(event) { event.preventDefault() if (privileges === 'owner') { setConfirmingOwnershipTransfer(true) } else { monitorRequest(() => updateMember(project, member, { privilegeLevel: privileges, }) ).then(() => { updateProject({ members: project.members.map(item => item._id === member._id ? { ...item, privileges } : item ), }) }) } } if (confirmingOwnershipTransfer) { return ( setConfirmingOwnershipTransfer(false)} /> ) } return (
{member.email} setPrivileges(event.target.value)} /> {privileges === member.privileges ? ( ) : ( setPrivileges(member.privileges)} /> )}
) } EditMember.propTypes = { member: PropTypes.shape({ _id: PropTypes.string.isRequired, email: PropTypes.string.isRequired, privileges: PropTypes.string.isRequired, }), } function SelectPrivilege({ value, handleChange }) { const { t } = useTranslation() return ( ) } SelectPrivilege.propTypes = { value: PropTypes.string.isRequired, handleChange: PropTypes.func.isRequired, } function RemoveMemberAction({ member }) { const { t } = useTranslation() const { updateProject, monitorRequest } = useShareProjectContext() const project = useProjectContext() function handleClick(event) { event.preventDefault() monitorRequest(() => removeMemberFromProject(project, member)).then(() => { updateProject({ members: project.members.filter(existing => existing !== member), }) }) } return ( } > ) } RemoveMemberAction.propTypes = { member: PropTypes.shape({ _id: PropTypes.string.isRequired, email: PropTypes.string.isRequired, privileges: PropTypes.string.isRequired, }), } function ChangePrivilegesActions({ handleReset }) { return (
 
) } ChangePrivilegesActions.propTypes = { handleReset: PropTypes.func.isRequired, }