import React , { useState , useEffect } from 'react' ; import { useAppSelector , useAppDispatch } from '../../state-management/hooks' ; import { newThrottle , resetThrottle , } from '../../state-management/slices/ThrottleSlice' ; const ThrottleSettings = ( ) => { const dispatch = useAppDispatch ( ) ; const throttle = useAppSelector ( state => state . throttle . throttleValue ) ; const [ throttleNum , setThrottleNum ] = useState < string > ( throttle ) ; useEffect ( ( ) => { setThrottleNum ( throttle ) ; } , [ throttle ] ) ; useEffect ( ( ) => { setThrottleNum ( throttle ) ; } , [ throttle ] ) ; const onClick = ( ) : void => { dispatch ( resetThrottle ( ) ) ; } ; const throttleFunc = ( e ) : void => { e . preventDefault ( ) ; const backgroundConnection = chrome . runtime . connect ( ) ; backgroundConnection . postMessage ( { action : 'throttleEdit' , tabId : chrome . devtools . inspectedWindow . tabId , payload : { value : throttleNum } , } ) ; dispatch ( newThrottle ( throttleNum ) ) ; } ; return ( < div > < h2 > Enter Throttle < /h2> < form onSubmit = { throttleFunc } > < input type = "text" style = { { marginBottom : '10px' } } onChange = { e => setThrottleNum ( e . target . value ) } value = { throttleNum } placeholder = "enter in milliseconds" / > { ' ' } < span style = { { fontSize : '14px' } } > milliseconds < /span> < div > < button type = "submit" > Enter < /button> < button onClick = { onClick } type = "button" > Reset < /button> < /div> < /form> < span > Current throttle is { ' ' } { throttle === '70' ? `${ throttle } (default)` : throttle } ms < /span> < /div>); } ; export default ThrottleSettings ;