import React , { useState } from 'react' ; import { Dialog , DialogTitle , Tooltip } from '@material-ui/core/' ; import CloudUploadIcon from '@material-ui/icons/CloudUpload' ; import { ipcRenderer , remote } from 'electron' ; import { sendFeedback } from '../../lib/utils' ; import { ButtonContainer , TextFieldContainer , StyledButton , StyledTextField , } from '../../style-variables' ; const { dialog } = remote ; interface ImportPayload { newDbName : string ; filePath : string ; } type AddNewDbModalProps = { open : boolean ; onClose : ( ) => void ; databases : string [ ] ; } ; const AddNewDbModal = ( { open , onClose , databases } ) => { const [ newDbName , setNewDbName ] = useState ( '' ) ; const [ isError , setIsError ] = useState ( false ) ; const [ isEmpty , setIsEmpty ] = useState ( true ) ; 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 handleDbName = ( event ) => { const dbNameInput = event . target . value ; if ( dbNameInput . length === 0 ) { setIsEmpty ( true ) ; } else { setIsEmpty ( false ) ; } let dbSafeName = dbNameInput ; dbSafeName = dbSafeName . replace ( /[^\w-]/gi , '' ) ; if ( databases . includes ( dbSafeName ) ) { setIsError ( true ) ; } else { setIsError ( false ) ; } setNewDbName ( dbSafeName ) ; } ; const handleFileClick = ( ) => { dialog . showOpenDialog ( { properties : [ 'openFile' ] , filters : [ { name : 'Custom File Type' , extensions : [ 'sql' , 'tar' ] } ] , message : 'Please upload .sql or .tar database file' , } ) . then ( ( result ) => { if ( result . canceled ) return ; if ( ! result . filePaths . length ) { sendFeedback ( { type : 'warning' , message : 'No file was selected' , } ) ; return ; } const payload = { newDbName , filePath : result . filePaths [ 0 ] , } ; ipcRenderer . invoke ( 'import-db' , payload ) . catch ( ( ) => sendFeedback ( { type : 'error' , message : 'Failed to import database' , } ) ) ; } ) . catch ( ( err ) => { console . log ( err ) ; } ) . finally ( handleClose ) ; } ; return ( < div > < Dialog fullWidth maxWidth = "xs" onClose = { handleClose } aria - labelledby = "modal-title" open = { open } > < TextFieldContainer > < DialogTitle id = "alert-dialog-title" > Import Existing SQL or TAR File < /DialogTitle> < Tooltip title = "Any special characters will be removed" > < StyledTextField required error = { isError } helperText = { errorMessage ( ) } id = "filled-basic" label = "Enter a database name" size = "small" variant = "outlined" onChange = { handleDbName } InputProps = { { style : { color : '#575151' } , } } /> < /Tooltip> < /TextFieldContainer> < ButtonContainer > < StyledButton variant = "contained" color = "secondary" onClick = { handleClose } > Cancel < /StyledButton> < StyledButton variant = "contained" color = "primary" startIcon = { < CloudUploadIcon / > } onClick = { isEmpty || isError ? ( ) => { } : handleFileClick } > Import < /StyledButton> < /ButtonContainer> < /Dialog> < /div>); } ; export default AddNewDbModal ;