import React , { Component } from 'react' ; import { connect } from 'react-redux' ; import TextField from '@material-ui/core/TextField' ; import IconButton from '@material-ui/core/IconButton' ; import Icon from '@material-ui/core/Icon' ; import Tooltip from '@material-ui/core/Tooltip' ; import * as actions from '../actions/components' ; import { ReducersInterface , InputValidation } from '../utils/InterfaceDefinitions' ; import Reducer from './Reducer' ; import validateInput from '../utils/validateInput.util' ; import ErrorMessage from './ErrorMessage' ; const mapDispatchToProps = ( dispatch ) => ( { setReducer : ( reducer ) => dispatch ( actions . setReducer ( reducer ) ) , deleteReducer : ( reducer ) => dispatch ( actions . deleteReducer ( reducer ) ) , } ) ; const mapStateToProps = ( store ) => ( { interfaces : store . workspace . storeConfig . interfaces , reducers : store . workspace . storeConfig . reducers , } ) ; interface PropsInterface { setReducer : any ; deleteReducer : any ; interfaces : any ; reducers : any ; } interface StateInterface { nameInput : string ; validation : InputValidation ; isVisible : boolean ; } class Reducers extends Component < PropsInterface , StateInterface > { constructor ( props ) { super ( props ) ; this . state = { nameInput : '' , validation : validateInput ( '' ) , isVisible : false , } ; } handleChange = ( event ) => { if ( event . target . value . length < 18 ) { const target = event . target ; const result = validateInput ( target . value ) ; this . setState ( { nameInput : target . value , validation : result } ) ; } } ; createReducer = ( ) => { if ( this . state . validation . isValid ) { const reducerName = this . state . validation . input ; this . props . setReducer ( { [ reducerName ] : { store : { } , actions : { } } } ) ; this . setState ( { nameInput : '' } ) ; this . setState ( { isVisible : false } ) ; } else { this . setState ( { isVisible : true } ) ; } } ; render ( ) { return ( < section > < Tooltip title = "define redux reducers" aria - label = "define redux reducers" placement = "left" > < h2 > Reducers < /h2> < /Tooltip> < div id = "reducers" > { this . props . reducers && Object . keys ( this . props . reducers ) . map ( reducer => ( < Reducer reducer = { reducer } reducers = { this . props . reducers } interfaces = { this . props . interfaces } setReducer = { this . props . setReducer } deleteReducer = { this . props . deleteReducer } key = { `reducer${ reducer }` } / > ) ) } < /div> < ErrorMessage validation = { this . state . validation } visible = { this . state . isVisible } / > < form id = "new-reducer" > < TextField label = "new reducer" value = { this . state . nameInput } onChange = { this . handleChange } onKeyPress = { ( event ) => { if ( event . key === 'Enter' ) { this . createReducer ( ) ; event . preventDefault ( ) ; } } } required / > < IconButton aria - label = "create reducer" onClick = { this . createReducer } className = { this . state . validation . isValid ? '' : 'disabled' } > < Icon > add < /Icon> < /IconButton> < /form> < /section>); } } export default connect ( mapStateToProps , mapDispatchToProps ) ( Reducers ) ;