diff --git a/src/containers/Forms/AuthForm/AuthForm.js b/src/containers/Forms/AuthForm/AuthForm.js index 2b183fba9b1a467b321e376994290a3305291ddc..263fc3d175dc8ae4c1e5eaf7351e9eb55e0d7c23 100644 --- a/src/containers/Forms/AuthForm/AuthForm.js +++ b/src/containers/Forms/AuthForm/AuthForm.js @@ -12,16 +12,21 @@ import { formValueSelector } from 'redux-form' import arrowImage from '../../../assets/img/icons/red_arrow.svg'; import countryIcon from '../../../assets/img/icons/ic_country.svg'; import phoneIcon from '../../../assets/img/icons/ic_phone.svg'; +import _ from 'lodash'; +import { change, reset } from 'redux-form'; +import { bindActionCreators } from 'redux'; +import CountryCodes from './CountryCodes'; const styles = theme => (stylesFunc(theme, arrowImage, countryIcon, phoneIcon)); -const selector = formValueSelector('AuthForm') +const selector = formValueSelector('AuthForm'); @connect((state) => ({ - countryState: selector(state,'Country') + countryStoreData: selector(state,'Country'), + countryCodeData: selector(state,'CodeNumber') -})) +}),dispatch => bindActionCreators({}, dispatch) ) class AuthForm extends Component { static propTypes = { @@ -30,40 +35,63 @@ class AuthForm extends Component { super(props); this.state = { isButtonActive: true, - + ResetSelect: true }; } + componentWillReceiveProps(newProps){ + if(newProps.countryStoreData && + !_.isEqual(newProps.countryStoreData,this.props.countryStoreData)) + { + this.props.dispatch(change('AuthForm', 'CodeNumber', newProps.countryStoreData.value.code)); + this.props.dispatch(change('AuthForm', 'PhoneNumber', '')); + } + if(this.props.countryCodeData && newProps.countryCodeData && !_.isEqual(newProps.countryCodeData ,this.props.countryCodeData) ){ + const result = _.find(CountryCodes, (country)=>{ + return country.value.code.trim() === newProps.countryCodeData.trim() + }); + this.props.dispatch(change('AuthForm', 'Country',result)); + } + } + + shouldComponentUpdate(nextProps){ + return !_.isEqual(nextProps.countryStoreData,this.props.countryStoreData) + } + + handleSubmit = (values) => { + console.log('SUBMIT!') //after server response should return true/success + }; + render() { - const { classes } = this.props; - const { isButtonActive, countryState } = this.state; - console.log(countryState); + const { classes,countryStoreData } = this.props; + const { isButtonActive } = this.state; + const maskedCodeInput = (inputRedux )=> { return + value={inputRedux.input.value} + placeholderChar="-" {...inputRedux.input} /> }; const maskedPhoneInput = (inputRedux )=> { return + placeholderChar="-" {...inputRedux.input}/> }; const ReactSelect = (inputRedux) => { - const options = [ - { value: {code:'381',mask:'11 111 1111'}, label: 'Serbia (RS)' }, - { value: {code:'380',mask:'11 111 11 11'}, label: 'Ukraine (UA)' }, - ]; - return