import { connect } from 'react-redux' ; import * as React from 'react' ; import { Dispatch , Action } from 'redux' ; import runActionCreators from '../../state/run/runActionCreators' ; import State from '../../state/State' ; import Constants from '../../model/enums/Constants' ; interface AnswerInputProps { isConnected : boolean ; id : string ; isAnswering : boolean ; answer : string ; onAnswerChanged : ( answer : string ) => void ; sendAnswer : ( ) => void ; } const mapStateToProps = ( state ) => ( { isConnected : state . common . isConnected , isAnswering : state . run . stage . isAnswering , answer : state . run . answer || '' } ) ; const mapDispatchToProps = ( dispatch ) => ( { onAnswerChanged : ( answer ) => { dispatch ( runActionCreators . onAnswerChanged ( answer ) as unknown as Action ) ; } , sendAnswer : ( ) => { dispatch ( runActionCreators . sendAnswer ( ) as unknown as Action ) ; } } ) ; export function AnswerInput ( props ) { const onAnswerChanged = ( e ) => { props . onAnswerChanged ( e . target . value ) ; } ; const onAnswerKeyPress = ( e ) => { if ( e . charCode === Constants . KEY_ENTER ) { if ( props . isConnected ) { props . sendAnswer ( ) ; } e . preventDefault ( ) ; } } ; return props . isAnswering ? ( < input id = { props . id } autoFocus className = "gameInputBox" value = { props . answer } onChange = { onAnswerChanged } onKeyPress = { onAnswerKeyPress } maxLength = { 250 } / > ) : null ; } export default connect ( mapStateToProps , mapDispatchToProps ) ( AnswerInput ) ;