import { isUndefined } from 'lodash' ; import { ChangeEvent , SetStateAction , useState } from 'react' ; import { FaTrashAlt } from 'react-icons/fa' ; import { IoMdCloseCircle } from 'react-icons/io' ; import API from '../../../api' ; import { ErrorKind , Repository } from '../../../types' ; import alertDispatcher from '../../../utils/alertDispatcher' ; import InputField from '../../common/InputField' ; import Modal from '../../common/Modal' ; import styles from './Modal.module.css' ; interface Props { repository : Repository ; organizationName ? : string ; setDeletionModalStatus : ( value : SetStateAction < boolean > ) => void ; onSuccess : ( ) => void ; onAuthError : ( ) => void ; } const DeletionModal = ( props ) => { const [ isDeleting , setIsDeleting ] = useState ( false ) ; const [ isValidInput , setIsValidInput ] = useState < boolean > ( false ) ; const onInputChange = ( e ) => { setIsValidInput ( e . target . value === props . repository . name ) ; } ; async function deleteRepository ( ) { try { setIsDeleting ( true ) ; await API . deleteRepository ( props . repository . name , props . organizationName ) ; setIsDeleting ( false ) ; props . onSuccess ( ) ; } catch ( err ) { setIsDeleting ( false ) ; if ( err . kind === ErrorKind . Unauthorized ) { props . onAuthError ( ) ; } else { let errorMessage = 'An error occurred deleting the repository, please try again later.' ; if ( ! isUndefined ( props . organizationName ) && err . kind === ErrorKind . Forbidden ) { errorMessage = 'You do not have permissions to delete the repository from the organization.' ; } alertDispatcher . postAlert ( { type : 'danger' , message : errorMessage , } ) ; } } } return ( < Modal className = "d-inline-block" closeButton = { < > < button className = "btn btn-sm btn-outline-secondary text-uppercase" onClick = { ( ) => props . setDeletionModalStatus ( false ) } aria - label = "Cancel" > < div className = "d-flex flex-row align-items-center" > < IoMdCloseCircle className = "me-2" / > < span > Cancel < /span> < /div> < /button> < button className = "btn btn-sm btn-danger ms-3" onClick = { ( e ) => { e . preventDefault ( ) ; deleteRepository ( ) ; } } disabled = { isDeleting || ! isValidInput } aria - label = "Delete repository" > < div className = "d-flex flex-row align-items-center text-uppercase" > { isDeleting ? ( < > < span className = "spinner-grow spinner-grow-sm" role = "status" aria - hidden = "true" / > < span className = "ms-2" > Deleting ... < /span> < />) : (<> < FaTrashAlt className = "me-2" / > < span > Delete < /span> < />)} < /div> < /button> < />} header={<div className={`h3 m-2 flex-grow-1 ${styles.title}`}>Delete repository</div > } onClose = { ( ) => props . setDeletionModalStatus ( false ) } open > < div className = "mw-100" > < div className = "alert alert-warning my-4" > < span className = "fw-bold text-uppercase" > Important : < /span> Please read this carefully. < /div> < p > If you delete this repository all packages belonging to it will be deleted . < /p> < p > All information related to your repository or packages will be permanently deleted as well . This includes packages ' stars, users subscriptions to packages, webhooks, events and notifications. < /p> < p > < span className = "fw-bold" > This operation cannot be undone < /span>. < /p> < p > Please type < span className = "fw-bold" > { props . repository . name } < /span> to confirm: < /p> < InputField type = "text" name = "repoName" autoComplete = "off" value = "" onChange = { onInputChange } / > < /div> < /Modal>); } ; export default DeletionModal ;