diff --git a/static/app/components/modals/createTeamModal.tsx b/static/app/components/modals/createTeamModal.tsx index eccba831a95fd8..c69b494b92992c 100644 --- a/static/app/components/modals/createTeamModal.tsx +++ b/static/app/components/modals/createTeamModal.tsx @@ -1,52 +1,45 @@ -import {Component, Fragment} from 'react'; +import {Fragment} from 'react'; import {ModalRenderProps} from 'app/actionCreators/modal'; import {createTeam} from 'app/actionCreators/teams'; -import {Client} from 'app/api'; import CreateTeamForm from 'app/components/teams/createTeamForm'; import {t} from 'app/locale'; import {Organization, Team} from 'app/types'; -import withApi from 'app/utils/withApi'; +import useApi from 'app/utils/useApi'; -type Props = { - api: Client; +type Props = ModalRenderProps & { organization: Organization; onClose?: (team: Team) => void; -} & ModalRenderProps; - -class CreateTeamModal extends Component { - handleSubmit = (data: {slug: string}, onSuccess: Function, onError: Function) => { - const {organization, api} = this.props; - createTeam(api, data, {orgId: organization.slug}) - .then((resp: Team) => { - this.handleSuccess(resp); - onSuccess(resp); - }) - .catch((err: Error) => { - onError(err); - }); - }; - - handleSuccess(team: Team) { - if (this.props.onClose) { - this.props.onClose(team); +}; + +function CreateTeamModal({Body, Header, ...props}: Props) { + const {onClose, closeModal, organization} = props; + const api = useApi(); + + async function handleSubmit( + data: {slug: string}, + onSuccess: Function, + onError: Function + ) { + try { + const team: Team = await createTeam(api, data, {orgId: organization.slug}); + + closeModal(); + onClose?.(team); + onSuccess(team); + } catch (err) { + onError(err); } - - this.props.closeModal(); } - render() { - const {Body, Header, ...props} = this.props; - - return ( - -
{t('Create Team')}
- - - - - ); - } + return ( + +
{t('Create Team')}
+ + + + + ); } -export default withApi(CreateTeamModal); +export default CreateTeamModal;