import React , { useState } from 'react' ; import { Dialog } from '@material-ui/core/' ; import { ipcRenderer } from 'electron' ; import { ButtonContainer , TextFieldContainer , StyledButton , StyledTextField , StyledDialogTitle , } from '../../style-variables' ; import { sendFeedback } from '../../lib/utils' ; interface DummyPayload { dbName : string ; tableName : string ; rows : number ; } type DummyDataModalProps = { open : boolean ; onClose : ( ) => void ; dbName : string | undefined ; tableName : string | undefined ; } ; const DummyDataModal = ( { open , onClose , dbName , tableName , } ) => { const [ rowNum , setRowNum ] = useState ( 0 ) ; const [ isError , setIsError ] = useState ( false ) ; const [ isEmpty , setIsEmpty ] = useState ( true ) ; const handleClose = ( ) => { setIsError ( false ) ; setIsEmpty ( true ) ; onClose ( ) ; } ; const errorMessage = ( ) => { if ( isEmpty && isError ) { return 'Number of rows cannot be empty and must be a number' ; } if ( isEmpty ) { return 'Required: Number of rows cannot be empty' ; } if ( isError ) { return 'Please enter a number' ; } return '' ; } ; const handleRowChange = ( event ) => { let localIsEmpty = false ; let localIsError = false ; const targetValue = event . target . value ; if ( targetValue . length === 0 ) { localIsEmpty = true ; } if ( ! /^\d+$/ . test ( targetValue ) ) { localIsError = true ; } setIsEmpty ( localIsEmpty ) ; setIsError ( localIsError ) ; if ( ! localIsEmpty && ! localIsError ) { setRowNum ( Number ( targetValue ) ) ; } } ; const handleClick = ( ) => { if ( ! dbName || ! tableName ) return sendFeedback ( { type : 'error' , message : 'Failed to generate dummy data' , } ) ; const payload = { dbName , tableName , rows : rowNum , } ; ipcRenderer . invoke ( 'generate-dummy-data' , payload ) . catch ( ( ) => sendFeedback ( { type : 'error' , message : 'Failed to generate dummy data' , } ) ) . catch ( ( err ) => { console . log ( err ) ; } ) . finally ( handleClose ) ; } ; return ( < div > < Dialog fullWidth maxWidth = "xs" onClose = { handleClose } aria - labelledby = "modal-title" open = { open } > < TextFieldContainer > < StyledDialogTitle id = "alert-dialog-title" > Generate Dummy Data into Table < /StyledDialogTitle> < StyledTextField error = { isError } helperText = { errorMessage ( ) } id = "filled-basic" label = "Enter # of Rows to Generate" size = "small" variant = "outlined" onChange = { handleRowChange } InputProps = { { style : { color : '#575151' } , } } /> < /TextFieldContainer> < ButtonContainer > < StyledButton variant = "contained" color = "secondary" onClick = { handleClose } > Cancel < /StyledButton> < StyledButton variant = "contained" color = "primary" onClick = { isError || isEmpty ? ( ) => { } : handleClick } > Generate < /StyledButton> < /ButtonContainer> < /Dialog> < /div>); } ; export default DummyDataModal ;