import React , { useState } from 'react' ; import { MuiThemeProvider , Dialog , Checkbox , FormControlLabel , Tooltip , } from '@material-ui/core/' ; import { sendFeedback } from '../../lib/utils' ; import { ButtonContainer , TextFieldContainer , StyledButton , StyledTextField , MuiTheme , StyledDialogTitle , } from '../../style-variables' ; const { ipcRenderer } = window . require ( 'electron' ) ; interface DuplicatePayload { newName : string ; sourceDb : string ; withData : boolean ; } type copyDbModalProps = { open : boolean ; onClose : ( ) => void ; dbCopyName : string ; databases : string [ ] ; } ; const handleDBName = ( dbCopyName , databases ) => { let dbName = dbCopyName ; for ( let i = 1 ; i < Infinity ; i += 1 ) { if ( databases . includes ( dbName ) ) { dbName = dbCopyName ; dbName = dbName . concat ( `_${ i }` ) ; } else { break ; } } return dbName ; } ; const DuplicateDbModal = ( { open , onClose , dbCopyName , databases , } ) => { const [ checked , setChecked ] = useState ( true ) ; const [ newSchemaName , setNewSchemaName ] = useState ( handleDBName ( dbCopyName , databases ) ) ; const [ isError , setIsError ] = useState ( false ) ; const [ isEmpty , setIsEmpty ] = useState ( false ) ; const handleClose = ( ) => { setIsError ( false ) ; setIsEmpty ( true ) ; onClose ( ) ; } ; const errorMessage = ( ) => { if ( isEmpty ) { return 'Required: Database must have a name. Please enter a unique name.' ; } if ( isError ) { return 'This database name already exists. Please enter a unique name.' ; } return '' ; } ; const handleSchemaName = ( event ) => { const schemaNameInput = event . target . value ; if ( schemaNameInput . length === 0 ) { setIsEmpty ( true ) ; } else { setIsEmpty ( false ) ; } let dbSafeName = schemaNameInput ; dbSafeName = dbSafeName . replace ( /[^\w-]/gi , '' ) ; if ( databases . includes ( dbSafeName ) ) { setIsError ( true ) ; } else { setIsError ( false ) ; } setNewSchemaName ( dbSafeName ) ; } ; const handleCopyData = ( event ) => { setChecked ( event . target . checked ) ; } ; const handleCopyFilePath = ( ) => { const schemaObj = { newName : newSchemaName , sourceDb : dbCopyName , withData : checked , } ; ipcRenderer . invoke ( 'duplicate-db' , schemaObj ) . catch ( ( ) => { sendFeedback ( { type : 'error' , message : 'Failed to duplicate database' , } ) ; } ) . finally ( ( ) => { setNewSchemaName ( ' ' ) ; handleClose ( ) ; } ) ; } ; return ( < div > < MuiThemeProvider theme = { MuiTheme } > < Dialog fullWidth maxWidth = "xs" onClose = { handleClose } aria - labelledby = "modal-title" open = { open } > < TextFieldContainer > < StyledDialogTitle id = "alert-dialog-title" > Copy Existing Database < /StyledDialogTitle> < Tooltip title = { checked ? 'Deselect to only copy shell' : 'Select to copy data' } > < FormControlLabel control = { < Checkbox checked = { checked } onChange = { handleCopyData } color = "primary" / > } label = "Copy data" / > < /Tooltip> < StyledTextField required error = { isError || isEmpty } helperText = { errorMessage ( ) } id = "filled-required" label = "Enter a database copy name" variant = "outlined" defaultValue = { newSchemaName } onChange = { handleSchemaName } InputProps = { { style : { color : '#575151' } , } } /> < /TextFieldContainer> < ButtonContainer > < StyledButton variant = "contained" color = "secondary" onClick = { handleClose } > Cancel < /StyledButton> < StyledButton variant = "contained" color = "primary" onClick = { isEmpty || isError ? ( ) => { } : handleCopyFilePath } > Copy < /StyledButton> < /ButtonContainer> < /Dialog> < /MuiThemeProvider> < /div>); } ; export default DuplicateDbModal ;