import React , { useEffect , useState , useCallback } from 'react' ; import { chromeStorageSyncGet , chromeStorageSyncSet , StorageSyncKey , } from '../../util/chromeStorageSync' ; import { WithStyles , withStyles } from '@material-ui/core/styles' ; import Typography from '@material-ui/core/Typography' ; import FormControl from '@material-ui/core/FormControl' ; import InputLabel from '@material-ui/core/InputLabel' ; import Select from '@material-ui/core/Select' ; import MenuItem from '@material-ui/core/MenuItem' ; import TextField from '@material-ui/core/TextField' ; import styles from '../../styles/mainscreen.style' ; import { ExtensionOptions , ExtensionLabel , ExtensionURIMap } from '../../types' ; interface Props extends WithStyles < typeof styles > { } const MainScreen = ( { classes } ) => { const [ gatewayBaseURL , setGatewayBaseURL ] = useState ( ExtensionURIMap [ ExtensionOptions . InfuraAPI ] ) ; const [ okGatewayBaseURL , setOkGatewayBaseURL ] = useState ( false ) ; const [ showTexField , setShowTextField ] = useState ( false ) ; const [ gatewayOption , setGateWayOption ] = useState < ExtensionOptions > ( ExtensionOptions . InfuraAPI ) ; useEffect ( ( ) => { chromeStorageSyncGet ( StorageSyncKey . GatewayOption ) . then ( option => { if ( option === ExtensionOptions . Local ) setShowTextField ( true ) ; setGateWayOption ( option ) ; } ) ; } , [ ] ) ; useEffect ( ( ) => { chromeStorageSyncGet ( StorageSyncKey . GatewayBaseURL ) . then ( url => { setGatewayBaseURL ( url ) ; } ) ; } , [ ] ) ; useEffect ( ( ) => { try { new OAURL ( gatewayBaseURL . trim ( ) ) ; setOkGatewayBaseURL ( true ) ; } catch ( error ) { try { new OAURL ( 'http://' + gatewayBaseURL . trim ( ) ) ; setOkGatewayBaseURL ( true ) ; } catch ( error ) { setOkGatewayBaseURL ( false ) ; } } if ( okGatewayBaseURL ) { chromeStorageSyncSet ( StorageSyncKey . GatewayBaseURL , gatewayBaseURL . includes ( '://' ) ? gatewayBaseURL . trim ( ) : 'http://' + gatewayBaseURL . trim ( ) ) ; } } , [ gatewayBaseURL ] ) ; useEffect ( ( ) => { const uri = ExtensionURIMap [ gatewayOption ] ; if ( uri ) chromeStorageSyncSet ( StorageSyncKey . GatewayBaseURL , uri ) ; chromeStorageSyncSet ( StorageSyncKey . GatewayOption , gatewayOption ) ; } , [ gatewayOption ] ) ; const handleChangeGatewayBaseURL = useCallback ( e => setGatewayBaseURL ( e . target . value ) , [ ] ) ; const handleChange = ( event ) => { const chosen = event . target . value ; setShowTextField ( chosen === ExtensionOptions . Local ) ; setGateWayOption ( chosen ) ; } ; const renderOptions = ( ) => { const items = [ ] ; for ( const key in ExtensionOptions ) { const value = ExtensionOptions [ key ] ; items . push ( < MenuItem value = { value } > { value } < /MenuItem>); } return items ; } ; const renderDropDownMenu = ( ) => { return ( < > < FormControl variant = "filled" className = { classes . formControl } > < InputLabel id = "demo-simple-select-filled-label" > { gatewayOption } < /InputLabel> < Select labelId = "demo-simple-select-filled-label" id = "demo-simple-select-filled" placeholder = "Enter your own gateway" value = { gatewayOption } onChange = { handleChange } > { renderOptions ( ) } < /Select> < /FormControl> < Typography variant = "body2" className = { classes . gatewayMessage } > { ExtensionLabel [ gatewayOption ] } < /Typography> < />); } ; const renderHint = ( ) => { return < Typography > { "Place {ipfs} where the ipfs hash should go" } < /Typography>; } ; const renderTextField = ( ) => { if ( ! showTexField ) return < > < />; return ( < div className = { classes . input } > < Typography variant = "body2" className = { classes . subtitle } > Gateway Base URL : < /Typography> { gatewayOption === ExtensionOptions . Local ? renderHint ( ) : null } < TextField type = "text" id = "gatewayBaseURL" onChange = { handleChangeGatewayBaseURL } value = { gatewayBaseURL } placeholder = "{ipfs}.gateway.com" className = { classes . inputField } variant = "filled" / > < /div>); } ; return ( < div className = { classes . main } > < div className = { classes . column } > < div className = { classes . fields } > < Typography variant = "body1" className = { classes . title } > Download Files via < /Typography> { renderDropDownMenu ( ) } { renderTextField ( ) } < /div> < /div> < /div>); } ; export default withStyles ( styles ) ( MainScreen ) ;