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