import React from 'react'; import { AlertDialog, AlertDialogBody, AlertDialogFooter, AlertDialogHeader, AlertDialogContent, AlertDialogOverlay, Button, } from '@chakra-ui/core'; export default function ContentButton({ isAdmin, submitDelete }) { const [isOpen, setIsOpen] = React.useState(); const onClose = () => setIsOpen(false); const cancelRef = React.useRef(); return ( <> {isAdmin && ( <Button variantColor='red' data-cy='adminDeleteReview' onClick={() => setIsOpen(true)} > Delete Content </Button> )} <AlertDialog isOpen={isOpen} leastDestructiveRef={cancelRef} onClose={onClose} > <AlertDialogOverlay /> <AlertDialogContent> <AlertDialogHeader fontSize='lg' fontWeight='bold'> You are about to delete this content. </AlertDialogHeader> <AlertDialogBody>Are you sure?</AlertDialogBody> <AlertDialogFooter> <Button ref={cancelRef} onClick={onClose}> Cancel </Button> <Button variantColor='red' onClick={submitDelete} ml={3} data-cy='adminDeleteReviewConfirm' > Delete </Button> </AlertDialogFooter> </AlertDialogContent> </AlertDialog> </> ); }