import React from 'react' ; import { ButtonSecondary , ButtonWarning , Text } from 'design' ; import { Danger } from 'design/Alert' ; import Dialog , { DialogContent , DialogFooter } from 'design/DialogConfirmation' ; import useAttempt from 'shared/hooks/useAttemptNext' ; export default function RemoveDialog ( props ) { const { name , onClose , onRemove } = props ; const { attempt , handleError , setAttempt } = useAttempt ( '' ) ; function onConfirm ( ) { setAttempt ( { status : 'processing' } ) ; onRemove ( ) . catch ( handleError ) ; } return ( < Dialog disableEscapeKeyDown = { false } onClose = { onClose } open = { true } > < DialogContent width = "400px" > < Text typography = "h2" mb = { 2 } > Remove Device < /Text> { attempt . status == 'failed' && ( < Danger mb = { 2 } > { attempt . statusText } < /Danger>)} < Text typography = "paragraph" mb = "6" > Are you sure you want to remove device { ' ' } < Text as = "span" bold color = "primary.contrastText" > { name } < /Text>{' '} ? < /Text> < /DialogContent> < DialogFooter > < ButtonWarning mr = "3" disabled = { attempt . status === 'processing' } onClick = { onConfirm } > Remove < /ButtonWarning> < ButtonSecondary disabled = { attempt . status === 'processing' } onClick = { onClose } > Cancel < /ButtonSecondary> < /DialogFooter> < /Dialog>); } type Props = { onClose : ( ) => void ; onRemove : ( ) => Promise < any > ; name : string ; } ;