I have been getting loop on my error page when i click retry
0
When a new User register for the first time, and get an error during submition, This workas expected but after the user tap retry it just loop to error page (RegistrationFailure.js) but behind the scene there is an activity going on.
I need help with this, cause for days i cannot really tell where the problem is.
Register.js
'use strict';
import React, { Component } from 'react';
import { View, StyleSheet, Image, TouchableHighlight, Alert } from 'react-native';
import { Container, Content, Input, Button, Footer, FooterTab, Text } from 'native-base';
import { connect } from 'react-redux';
import StepIndicator from 'react-native-step-indicator';
// import { RegisterFinal, RegisterStepOne, RegisterStepTwo, Progress, Congratulation } from '../components/register'
import RegisterStepOne from '../components/register/RegisterStepOne'
import RegisterStepTwo from '../components/register/RegisterStepTwo'
import RegisterFinal from '../components/register/RegisterFinal'
import ProgressIn from '../components/register/ProgressIn'
import Congratulation from '../components/register/Congratulation'
import RegistrationFailure from '../components/register/RegistrationFailure'
import { StackActions } from 'react-navigation';
import { register, updateDraft } from '../actions/auth';
import {StepOne} from '../screens/WalkThrough';
import Frisbee from 'frisbee';
import Spinner from 'react-native-loading-spinner-overlay';
//Temprorary api call for confirm pin
const api = new Frisbee({
baseURI: 'https://localhost:5678', //'http://localhost:3000',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
});
const MAX_LENGTH_CODE = 6;
const MAX_LENGTH_NUMBER = 14;
const customStyles = {
stepIndicatorSize: 30,
currentStepIndicatorSize: 40,
separatorStrokeWidth: 2,
currentStepStrokeWidth: 3,
stepStrokeCurrentColor: '#222',
stepStrokeWidth: 1,
stepStrokeFinishedColor: '#222',
stepStrokeUnFinishedColor: '#aaaaaa',
separatorFinishedColor: '#0d6851',
separatorUnFinishedColor: '#aaaaaa',
stepIndicatorFinishedColor: '#0d6851',
stepIndicatorUnFinishedColor: '#ffffff',
stepIndicatorCurrentColor: '#ffffff',
stepIndicatorLabelFontSize: 13,
currentStepIndicatorLabelFontSize: 13,
stepIndicatorLabelCurrentColor: '#222',
stepIndicatorLabelFinishedColor: '#ffffff',
stepIndicatorLabelUnFinishedColor: '#aaaaaa',
labelColor: '#999999',
labelSize: 13,
currentStepLabelColor: '#222'
}
class Register extends Component {
constructor(props) {
super(props);
this.state = {
onChangeText: false,
registrationState: 0,
currentPage: 0,
confirmationPin: "",
error: null,
enterCode: false,
spinner: false,
};
}
//Getting the otp from the api temporary
_getCode = () => {
this.setState({ spinner: true });
setTimeout(async () => {
try {
const res = await api.post('/socket.io/1/websocket/', {
body: {
...this.refs.form.getValues(),
...this.state.country
}
});
if (res.err) throw res.err;
this.setState({
spinner: false,
enterCode: true,
verification: res.body
});
this.refs.form.refs.Input.setNativeProps({ text: '' });
setTimeout(() => {
Alert.alert('Sent!', "We've sent you a verification code", [{
text: 'OK',
onPress: () => this.refs.form.refs.Input.focus()
}]);
}, 100);
} catch (err) {
// <https://github.com/niftylettuce/react-native-loading-spinner-overlay/issues/30#issuecomment-276845098>
this.setState({ spinner: false });
setTimeout(() => {
Alert.alert('Oops!', err.message);
}, 100);
}
}, 100);
}
_verifyCode = () => {
this.setState({ spinner: true });
setTimeout(async () => {
try {
const res = await api.put('/socket.io/1/websocket/', {
body: {
...this.refs.form.getValues(),
...this.state.country
}
});
if (res.err) throw res.err;
this.refs.form.refs.Input.blur();
// <https://github.com/niftylettuce/react-native-loading-spinner-overlay/issues/30#issuecomment-276845098>
this.setState({ spinner: false });
setTimeout(() => {
Alert.alert('Success!', 'You have successfully verified your phone number');
}, 100);
} catch (err) {
// <https://github.com/niftylettuce/react-native-loading-spinner-overlay/issues/30#issuecomment-276845098>
this.setState({ spinner: false });
setTimeout(() => {
Alert.alert('Oops!', err.message);
}, 100);
}
}, 100);
}
onChangeText = (val) => {
if (!this.state.enterCode) return;
if (val.length === MAX_LENGTH_CODE)
this._verifyCode();
}
_tryAgain = () => {
this.refs.form.refs.Input.setNativeProps({ text: '' })
this.refs.form.refs.Input.focus();
this.setState({ enterCode: false });
}
sendRegistration(){
let payload = Object.assign({}, {confirmationPin: this.state.confirmationPin}, this.props.registrationDraft)
console.log({Req: payload});
this.props.register(payload);
//This is what i added for the code verification
this.state.enterCode ? this._verifyCode() : this._getCode();
}
render() {
return (
<Container>
<View style={{ justifyContent: 'center', alignItems: 'center' }}>
<Image style={styles.logotop} source={require("../assets/img/proximity.png")} />
<Text style={{ fontSize: 30, fontFamily: 'Raleway-Regular', }}>Provisioning</Text>
</View>
<View style={styles.stepIndicator}>
<StepIndicator
customStyles={customStyles}
stepCount={4}
currentPosition={this.state.currentPage}
labels={}
/>
</View>
<Content>
{/* <ErrorBar /> */}
{this.state.currentPage === 0 && <RegisterStepOne updateField={(e)=> this.props.updateDraft(e)} params={this.props.registrationDraft} dispatch={this.props.navigation.dispatch} />}
{this.state.currentPage === 1 && <RegisterStepTwo updateField={(e)=> this.props.updateDraft(e)} params={this.props.registrationDraft} />}
{this.state.currentPage === 2 && <RegisterFinal updateField={(e)=>this.setState(e)} params={this.state} />}
{this.state.currentPage === 3 && this.props.registrationState < 4 && <ProgressIn registrationState={this.props.registrationState} />}
{this.state.currentPage === 3 && this.props.registrationState === 4 && <Congratulation styles={styles} navigate={(e) => this.props.navigation.navigate(e)} />}
{this.state.currentPage === 3 && this.props.registrationState < 4 && this.props.registerFailed !== true && <RegistrationFailure styles={styles} dispatch={this.props.navigation.dispatch}/>}
</Content>
<Spinner
visible={this.state.spinner}
textContent={'One moment...'}
textStyle={{ color: '#222' }}
/>
{this.state.currentPage < 3 &&
<Footer style={{ flexDirection: 'row', backgroundColor: 'transparent', height: 70, shadowOffset: { height: 0, width: 0 }, shadowOpacity: 0, elevation: 0 }} transparent noShadow>
<FooterTab style={{ margin: 5, backgroundColor: 'transparent', }}>
<TouchableHighlight style={styles.submitQuit} onPress={() => {
if(this.state.currentPage === 0){
this.props.navigation.dispatch(/*StackActions.popToTop()*/StackActions.pop({n: 2}));
}else{
this.setState({ currentPage: this.state.currentPage - 1 })
}
}}>
<Text style={styles.submitTextQuit}> { this.state.currentPage === 0 ? 'Back' : 'Back' }</Text>
</TouchableHighlight>
</FooterTab>
<FooterTab style={{ margin: 5, backgroundColor: 'transparent', }}>
<TouchableHighlight style={styles.submit} onPress={() => {
console.log({ isWorking: this.props.isWorking});
if (this.props.isWorking){
console.log('response for this');
return;
}
console.log(this.state.currentPage)
if(this.state.currentPage === 0){
if(!this.props.registrationDraft.firstName.length ||
!this.props.registrationDraft.surname.length ||
!this.props.registrationDraft.NINLastSix.length ||
!this.props.registrationDraft.yearOfBirth.length ||
!this.props.registrationDraft.phone.length){
Alert.alert(
'Warning!!!!',
'Fill out the required fields',
[
{text: 'OK', onPress: () => console.log('OK Pressed')},
],
{ cancelable: false }
)
console.log("cant go to next page 2")
return;
}
}
if(this.state.currentPage === 1){
if(!this.props.registrationDraft.password.length ||
!this.props.registrationDraft.confirmPassword.length){
Alert.alert(
'Warning!!!!',
'Fill out your Password',
[
{text: 'OK', onPress: () => console.log('OK Pressed')},
],
{ cancelable: false }
)
console.log("cant go to next page 3")
return;
}
if(this.props.registrationDraft.password !==
this.props.registrationDraft.confirmPassword){
Alert.alert(
'Warning!!!!!!',
'Password do not match',
[
{text: 'OK', onPress: () => console.log('OK Pressed')},
],
{ cancelable: false }
)
console.log("passwords do not match");
return;
}
}
if(this.state.currentPage + 1 === 3){
// if(!this.props.registrationDraft.comfirmPin.length)
this.sendRegistration();
}
this.setState({ currentPage: this.state.currentPage + 1 })
}}>
<Text style={styles.submitText}>{ this.state.currentPage === 2 ? 'Send' : 'Next' }</Text>
</TouchableHighlight>
</FooterTab>
</Footer>
}
</Container>
)
}
}
function mapStateToProps(store) {
return {
isWorking: store.isWorking,
// errorMessage: store.auth.regError,
registered: store.auth.registered,
registerFailed: store.auth.registerFailed,
registerFailedMessage: store.auth.registerFailedMessage,
registrationState: store.auth.registrationState,
registrationDraft: store.auth.registrationDraft
// authToken: store.auth.authToken
};
}
function mapDispatchToProps(dispatch) {
return {
register: (user) => dispatch(register(user)),
updateDraft: (keyValue) => dispatch(updateDraft(keyValue)),
};
}
export default connect(mapStateToProps, mapDispatchToProps)(Register);
//Registeration styling
const styles = StyleSheet.create({
container: {
alignItems: 'center',
justifyContent: 'center',
},
paragraph: {
margin: 10,
marginTop: 0,
fontSize: 20,
fontWeight: '200',
textAlign: 'left',
color: '#090a08',
fontFamily: 'sans-serif-light',
},
logotop: {
backgroundColor: "transparent",
marginTop: 25,
height: 80,
width: 200,
resizeMode: 'contain'
},
stepIndicator: {
marginVertical: 10,
marginTop: 10,
},
circles: {
flexDirection: 'row',
alignItems: 'center',
paddingVertical: 20,
alignSelf: 'center',
color: '#222'
},
rowItem: {
flex: 3,
paddingVertical: 20
},
title: {
flex: 1,
fontSize: 20,
color: '#333333',
paddingVertical: 16,
fontWeight: '600'
},
body: {
flex: 1,
fontSize: 15,
color: '#606060',
lineHeight: 24,
marginRight: 8
},
submit:{
marginTop: 0,
paddingTop: 4,
paddingBottom:15,
marginLeft:40,
marginRight:40,
width: 100,
height: 40,
backgroundColor:'#2B2B26',
borderRadius:10,
borderWidth: 1,
borderColor: '#fff'
},
submitText: {
color: '#fff',
textAlign: 'center',
fontSize: 20,
},
submitQuit:{
marginTop: 0,
paddingTop: 4,
paddingBottom:15,
marginLeft:40,
marginRight:40,
width: 100,
height: 40,
backgroundColor:'#2B2B26',
borderRadius:10,
borderWidth: 1,
borderColor: '#fff'
},
submitTextQuit: {
color: '#fff',
textAlign: 'center',
marginRight: 6,
fontSize: 20,
},
input: {
backgroundColor: '#ffffff',
borderBottomWidth: 0,
marginBottom: 10,
borderRadius: 2,
paddingVertical: 5,
width: '100%'
},
placeholder: {
fontSize: 12
},
errorMessage: {
marginTop: 40
},
loggedInDesc: {
marginTop: 40
},
congratulations: {
fontSize: 30,
textAlign: 'center',
color: '#0d6851',
marginTop: 40,
fontFamily: 'AvenirLTStd-Roman',
},
registrationFailed: {
fontSize: 30,
textAlign: 'center',
color: 'red',
marginTop: 40,
fontFamily: 'AvenirLTStd-Roman',
}
});RegistrationFailure.js
'use strict';
import React, { Component } from 'react';
import { View, StyleSheet, TouchableHighlight, BackHandler, Alert } from 'react-native';
import { Text, Footer, FooterTab, Container, } from 'native-base';
import { StackActions, createStackNavigator, createAppContainer } from 'react-navigation';
const pushAction = StackActions.push({
routeName: 'Register',
params: {
myUserId: 9,
},
});
export default class RegisterFinal extends Component {
render() {
let dispatch = this.props.dispatch;
// const { goBack } = this.props.navigation;
return (
<View style={styles.container}>
<View>
<View>
<View>
<Text style={{margin: 4, marginTop: 30, alignSelf: 'center', color: 'red', fontSize: 20}}>Ooops!!</Text>
<Text style={{ margin: 4, marginTop: 20, fontFamily: 'Raleway-Regular', fontSize: 20, textAlign: 'center', color: '#595959', }}>
Your submission returned an error</Text>
<Text style={{ margin: 4, fontFamily: 'Raleway-Regular', fontSize: 20, textAlign: 'center', color: '#595959', }}> Please go back and try again.
</Text>
</View>
{/* <Footer style={{ backgroundColor: 'transparent', height: 140, shadowOffset: {height: 0, width: 0}, shadowOpacity: 0, elevation: 0}}transparent noShadow>
<FooterTab style={{ margin: 10, backgroundColor: 'transparent', justifyContent: 'center' }}>
<TouchableHighlight style={styles.submit} onPress={() => { console.log("Proceeding to Start All Over"); dispatch(StackActions.pop({ n: 2 })) }}>
<Text style={styles.submitText}>Retry</Text>
</TouchableHighlight>
</FooterTab>
</Footer> */}
<Footer style={{ justifyContent: 'center', marginTop: 140, alignSelf: 'center', flexDirection: 'row', backgroundColor: 'transparent', height: 70, shadowOffset: {height: 0, width: 0}, shadowOpacity: 0, elevation: 0}}transparent noShadow>
<FooterTab style={{marginLeft: -10, margin: 5, backgroundColor: 'transparent',}}>
<TouchableHighlight style={styles.submit} onPress={() => {
// Alert.alert(
// 'Exit App',
// 'Do you want to exit?',
// [
// {text: 'No', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
// {text: 'Yes', onPress: () => {this.props.dispatch(StackActions.pop({n: 1}));
// BackHandler.exitApp();}},
// ],
// { cancelable: false });
// return true;
console.log('you just tap quit');
console.log(this.props);
// return this.state.handleBackPress;
this.props.dispatch(StackActions.pop({n: 4}));
BackHandler.exitApp();
}}>
<Text style={styles.submitText}>Quit</Text>
</TouchableHighlight>
</FooterTab>
<FooterTab style={{margin: 5, backgroundColor: 'transparent',}}>
<TouchableHighlight style={styles.submit}
onPress={() => { console.log("Proceeding to Start All Over");
this.props.dispatch(pushAction);
}}>
<Text style={styles.submitText}>Retry</Text>
</TouchableHighlight>
</FooterTab>
</Footer>
</View>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
},
submit:{
marginTop: 0,
paddingTop: 5,
paddingBottom:15,
marginLeft:40,
marginRight:40,
width: 100,
height: 40,
backgroundColor:'#2B2B26',
borderRadius:10,
borderWidth: 1,
borderColor: '#fff'
},
submitText: {
color: '#fff',
textAlign: 'center',
fontSize: 20,
},
});react-native redux react-redux react-thunk
asked Nov 22 at 22:27
dilas
113
add a comment |
0
When a new User register for the first time, and get an error during submition, This workas expected but after the user tap retry it just loop to error page (RegistrationFailure.js) but behind the scene there is an activity going on.
I need help with this, cause for days i cannot really tell where the problem is.
Register.js
'use strict';
import React, { Component } from 'react';
import { View, StyleSheet, Image, TouchableHighlight, Alert } from 'react-native';
import { Container, Content, Input, Button, Footer, FooterTab, Text } from 'native-base';
import { connect } from 'react-redux';
import StepIndicator from 'react-native-step-indicator';
// import { RegisterFinal, RegisterStepOne, RegisterStepTwo, Progress, Congratulation } from '../components/register'
import RegisterStepOne from '../components/register/RegisterStepOne'
import RegisterStepTwo from '../components/register/RegisterStepTwo'
import RegisterFinal from '../components/register/RegisterFinal'
import ProgressIn from '../components/register/ProgressIn'
import Congratulation from '../components/register/Congratulation'
import RegistrationFailure from '../components/register/RegistrationFailure'
import { StackActions } from 'react-navigation';
import { register, updateDraft } from '../actions/auth';
import {StepOne} from '../screens/WalkThrough';
import Frisbee from 'frisbee';
import Spinner from 'react-native-loading-spinner-overlay';
//Temprorary api call for confirm pin
const api = new Frisbee({
baseURI: 'https://localhost:5678', //'http://localhost:3000',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
});
const MAX_LENGTH_CODE = 6;
const MAX_LENGTH_NUMBER = 14;
const customStyles = {
stepIndicatorSize: 30,
currentStepIndicatorSize: 40,
separatorStrokeWidth: 2,
currentStepStrokeWidth: 3,
stepStrokeCurrentColor: '#222',
stepStrokeWidth: 1,
stepStrokeFinishedColor: '#222',
stepStrokeUnFinishedColor: '#aaaaaa',
separatorFinishedColor: '#0d6851',
separatorUnFinishedColor: '#aaaaaa',
stepIndicatorFinishedColor: '#0d6851',
stepIndicatorUnFinishedColor: '#ffffff',
stepIndicatorCurrentColor: '#ffffff',
stepIndicatorLabelFontSize: 13,
currentStepIndicatorLabelFontSize: 13,
stepIndicatorLabelCurrentColor: '#222',
stepIndicatorLabelFinishedColor: '#ffffff',
stepIndicatorLabelUnFinishedColor: '#aaaaaa',
labelColor: '#999999',
labelSize: 13,
currentStepLabelColor: '#222'
}
class Register extends Component {
constructor(props) {
super(props);
this.state = {
onChangeText: false,
registrationState: 0,
currentPage: 0,
confirmationPin: "",
error: null,
enterCode: false,
spinner: false,
};
}
//Getting the otp from the api temporary
_getCode = () => {
this.setState({ spinner: true });
setTimeout(async () => {
try {
const res = await api.post('/socket.io/1/websocket/', {
body: {
...this.refs.form.getValues(),
...this.state.country
}
});
if (res.err) throw res.err;
this.setState({
spinner: false,
enterCode: true,
verification: res.body
});
this.refs.form.refs.Input.setNativeProps({ text: '' });
setTimeout(() => {
Alert.alert('Sent!', "We've sent you a verification code", [{
text: 'OK',
onPress: () => this.refs.form.refs.Input.focus()
}]);
}, 100);
} catch (err) {
// <https://github.com/niftylettuce/react-native-loading-spinner-overlay/issues/30#issuecomment-276845098>
this.setState({ spinner: false });
setTimeout(() => {
Alert.alert('Oops!', err.message);
}, 100);
}
}, 100);
}
_verifyCode = () => {
this.setState({ spinner: true });
setTimeout(async () => {
try {
const res = await api.put('/socket.io/1/websocket/', {
body: {
...this.refs.form.getValues(),
...this.state.country
}
});
if (res.err) throw res.err;
this.refs.form.refs.Input.blur();
// <https://github.com/niftylettuce/react-native-loading-spinner-overlay/issues/30#issuecomment-276845098>
this.setState({ spinner: false });
setTimeout(() => {
Alert.alert('Success!', 'You have successfully verified your phone number');
}, 100);
} catch (err) {
// <https://github.com/niftylettuce/react-native-loading-spinner-overlay/issues/30#issuecomment-276845098>
this.setState({ spinner: false });
setTimeout(() => {
Alert.alert('Oops!', err.message);
}, 100);
}
}, 100);
}
onChangeText = (val) => {
if (!this.state.enterCode) return;
if (val.length === MAX_LENGTH_CODE)
this._verifyCode();
}
_tryAgain = () => {
this.refs.form.refs.Input.setNativeProps({ text: '' })
this.refs.form.refs.Input.focus();
this.setState({ enterCode: false });
}
sendRegistration(){
let payload = Object.assign({}, {confirmationPin: this.state.confirmationPin}, this.props.registrationDraft)
console.log({Req: payload});
this.props.register(payload);
//This is what i added for the code verification
this.state.enterCode ? this._verifyCode() : this._getCode();
}
render() {
return (
<Container>
<View style={{ justifyContent: 'center', alignItems: 'center' }}>
<Image style={styles.logotop} source={require("../assets/img/proximity.png")} />
<Text style={{ fontSize: 30, fontFamily: 'Raleway-Regular', }}>Provisioning</Text>
</View>
<View style={styles.stepIndicator}>
<StepIndicator
customStyles={customStyles}
stepCount={4}
currentPosition={this.state.currentPage}
labels={}
/>
</View>
<Content>
{/* <ErrorBar /> */}
{this.state.currentPage === 0 && <RegisterStepOne updateField={(e)=> this.props.updateDraft(e)} params={this.props.registrationDraft} dispatch={this.props.navigation.dispatch} />}
{this.state.currentPage === 1 && <RegisterStepTwo updateField={(e)=> this.props.updateDraft(e)} params={this.props.registrationDraft} />}
{this.state.currentPage === 2 && <RegisterFinal updateField={(e)=>this.setState(e)} params={this.state} />}
{this.state.currentPage === 3 && this.props.registrationState < 4 && <ProgressIn registrationState={this.props.registrationState} />}
{this.state.currentPage === 3 && this.props.registrationState === 4 && <Congratulation styles={styles} navigate={(e) => this.props.navigation.navigate(e)} />}
{this.state.currentPage === 3 && this.props.registrationState < 4 && this.props.registerFailed !== true && <RegistrationFailure styles={styles} dispatch={this.props.navigation.dispatch}/>}
</Content>
<Spinner
visible={this.state.spinner}
textContent={'One moment...'}
textStyle={{ color: '#222' }}
/>
{this.state.currentPage < 3 &&
<Footer style={{ flexDirection: 'row', backgroundColor: 'transparent', height: 70, shadowOffset: { height: 0, width: 0 }, shadowOpacity: 0, elevation: 0 }} transparent noShadow>
<FooterTab style={{ margin: 5, backgroundColor: 'transparent', }}>
<TouchableHighlight style={styles.submitQuit} onPress={() => {
if(this.state.currentPage === 0){
this.props.navigation.dispatch(/*StackActions.popToTop()*/StackActions.pop({n: 2}));
}else{
this.setState({ currentPage: this.state.currentPage - 1 })
}
}}>
<Text style={styles.submitTextQuit}> { this.state.currentPage === 0 ? 'Back' : 'Back' }</Text>
</TouchableHighlight>
</FooterTab>
<FooterTab style={{ margin: 5, backgroundColor: 'transparent', }}>
<TouchableHighlight style={styles.submit} onPress={() => {
console.log({ isWorking: this.props.isWorking});
if (this.props.isWorking){
console.log('response for this');
return;
}
console.log(this.state.currentPage)
if(this.state.currentPage === 0){
if(!this.props.registrationDraft.firstName.length ||
!this.props.registrationDraft.surname.length ||
!this.props.registrationDraft.NINLastSix.length ||
!this.props.registrationDraft.yearOfBirth.length ||
!this.props.registrationDraft.phone.length){
Alert.alert(
'Warning!!!!',
'Fill out the required fields',
[
{text: 'OK', onPress: () => console.log('OK Pressed')},
],
{ cancelable: false }
)
console.log("cant go to next page 2")
return;
}
}
if(this.state.currentPage === 1){
if(!this.props.registrationDraft.password.length ||
!this.props.registrationDraft.confirmPassword.length){
Alert.alert(
'Warning!!!!',
'Fill out your Password',
[
{text: 'OK', onPress: () => console.log('OK Pressed')},
],
{ cancelable: false }
)
console.log("cant go to next page 3")
return;
}
if(this.props.registrationDraft.password !==
this.props.registrationDraft.confirmPassword){
Alert.alert(
'Warning!!!!!!',
'Password do not match',
[
{text: 'OK', onPress: () => console.log('OK Pressed')},
],
{ cancelable: false }
)
console.log("passwords do not match");
return;
}
}
if(this.state.currentPage + 1 === 3){
// if(!this.props.registrationDraft.comfirmPin.length)
this.sendRegistration();
}
this.setState({ currentPage: this.state.currentPage + 1 })
}}>
<Text style={styles.submitText}>{ this.state.currentPage === 2 ? 'Send' : 'Next' }</Text>
</TouchableHighlight>
</FooterTab>
</Footer>
}
</Container>
)
}
}
function mapStateToProps(store) {
return {
isWorking: store.isWorking,
// errorMessage: store.auth.regError,
registered: store.auth.registered,
registerFailed: store.auth.registerFailed,
registerFailedMessage: store.auth.registerFailedMessage,
registrationState: store.auth.registrationState,
registrationDraft: store.auth.registrationDraft
// authToken: store.auth.authToken
};
}
function mapDispatchToProps(dispatch) {
return {
register: (user) => dispatch(register(user)),
updateDraft: (keyValue) => dispatch(updateDraft(keyValue)),
};
}
export default connect(mapStateToProps, mapDispatchToProps)(Register);
//Registeration styling
const styles = StyleSheet.create({
container: {
alignItems: 'center',
justifyContent: 'center',
},
paragraph: {
margin: 10,
marginTop: 0,
fontSize: 20,
fontWeight: '200',
textAlign: 'left',
color: '#090a08',
fontFamily: 'sans-serif-light',
},
logotop: {
backgroundColor: "transparent",
marginTop: 25,
height: 80,
width: 200,
resizeMode: 'contain'
},
stepIndicator: {
marginVertical: 10,
marginTop: 10,
},
circles: {
flexDirection: 'row',
alignItems: 'center',
paddingVertical: 20,
alignSelf: 'center',
color: '#222'
},
rowItem: {
flex: 3,
paddingVertical: 20
},
title: {
flex: 1,
fontSize: 20,
color: '#333333',
paddingVertical: 16,
fontWeight: '600'
},
body: {
flex: 1,
fontSize: 15,
color: '#606060',
lineHeight: 24,
marginRight: 8
},
submit:{
marginTop: 0,
paddingTop: 4,
paddingBottom:15,
marginLeft:40,
marginRight:40,
width: 100,
height: 40,
backgroundColor:'#2B2B26',
borderRadius:10,
borderWidth: 1,
borderColor: '#fff'
},
submitText: {
color: '#fff',
textAlign: 'center',
fontSize: 20,
},
submitQuit:{
marginTop: 0,
paddingTop: 4,
paddingBottom:15,
marginLeft:40,
marginRight:40,
width: 100,
height: 40,
backgroundColor:'#2B2B26',
borderRadius:10,
borderWidth: 1,
borderColor: '#fff'
},
submitTextQuit: {
color: '#fff',
textAlign: 'center',
marginRight: 6,
fontSize: 20,
},
input: {
backgroundColor: '#ffffff',
borderBottomWidth: 0,
marginBottom: 10,
borderRadius: 2,
paddingVertical: 5,
width: '100%'
},
placeholder: {
fontSize: 12
},
errorMessage: {
marginTop: 40
},
loggedInDesc: {
marginTop: 40
},
congratulations: {
fontSize: 30,
textAlign: 'center',
color: '#0d6851',
marginTop: 40,
fontFamily: 'AvenirLTStd-Roman',
},
registrationFailed: {
fontSize: 30,
textAlign: 'center',
color: 'red',
marginTop: 40,
fontFamily: 'AvenirLTStd-Roman',
}
});RegistrationFailure.js
'use strict';
import React, { Component } from 'react';
import { View, StyleSheet, TouchableHighlight, BackHandler, Alert } from 'react-native';
import { Text, Footer, FooterTab, Container, } from 'native-base';
import { StackActions, createStackNavigator, createAppContainer } from 'react-navigation';
const pushAction = StackActions.push({
routeName: 'Register',
params: {
myUserId: 9,
},
});
export default class RegisterFinal extends Component {
render() {
let dispatch = this.props.dispatch;
// const { goBack } = this.props.navigation;
return (
<View style={styles.container}>
<View>
<View>
<View>
<Text style={{margin: 4, marginTop: 30, alignSelf: 'center', color: 'red', fontSize: 20}}>Ooops!!</Text>
<Text style={{ margin: 4, marginTop: 20, fontFamily: 'Raleway-Regular', fontSize: 20, textAlign: 'center', color: '#595959', }}>
Your submission returned an error</Text>
<Text style={{ margin: 4, fontFamily: 'Raleway-Regular', fontSize: 20, textAlign: 'center', color: '#595959', }}> Please go back and try again.
</Text>
</View>
{/* <Footer style={{ backgroundColor: 'transparent', height: 140, shadowOffset: {height: 0, width: 0}, shadowOpacity: 0, elevation: 0}}transparent noShadow>
<FooterTab style={{ margin: 10, backgroundColor: 'transparent', justifyContent: 'center' }}>
<TouchableHighlight style={styles.submit} onPress={() => { console.log("Proceeding to Start All Over"); dispatch(StackActions.pop({ n: 2 })) }}>
<Text style={styles.submitText}>Retry</Text>
</TouchableHighlight>
</FooterTab>
</Footer> */}
<Footer style={{ justifyContent: 'center', marginTop: 140, alignSelf: 'center', flexDirection: 'row', backgroundColor: 'transparent', height: 70, shadowOffset: {height: 0, width: 0}, shadowOpacity: 0, elevation: 0}}transparent noShadow>
<FooterTab style={{marginLeft: -10, margin: 5, backgroundColor: 'transparent',}}>
<TouchableHighlight style={styles.submit} onPress={() => {
// Alert.alert(
// 'Exit App',
// 'Do you want to exit?',
// [
// {text: 'No', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
// {text: 'Yes', onPress: () => {this.props.dispatch(StackActions.pop({n: 1}));
// BackHandler.exitApp();}},
// ],
// { cancelable: false });
// return true;
console.log('you just tap quit');
console.log(this.props);
// return this.state.handleBackPress;
this.props.dispatch(StackActions.pop({n: 4}));
BackHandler.exitApp();
}}>
<Text style={styles.submitText}>Quit</Text>
</TouchableHighlight>
</FooterTab>
<FooterTab style={{margin: 5, backgroundColor: 'transparent',}}>
<TouchableHighlight style={styles.submit}
onPress={() => { console.log("Proceeding to Start All Over");
this.props.dispatch(pushAction);
}}>
<Text style={styles.submitText}>Retry</Text>
</TouchableHighlight>
</FooterTab>
</Footer>
</View>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
},
submit:{
marginTop: 0,
paddingTop: 5,
paddingBottom:15,
marginLeft:40,
marginRight:40,
width: 100,
height: 40,
backgroundColor:'#2B2B26',
borderRadius:10,
borderWidth: 1,
borderColor: '#fff'
},
submitText: {
color: '#fff',
textAlign: 'center',
fontSize: 20,
},
});react-native redux react-redux react-thunk
asked Nov 22 at 22:27
dilas
113
Great that you provided your code but I don't think I really understand your question. Could you please elaborate more on "it just loop to error page but behind the scene there is an activity going on". What exactly do you mean with loop to the error page and what kind of activity are you mentioning??
– Y. Gherbi
Nov 22 at 23:31
when a user get to input a wrong data in a required field for the first time it hit the server and them pop up the error page. The problem i am faced with is when the user tap on retry, and go through the processes he/she ran through initicially it pop the error message page before it send a response from the server.
– dilas
Nov 23 at 0:32
How do you get toRegistrationFailure.jsin the first place? What happens when user makes a mistake during registration? Does it set some state variable? Do you clear that variable when user tries again? If you could explain the scenario a bit more with respect to the code or provide a working Expo snack, it would help us figure it out easily.
– Uzair A.
Nov 23 at 4:21
here is the link to the expo snack snack.expo.io/Bylb3cToQ
– dilas
Nov 23 at 6:24
add a comment |
0
0
0
When a new User register for the first time, and get an error during submition, This workas expected but after the user tap retry it just loop to error page (RegistrationFailure.js) but behind the scene there is an activity going on.
I need help with this, cause for days i cannot really tell where the problem is.
Register.js
'use strict';
import React, { Component } from 'react';
import { View, StyleSheet, Image, TouchableHighlight, Alert } from 'react-native';
import { Container, Content, Input, Button, Footer, FooterTab, Text } from 'native-base';
import { connect } from 'react-redux';
import StepIndicator from 'react-native-step-indicator';
// import { RegisterFinal, RegisterStepOne, RegisterStepTwo, Progress, Congratulation } from '../components/register'
import RegisterStepOne from '../components/register/RegisterStepOne'
import RegisterStepTwo from '../components/register/RegisterStepTwo'
import RegisterFinal from '../components/register/RegisterFinal'
import ProgressIn from '../components/register/ProgressIn'
import Congratulation from '../components/register/Congratulation'
import RegistrationFailure from '../components/register/RegistrationFailure'
import { StackActions } from 'react-navigation';
import { register, updateDraft } from '../actions/auth';
import {StepOne} from '../screens/WalkThrough';
import Frisbee from 'frisbee';
import Spinner from 'react-native-loading-spinner-overlay';
//Temprorary api call for confirm pin
const api = new Frisbee({
baseURI: 'https://localhost:5678', //'http://localhost:3000',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
});
const MAX_LENGTH_CODE = 6;
const MAX_LENGTH_NUMBER = 14;
const customStyles = {
stepIndicatorSize: 30,
currentStepIndicatorSize: 40,
separatorStrokeWidth: 2,
currentStepStrokeWidth: 3,
stepStrokeCurrentColor: '#222',
stepStrokeWidth: 1,
stepStrokeFinishedColor: '#222',
stepStrokeUnFinishedColor: '#aaaaaa',
separatorFinishedColor: '#0d6851',
separatorUnFinishedColor: '#aaaaaa',
stepIndicatorFinishedColor: '#0d6851',
stepIndicatorUnFinishedColor: '#ffffff',
stepIndicatorCurrentColor: '#ffffff',
stepIndicatorLabelFontSize: 13,
currentStepIndicatorLabelFontSize: 13,
stepIndicatorLabelCurrentColor: '#222',
stepIndicatorLabelFinishedColor: '#ffffff',
stepIndicatorLabelUnFinishedColor: '#aaaaaa',
labelColor: '#999999',
labelSize: 13,
currentStepLabelColor: '#222'
}
class Register extends Component {
constructor(props) {
super(props);
this.state = {
onChangeText: false,
registrationState: 0,
currentPage: 0,
confirmationPin: "",
error: null,
enterCode: false,
spinner: false,
};
}
//Getting the otp from the api temporary
_getCode = () => {
this.setState({ spinner: true });
setTimeout(async () => {
try {
const res = await api.post('/socket.io/1/websocket/', {
body: {
...this.refs.form.getValues(),
...this.state.country
}
});
if (res.err) throw res.err;
this.setState({
spinner: false,
enterCode: true,
verification: res.body
});
this.refs.form.refs.Input.setNativeProps({ text: '' });
setTimeout(() => {
Alert.alert('Sent!', "We've sent you a verification code", [{
text: 'OK',
onPress: () => this.refs.form.refs.Input.focus()
}]);
}, 100);
} catch (err) {
// <https://github.com/niftylettuce/react-native-loading-spinner-overlay/issues/30#issuecomment-276845098>
this.setState({ spinner: false });
setTimeout(() => {
Alert.alert('Oops!', err.message);
}, 100);
}
}, 100);
}
_verifyCode = () => {
this.setState({ spinner: true });
setTimeout(async () => {
try {
const res = await api.put('/socket.io/1/websocket/', {
body: {
...this.refs.form.getValues(),
...this.state.country
}
});
if (res.err) throw res.err;
this.refs.form.refs.Input.blur();
// <https://github.com/niftylettuce/react-native-loading-spinner-overlay/issues/30#issuecomment-276845098>
this.setState({ spinner: false });
setTimeout(() => {
Alert.alert('Success!', 'You have successfully verified your phone number');
}, 100);
} catch (err) {
// <https://github.com/niftylettuce/react-native-loading-spinner-overlay/issues/30#issuecomment-276845098>
this.setState({ spinner: false });
setTimeout(() => {
Alert.alert('Oops!', err.message);
}, 100);
}
}, 100);
}
onChangeText = (val) => {
if (!this.state.enterCode) return;
if (val.length === MAX_LENGTH_CODE)
this._verifyCode();
}
_tryAgain = () => {
this.refs.form.refs.Input.setNativeProps({ text: '' })
this.refs.form.refs.Input.focus();
this.setState({ enterCode: false });
}
sendRegistration(){
let payload = Object.assign({}, {confirmationPin: this.state.confirmationPin}, this.props.registrationDraft)
console.log({Req: payload});
this.props.register(payload);
//This is what i added for the code verification
this.state.enterCode ? this._verifyCode() : this._getCode();
}
render() {
return (
<Container>
<View style={{ justifyContent: 'center', alignItems: 'center' }}>
<Image style={styles.logotop} source={require("../assets/img/proximity.png")} />
<Text style={{ fontSize: 30, fontFamily: 'Raleway-Regular', }}>Provisioning</Text>
</View>
<View style={styles.stepIndicator}>
<StepIndicator
customStyles={customStyles}
stepCount={4}
currentPosition={this.state.currentPage}
labels={}
/>
</View>
<Content>
{/* <ErrorBar /> */}
{this.state.currentPage === 0 && <RegisterStepOne updateField={(e)=> this.props.updateDraft(e)} params={this.props.registrationDraft} dispatch={this.props.navigation.dispatch} />}
{this.state.currentPage === 1 && <RegisterStepTwo updateField={(e)=> this.props.updateDraft(e)} params={this.props.registrationDraft} />}
{this.state.currentPage === 2 && <RegisterFinal updateField={(e)=>this.setState(e)} params={this.state} />}
{this.state.currentPage === 3 && this.props.registrationState < 4 && <ProgressIn registrationState={this.props.registrationState} />}
{this.state.currentPage === 3 && this.props.registrationState === 4 && <Congratulation styles={styles} navigate={(e) => this.props.navigation.navigate(e)} />}
{this.state.currentPage === 3 && this.props.registrationState < 4 && this.props.registerFailed !== true && <RegistrationFailure styles={styles} dispatch={this.props.navigation.dispatch}/>}
</Content>
<Spinner
visible={this.state.spinner}
textContent={'One moment...'}
textStyle={{ color: '#222' }}
/>
{this.state.currentPage < 3 &&
<Footer style={{ flexDirection: 'row', backgroundColor: 'transparent', height: 70, shadowOffset: { height: 0, width: 0 }, shadowOpacity: 0, elevation: 0 }} transparent noShadow>
<FooterTab style={{ margin: 5, backgroundColor: 'transparent', }}>
<TouchableHighlight style={styles.submitQuit} onPress={() => {
if(this.state.currentPage === 0){
this.props.navigation.dispatch(/*StackActions.popToTop()*/StackActions.pop({n: 2}));
}else{
this.setState({ currentPage: this.state.currentPage - 1 })
}
}}>
<Text style={styles.submitTextQuit}> { this.state.currentPage === 0 ? 'Back' : 'Back' }</Text>
</TouchableHighlight>
</FooterTab>
<FooterTab style={{ margin: 5, backgroundColor: 'transparent', }}>
<TouchableHighlight style={styles.submit} onPress={() => {
console.log({ isWorking: this.props.isWorking});
if (this.props.isWorking){
console.log('response for this');
return;
}
console.log(this.state.currentPage)
if(this.state.currentPage === 0){
if(!this.props.registrationDraft.firstName.length ||
!this.props.registrationDraft.surname.length ||
!this.props.registrationDraft.NINLastSix.length ||
!this.props.registrationDraft.yearOfBirth.length ||
!this.props.registrationDraft.phone.length){
Alert.alert(
'Warning!!!!',
'Fill out the required fields',
[
{text: 'OK', onPress: () => console.log('OK Pressed')},
],
{ cancelable: false }
)
console.log("cant go to next page 2")
return;
}
}
if(this.state.currentPage === 1){
if(!this.props.registrationDraft.password.length ||
!this.props.registrationDraft.confirmPassword.length){
Alert.alert(
'Warning!!!!',
'Fill out your Password',
[
{text: 'OK', onPress: () => console.log('OK Pressed')},
],
{ cancelable: false }
)
console.log("cant go to next page 3")
return;
}
if(this.props.registrationDraft.password !==
this.props.registrationDraft.confirmPassword){
Alert.alert(
'Warning!!!!!!',
'Password do not match',
[
{text: 'OK', onPress: () => console.log('OK Pressed')},
],
{ cancelable: false }
)
console.log("passwords do not match");
return;
}
}
if(this.state.currentPage + 1 === 3){
// if(!this.props.registrationDraft.comfirmPin.length)
this.sendRegistration();
}
this.setState({ currentPage: this.state.currentPage + 1 })
}}>
<Text style={styles.submitText}>{ this.state.currentPage === 2 ? 'Send' : 'Next' }</Text>
</TouchableHighlight>
</FooterTab>
</Footer>
}
</Container>
)
}
}
function mapStateToProps(store) {
return {
isWorking: store.isWorking,
// errorMessage: store.auth.regError,
registered: store.auth.registered,
registerFailed: store.auth.registerFailed,
registerFailedMessage: store.auth.registerFailedMessage,
registrationState: store.auth.registrationState,
registrationDraft: store.auth.registrationDraft
// authToken: store.auth.authToken
};
}
function mapDispatchToProps(dispatch) {
return {
register: (user) => dispatch(register(user)),
updateDraft: (keyValue) => dispatch(updateDraft(keyValue)),
};
}
export default connect(mapStateToProps, mapDispatchToProps)(Register);
//Registeration styling
const styles = StyleSheet.create({
container: {
alignItems: 'center',
justifyContent: 'center',
},
paragraph: {
margin: 10,
marginTop: 0,
fontSize: 20,
fontWeight: '200',
textAlign: 'left',
color: '#090a08',
fontFamily: 'sans-serif-light',
},
logotop: {
backgroundColor: "transparent",
marginTop: 25,
height: 80,
width: 200,
resizeMode: 'contain'
},
stepIndicator: {
marginVertical: 10,
marginTop: 10,
},
circles: {
flexDirection: 'row',
alignItems: 'center',
paddingVertical: 20,
alignSelf: 'center',
color: '#222'
},
rowItem: {
flex: 3,
paddingVertical: 20
},
title: {
flex: 1,
fontSize: 20,
color: '#333333',
paddingVertical: 16,
fontWeight: '600'
},
body: {
flex: 1,
fontSize: 15,
color: '#606060',
lineHeight: 24,
marginRight: 8
},
submit:{
marginTop: 0,
paddingTop: 4,
paddingBottom:15,
marginLeft:40,
marginRight:40,
width: 100,
height: 40,
backgroundColor:'#2B2B26',
borderRadius:10,
borderWidth: 1,
borderColor: '#fff'
},
submitText: {
color: '#fff',
textAlign: 'center',
fontSize: 20,
},
submitQuit:{
marginTop: 0,
paddingTop: 4,
paddingBottom:15,
marginLeft:40,
marginRight:40,
width: 100,
height: 40,
backgroundColor:'#2B2B26',
borderRadius:10,
borderWidth: 1,
borderColor: '#fff'
},
submitTextQuit: {
color: '#fff',
textAlign: 'center',
marginRight: 6,
fontSize: 20,
},
input: {
backgroundColor: '#ffffff',
borderBottomWidth: 0,
marginBottom: 10,
borderRadius: 2,
paddingVertical: 5,
width: '100%'
},
placeholder: {
fontSize: 12
},
errorMessage: {
marginTop: 40
},
loggedInDesc: {
marginTop: 40
},
congratulations: {
fontSize: 30,
textAlign: 'center',
color: '#0d6851',
marginTop: 40,
fontFamily: 'AvenirLTStd-Roman',
},
registrationFailed: {
fontSize: 30,
textAlign: 'center',
color: 'red',
marginTop: 40,
fontFamily: 'AvenirLTStd-Roman',
}
});RegistrationFailure.js
'use strict';
import React, { Component } from 'react';
import { View, StyleSheet, TouchableHighlight, BackHandler, Alert } from 'react-native';
import { Text, Footer, FooterTab, Container, } from 'native-base';
import { StackActions, createStackNavigator, createAppContainer } from 'react-navigation';
const pushAction = StackActions.push({
routeName: 'Register',
params: {
myUserId: 9,
},
});
export default class RegisterFinal extends Component {
render() {
let dispatch = this.props.dispatch;
// const { goBack } = this.props.navigation;
return (
<View style={styles.container}>
<View>
<View>
<View>
<Text style={{margin: 4, marginTop: 30, alignSelf: 'center', color: 'red', fontSize: 20}}>Ooops!!</Text>
<Text style={{ margin: 4, marginTop: 20, fontFamily: 'Raleway-Regular', fontSize: 20, textAlign: 'center', color: '#595959', }}>
Your submission returned an error</Text>
<Text style={{ margin: 4, fontFamily: 'Raleway-Regular', fontSize: 20, textAlign: 'center', color: '#595959', }}> Please go back and try again.
</Text>
</View>
{/* <Footer style={{ backgroundColor: 'transparent', height: 140, shadowOffset: {height: 0, width: 0}, shadowOpacity: 0, elevation: 0}}transparent noShadow>
<FooterTab style={{ margin: 10, backgroundColor: 'transparent', justifyContent: 'center' }}>
<TouchableHighlight style={styles.submit} onPress={() => { console.log("Proceeding to Start All Over"); dispatch(StackActions.pop({ n: 2 })) }}>
<Text style={styles.submitText}>Retry</Text>
</TouchableHighlight>
</FooterTab>
</Footer> */}
<Footer style={{ justifyContent: 'center', marginTop: 140, alignSelf: 'center', flexDirection: 'row', backgroundColor: 'transparent', height: 70, shadowOffset: {height: 0, width: 0}, shadowOpacity: 0, elevation: 0}}transparent noShadow>
<FooterTab style={{marginLeft: -10, margin: 5, backgroundColor: 'transparent',}}>
<TouchableHighlight style={styles.submit} onPress={() => {
// Alert.alert(
// 'Exit App',
// 'Do you want to exit?',
// [
// {text: 'No', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
// {text: 'Yes', onPress: () => {this.props.dispatch(StackActions.pop({n: 1}));
// BackHandler.exitApp();}},
// ],
// { cancelable: false });
// return true;
console.log('you just tap quit');
console.log(this.props);
// return this.state.handleBackPress;
this.props.dispatch(StackActions.pop({n: 4}));
BackHandler.exitApp();
}}>
<Text style={styles.submitText}>Quit</Text>
</TouchableHighlight>
</FooterTab>
<FooterTab style={{margin: 5, backgroundColor: 'transparent',}}>
<TouchableHighlight style={styles.submit}
onPress={() => { console.log("Proceeding to Start All Over");
this.props.dispatch(pushAction);
}}>
<Text style={styles.submitText}>Retry</Text>
</TouchableHighlight>
</FooterTab>
</Footer>
</View>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
},
submit:{
marginTop: 0,
paddingTop: 5,
paddingBottom:15,
marginLeft:40,
marginRight:40,
width: 100,
height: 40,
backgroundColor:'#2B2B26',
borderRadius:10,
borderWidth: 1,
borderColor: '#fff'
},
submitText: {
color: '#fff',
textAlign: 'center',
fontSize: 20,
},
});react-native redux react-redux react-thunk
asked Nov 22 at 22:27
dilas
113
When a new User register for the first time, and get an error during submition, This workas expected but after the user tap retry it just loop to error page (RegistrationFailure.js) but behind the scene there is an activity going on.
I need help with this, cause for days i cannot really tell where the problem is.
Register.js
'use strict';
import React, { Component } from 'react';
import { View, StyleSheet, Image, TouchableHighlight, Alert } from 'react-native';
import { Container, Content, Input, Button, Footer, FooterTab, Text } from 'native-base';
import { connect } from 'react-redux';
import StepIndicator from 'react-native-step-indicator';
// import { RegisterFinal, RegisterStepOne, RegisterStepTwo, Progress, Congratulation } from '../components/register'
import RegisterStepOne from '../components/register/RegisterStepOne'
import RegisterStepTwo from '../components/register/RegisterStepTwo'
import RegisterFinal from '../components/register/RegisterFinal'
import ProgressIn from '../components/register/ProgressIn'
import Congratulation from '../components/register/Congratulation'
import RegistrationFailure from '../components/register/RegistrationFailure'
import { StackActions } from 'react-navigation';
import { register, updateDraft } from '../actions/auth';
import {StepOne} from '../screens/WalkThrough';
import Frisbee from 'frisbee';
import Spinner from 'react-native-loading-spinner-overlay';
//Temprorary api call for confirm pin
const api = new Frisbee({
baseURI: 'https://localhost:5678', //'http://localhost:3000',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
});
const MAX_LENGTH_CODE = 6;
const MAX_LENGTH_NUMBER = 14;
const customStyles = {
stepIndicatorSize: 30,
currentStepIndicatorSize: 40,
separatorStrokeWidth: 2,
currentStepStrokeWidth: 3,
stepStrokeCurrentColor: '#222',
stepStrokeWidth: 1,
stepStrokeFinishedColor: '#222',
stepStrokeUnFinishedColor: '#aaaaaa',
separatorFinishedColor: '#0d6851',
separatorUnFinishedColor: '#aaaaaa',
stepIndicatorFinishedColor: '#0d6851',
stepIndicatorUnFinishedColor: '#ffffff',
stepIndicatorCurrentColor: '#ffffff',
stepIndicatorLabelFontSize: 13,
currentStepIndicatorLabelFontSize: 13,
stepIndicatorLabelCurrentColor: '#222',
stepIndicatorLabelFinishedColor: '#ffffff',
stepIndicatorLabelUnFinishedColor: '#aaaaaa',
labelColor: '#999999',
labelSize: 13,
currentStepLabelColor: '#222'
}
class Register extends Component {
constructor(props) {
super(props);
this.state = {
onChangeText: false,
registrationState: 0,
currentPage: 0,
confirmationPin: "",
error: null,
enterCode: false,
spinner: false,
};
}
//Getting the otp from the api temporary
_getCode = () => {
this.setState({ spinner: true });
setTimeout(async () => {
try {
const res = await api.post('/socket.io/1/websocket/', {
body: {
...this.refs.form.getValues(),
...this.state.country
}
});
if (res.err) throw res.err;
this.setState({
spinner: false,
enterCode: true,
verification: res.body
});
this.refs.form.refs.Input.setNativeProps({ text: '' });
setTimeout(() => {
Alert.alert('Sent!', "We've sent you a verification code", [{
text: 'OK',
onPress: () => this.refs.form.refs.Input.focus()
}]);
}, 100);
} catch (err) {
// <https://github.com/niftylettuce/react-native-loading-spinner-overlay/issues/30#issuecomment-276845098>
this.setState({ spinner: false });
setTimeout(() => {
Alert.alert('Oops!', err.message);
}, 100);
}
}, 100);
}
_verifyCode = () => {
this.setState({ spinner: true });
setTimeout(async () => {
try {
const res = await api.put('/socket.io/1/websocket/', {
body: {
...this.refs.form.getValues(),
...this.state.country
}
});
if (res.err) throw res.err;
this.refs.form.refs.Input.blur();
// <https://github.com/niftylettuce/react-native-loading-spinner-overlay/issues/30#issuecomment-276845098>
this.setState({ spinner: false });
setTimeout(() => {
Alert.alert('Success!', 'You have successfully verified your phone number');
}, 100);
} catch (err) {
// <https://github.com/niftylettuce/react-native-loading-spinner-overlay/issues/30#issuecomment-276845098>
this.setState({ spinner: false });
setTimeout(() => {
Alert.alert('Oops!', err.message);
}, 100);
}
}, 100);
}
onChangeText = (val) => {
if (!this.state.enterCode) return;
if (val.length === MAX_LENGTH_CODE)
this._verifyCode();
}
_tryAgain = () => {
this.refs.form.refs.Input.setNativeProps({ text: '' })
this.refs.form.refs.Input.focus();
this.setState({ enterCode: false });
}
sendRegistration(){
let payload = Object.assign({}, {confirmationPin: this.state.confirmationPin}, this.props.registrationDraft)
console.log({Req: payload});
this.props.register(payload);
//This is what i added for the code verification
this.state.enterCode ? this._verifyCode() : this._getCode();
}
render() {
return (
<Container>
<View style={{ justifyContent: 'center', alignItems: 'center' }}>
<Image style={styles.logotop} source={require("../assets/img/proximity.png")} />
<Text style={{ fontSize: 30, fontFamily: 'Raleway-Regular', }}>Provisioning</Text>
</View>
<View style={styles.stepIndicator}>
<StepIndicator
customStyles={customStyles}
stepCount={4}
currentPosition={this.state.currentPage}
labels={}
/>
</View>
<Content>
{/* <ErrorBar /> */}
{this.state.currentPage === 0 && <RegisterStepOne updateField={(e)=> this.props.updateDraft(e)} params={this.props.registrationDraft} dispatch={this.props.navigation.dispatch} />}
{this.state.currentPage === 1 && <RegisterStepTwo updateField={(e)=> this.props.updateDraft(e)} params={this.props.registrationDraft} />}
{this.state.currentPage === 2 && <RegisterFinal updateField={(e)=>this.setState(e)} params={this.state} />}
{this.state.currentPage === 3 && this.props.registrationState < 4 && <ProgressIn registrationState={this.props.registrationState} />}
{this.state.currentPage === 3 && this.props.registrationState === 4 && <Congratulation styles={styles} navigate={(e) => this.props.navigation.navigate(e)} />}
{this.state.currentPage === 3 && this.props.registrationState < 4 && this.props.registerFailed !== true && <RegistrationFailure styles={styles} dispatch={this.props.navigation.dispatch}/>}
</Content>
<Spinner
visible={this.state.spinner}
textContent={'One moment...'}
textStyle={{ color: '#222' }}
/>
{this.state.currentPage < 3 &&
<Footer style={{ flexDirection: 'row', backgroundColor: 'transparent', height: 70, shadowOffset: { height: 0, width: 0 }, shadowOpacity: 0, elevation: 0 }} transparent noShadow>
<FooterTab style={{ margin: 5, backgroundColor: 'transparent', }}>
<TouchableHighlight style={styles.submitQuit} onPress={() => {
if(this.state.currentPage === 0){
this.props.navigation.dispatch(/*StackActions.popToTop()*/StackActions.pop({n: 2}));
}else{
this.setState({ currentPage: this.state.currentPage - 1 })
}
}}>
<Text style={styles.submitTextQuit}> { this.state.currentPage === 0 ? 'Back' : 'Back' }</Text>
</TouchableHighlight>
</FooterTab>
<FooterTab style={{ margin: 5, backgroundColor: 'transparent', }}>
<TouchableHighlight style={styles.submit} onPress={() => {
console.log({ isWorking: this.props.isWorking});
if (this.props.isWorking){
console.log('response for this');
return;
}
console.log(this.state.currentPage)
if(this.state.currentPage === 0){
if(!this.props.registrationDraft.firstName.length ||
!this.props.registrationDraft.surname.length ||
!this.props.registrationDraft.NINLastSix.length ||
!this.props.registrationDraft.yearOfBirth.length ||
!this.props.registrationDraft.phone.length){
Alert.alert(
'Warning!!!!',
'Fill out the required fields',
[
{text: 'OK', onPress: () => console.log('OK Pressed')},
],
{ cancelable: false }
)
console.log("cant go to next page 2")
return;
}
}
if(this.state.currentPage === 1){
if(!this.props.registrationDraft.password.length ||
!this.props.registrationDraft.confirmPassword.length){
Alert.alert(
'Warning!!!!',
'Fill out your Password',
[
{text: 'OK', onPress: () => console.log('OK Pressed')},
],
{ cancelable: false }
)
console.log("cant go to next page 3")
return;
}
if(this.props.registrationDraft.password !==
this.props.registrationDraft.confirmPassword){
Alert.alert(
'Warning!!!!!!',
'Password do not match',
[
{text: 'OK', onPress: () => console.log('OK Pressed')},
],
{ cancelable: false }
)
console.log("passwords do not match");
return;
}
}
if(this.state.currentPage + 1 === 3){
// if(!this.props.registrationDraft.comfirmPin.length)
this.sendRegistration();
}
this.setState({ currentPage: this.state.currentPage + 1 })
}}>
<Text style={styles.submitText}>{ this.state.currentPage === 2 ? 'Send' : 'Next' }</Text>
</TouchableHighlight>
</FooterTab>
</Footer>
}
</Container>
)
}
}
function mapStateToProps(store) {
return {
isWorking: store.isWorking,
// errorMessage: store.auth.regError,
registered: store.auth.registered,
registerFailed: store.auth.registerFailed,
registerFailedMessage: store.auth.registerFailedMessage,
registrationState: store.auth.registrationState,
registrationDraft: store.auth.registrationDraft
// authToken: store.auth.authToken
};
}
function mapDispatchToProps(dispatch) {
return {
register: (user) => dispatch(register(user)),
updateDraft: (keyValue) => dispatch(updateDraft(keyValue)),
};
}
export default connect(mapStateToProps, mapDispatchToProps)(Register);
//Registeration styling
const styles = StyleSheet.create({
container: {
alignItems: 'center',
justifyContent: 'center',
},
paragraph: {
margin: 10,
marginTop: 0,
fontSize: 20,
fontWeight: '200',
textAlign: 'left',
color: '#090a08',
fontFamily: 'sans-serif-light',
},
logotop: {
backgroundColor: "transparent",
marginTop: 25,
height: 80,
width: 200,
resizeMode: 'contain'
},
stepIndicator: {
marginVertical: 10,
marginTop: 10,
},
circles: {
flexDirection: 'row',
alignItems: 'center',
paddingVertical: 20,
alignSelf: 'center',
color: '#222'
},
rowItem: {
flex: 3,
paddingVertical: 20
},
title: {
flex: 1,
fontSize: 20,
color: '#333333',
paddingVertical: 16,
fontWeight: '600'
},
body: {
flex: 1,
fontSize: 15,
color: '#606060',
lineHeight: 24,
marginRight: 8
},
submit:{
marginTop: 0,
paddingTop: 4,
paddingBottom:15,
marginLeft:40,
marginRight:40,
width: 100,
height: 40,
backgroundColor:'#2B2B26',
borderRadius:10,
borderWidth: 1,
borderColor: '#fff'
},
submitText: {
color: '#fff',
textAlign: 'center',
fontSize: 20,
},
submitQuit:{
marginTop: 0,
paddingTop: 4,
paddingBottom:15,
marginLeft:40,
marginRight:40,
width: 100,
height: 40,
backgroundColor:'#2B2B26',
borderRadius:10,
borderWidth: 1,
borderColor: '#fff'
},
submitTextQuit: {
color: '#fff',
textAlign: 'center',
marginRight: 6,
fontSize: 20,
},
input: {
backgroundColor: '#ffffff',
borderBottomWidth: 0,
marginBottom: 10,
borderRadius: 2,
paddingVertical: 5,
width: '100%'
},
placeholder: {
fontSize: 12
},
errorMessage: {
marginTop: 40
},
loggedInDesc: {
marginTop: 40
},
congratulations: {
fontSize: 30,
textAlign: 'center',
color: '#0d6851',
marginTop: 40,
fontFamily: 'AvenirLTStd-Roman',
},
registrationFailed: {
fontSize: 30,
textAlign: 'center',
color: 'red',
marginTop: 40,
fontFamily: 'AvenirLTStd-Roman',
}
});RegistrationFailure.js
'use strict';
import React, { Component } from 'react';
import { View, StyleSheet, TouchableHighlight, BackHandler, Alert } from 'react-native';
import { Text, Footer, FooterTab, Container, } from 'native-base';
import { StackActions, createStackNavigator, createAppContainer } from 'react-navigation';
const pushAction = StackActions.push({
routeName: 'Register',
params: {
myUserId: 9,
},
});
export default class RegisterFinal extends Component {
render() {
let dispatch = this.props.dispatch;
// const { goBack } = this.props.navigation;
return (
<View style={styles.container}>
<View>
<View>
<View>
<Text style={{margin: 4, marginTop: 30, alignSelf: 'center', color: 'red', fontSize: 20}}>Ooops!!</Text>
<Text style={{ margin: 4, marginTop: 20, fontFamily: 'Raleway-Regular', fontSize: 20, textAlign: 'center', color: '#595959', }}>
Your submission returned an error</Text>
<Text style={{ margin: 4, fontFamily: 'Raleway-Regular', fontSize: 20, textAlign: 'center', color: '#595959', }}> Please go back and try again.
</Text>
</View>
{/* <Footer style={{ backgroundColor: 'transparent', height: 140, shadowOffset: {height: 0, width: 0}, shadowOpacity: 0, elevation: 0}}transparent noShadow>
<FooterTab style={{ margin: 10, backgroundColor: 'transparent', justifyContent: 'center' }}>
<TouchableHighlight style={styles.submit} onPress={() => { console.log("Proceeding to Start All Over"); dispatch(StackActions.pop({ n: 2 })) }}>
<Text style={styles.submitText}>Retry</Text>
</TouchableHighlight>
</FooterTab>
</Footer> */}
<Footer style={{ justifyContent: 'center', marginTop: 140, alignSelf: 'center', flexDirection: 'row', backgroundColor: 'transparent', height: 70, shadowOffset: {height: 0, width: 0}, shadowOpacity: 0, elevation: 0}}transparent noShadow>
<FooterTab style={{marginLeft: -10, margin: 5, backgroundColor: 'transparent',}}>
<TouchableHighlight style={styles.submit} onPress={() => {
// Alert.alert(
// 'Exit App',
// 'Do you want to exit?',
// [
// {text: 'No', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
// {text: 'Yes', onPress: () => {this.props.dispatch(StackActions.pop({n: 1}));
// BackHandler.exitApp();}},
// ],
// { cancelable: false });
// return true;
console.log('you just tap quit');
console.log(this.props);
// return this.state.handleBackPress;
this.props.dispatch(StackActions.pop({n: 4}));
BackHandler.exitApp();
}}>
<Text style={styles.submitText}>Quit</Text>
</TouchableHighlight>
</FooterTab>
<FooterTab style={{margin: 5, backgroundColor: 'transparent',}}>
<TouchableHighlight style={styles.submit}
onPress={() => { console.log("Proceeding to Start All Over");
this.props.dispatch(pushAction);
}}>
<Text style={styles.submitText}>Retry</Text>
</TouchableHighlight>
</FooterTab>
</Footer>
</View>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
},
submit:{
marginTop: 0,
paddingTop: 5,
paddingBottom:15,
marginLeft:40,
marginRight:40,
width: 100,
height: 40,
backgroundColor:'#2B2B26',
borderRadius:10,
borderWidth: 1,
borderColor: '#fff'
},
submitText: {
color: '#fff',
textAlign: 'center',
fontSize: 20,
},
});'use strict';
import React, { Component } from 'react';
import { View, StyleSheet, Image, TouchableHighlight, Alert } from 'react-native';
import { Container, Content, Input, Button, Footer, FooterTab, Text } from 'native-base';
import { connect } from 'react-redux';
import StepIndicator from 'react-native-step-indicator';
// import { RegisterFinal, RegisterStepOne, RegisterStepTwo, Progress, Congratulation } from '../components/register'
import RegisterStepOne from '../components/register/RegisterStepOne'
import RegisterStepTwo from '../components/register/RegisterStepTwo'
import RegisterFinal from '../components/register/RegisterFinal'
import ProgressIn from '../components/register/ProgressIn'
import Congratulation from '../components/register/Congratulation'
import RegistrationFailure from '../components/register/RegistrationFailure'
import { StackActions } from 'react-navigation';
import { register, updateDraft } from '../actions/auth';
import {StepOne} from '../screens/WalkThrough';
import Frisbee from 'frisbee';
import Spinner from 'react-native-loading-spinner-overlay';
//Temprorary api call for confirm pin
const api = new Frisbee({
baseURI: 'https://localhost:5678', //'http://localhost:3000',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
});
const MAX_LENGTH_CODE = 6;
const MAX_LENGTH_NUMBER = 14;
const customStyles = {
stepIndicatorSize: 30,
currentStepIndicatorSize: 40,
separatorStrokeWidth: 2,
currentStepStrokeWidth: 3,
stepStrokeCurrentColor: '#222',
stepStrokeWidth: 1,
stepStrokeFinishedColor: '#222',
stepStrokeUnFinishedColor: '#aaaaaa',
separatorFinishedColor: '#0d6851',
separatorUnFinishedColor: '#aaaaaa',
stepIndicatorFinishedColor: '#0d6851',
stepIndicatorUnFinishedColor: '#ffffff',
stepIndicatorCurrentColor: '#ffffff',
stepIndicatorLabelFontSize: 13,
currentStepIndicatorLabelFontSize: 13,
stepIndicatorLabelCurrentColor: '#222',
stepIndicatorLabelFinishedColor: '#ffffff',
stepIndicatorLabelUnFinishedColor: '#aaaaaa',
labelColor: '#999999',
labelSize: 13,
currentStepLabelColor: '#222'
}
class Register extends Component {
constructor(props) {
super(props);
this.state = {
onChangeText: false,
registrationState: 0,
currentPage: 0,
confirmationPin: "",
error: null,
enterCode: false,
spinner: false,
};
}
//Getting the otp from the api temporary
_getCode = () => {
this.setState({ spinner: true });
setTimeout(async () => {
try {
const res = await api.post('/socket.io/1/websocket/', {
body: {
...this.refs.form.getValues(),
...this.state.country
}
});
if (res.err) throw res.err;
this.setState({
spinner: false,
enterCode: true,
verification: res.body
});
this.refs.form.refs.Input.setNativeProps({ text: '' });
setTimeout(() => {
Alert.alert('Sent!', "We've sent you a verification code", [{
text: 'OK',
onPress: () => this.refs.form.refs.Input.focus()
}]);
}, 100);
} catch (err) {
// <https://github.com/niftylettuce/react-native-loading-spinner-overlay/issues/30#issuecomment-276845098>
this.setState({ spinner: false });
setTimeout(() => {
Alert.alert('Oops!', err.message);
}, 100);
}
}, 100);
}
_verifyCode = () => {
this.setState({ spinner: true });
setTimeout(async () => {
try {
const res = await api.put('/socket.io/1/websocket/', {
body: {
...this.refs.form.getValues(),
...this.state.country
}
});
if (res.err) throw res.err;
this.refs.form.refs.Input.blur();
// <https://github.com/niftylettuce/react-native-loading-spinner-overlay/issues/30#issuecomment-276845098>
this.setState({ spinner: false });
setTimeout(() => {
Alert.alert('Success!', 'You have successfully verified your phone number');
}, 100);
} catch (err) {
// <https://github.com/niftylettuce/react-native-loading-spinner-overlay/issues/30#issuecomment-276845098>
this.setState({ spinner: false });
setTimeout(() => {
Alert.alert('Oops!', err.message);
}, 100);
}
}, 100);
}
onChangeText = (val) => {
if (!this.state.enterCode) return;
if (val.length === MAX_LENGTH_CODE)
this._verifyCode();
}
_tryAgain = () => {
this.refs.form.refs.Input.setNativeProps({ text: '' })
this.refs.form.refs.Input.focus();
this.setState({ enterCode: false });
}
sendRegistration(){
let payload = Object.assign({}, {confirmationPin: this.state.confirmationPin}, this.props.registrationDraft)
console.log({Req: payload});
this.props.register(payload);
//This is what i added for the code verification
this.state.enterCode ? this._verifyCode() : this._getCode();
}
render() {
return (
<Container>
<View style={{ justifyContent: 'center', alignItems: 'center' }}>
<Image style={styles.logotop} source={require("../assets/img/proximity.png")} />
<Text style={{ fontSize: 30, fontFamily: 'Raleway-Regular', }}>Provisioning</Text>
</View>
<View style={styles.stepIndicator}>
<StepIndicator
customStyles={customStyles}
stepCount={4}
currentPosition={this.state.currentPage}
labels={}
/>
</View>
<Content>
{/* <ErrorBar /> */}
{this.state.currentPage === 0 && <RegisterStepOne updateField={(e)=> this.props.updateDraft(e)} params={this.props.registrationDraft} dispatch={this.props.navigation.dispatch} />}
{this.state.currentPage === 1 && <RegisterStepTwo updateField={(e)=> this.props.updateDraft(e)} params={this.props.registrationDraft} />}
{this.state.currentPage === 2 && <RegisterFinal updateField={(e)=>this.setState(e)} params={this.state} />}
{this.state.currentPage === 3 && this.props.registrationState < 4 && <ProgressIn registrationState={this.props.registrationState} />}
{this.state.currentPage === 3 && this.props.registrationState === 4 && <Congratulation styles={styles} navigate={(e) => this.props.navigation.navigate(e)} />}
{this.state.currentPage === 3 && this.props.registrationState < 4 && this.props.registerFailed !== true && <RegistrationFailure styles={styles} dispatch={this.props.navigation.dispatch}/>}
</Content>
<Spinner
visible={this.state.spinner}
textContent={'One moment...'}
textStyle={{ color: '#222' }}
/>
{this.state.currentPage < 3 &&
<Footer style={{ flexDirection: 'row', backgroundColor: 'transparent', height: 70, shadowOffset: { height: 0, width: 0 }, shadowOpacity: 0, elevation: 0 }} transparent noShadow>
<FooterTab style={{ margin: 5, backgroundColor: 'transparent', }}>
<TouchableHighlight style={styles.submitQuit} onPress={() => {
if(this.state.currentPage === 0){
this.props.navigation.dispatch(/*StackActions.popToTop()*/StackActions.pop({n: 2}));
}else{
this.setState({ currentPage: this.state.currentPage - 1 })
}
}}>
<Text style={styles.submitTextQuit}> { this.state.currentPage === 0 ? 'Back' : 'Back' }</Text>
</TouchableHighlight>
</FooterTab>
<FooterTab style={{ margin: 5, backgroundColor: 'transparent', }}>
<TouchableHighlight style={styles.submit} onPress={() => {
console.log({ isWorking: this.props.isWorking});
if (this.props.isWorking){
console.log('response for this');
return;
}
console.log(this.state.currentPage)
if(this.state.currentPage === 0){
if(!this.props.registrationDraft.firstName.length ||
!this.props.registrationDraft.surname.length ||
!this.props.registrationDraft.NINLastSix.length ||
!this.props.registrationDraft.yearOfBirth.length ||
!this.props.registrationDraft.phone.length){
Alert.alert(
'Warning!!!!',
'Fill out the required fields',
[
{text: 'OK', onPress: () => console.log('OK Pressed')},
],
{ cancelable: false }
)
console.log("cant go to next page 2")
return;
}
}
if(this.state.currentPage === 1){
if(!this.props.registrationDraft.password.length ||
!this.props.registrationDraft.confirmPassword.length){
Alert.alert(
'Warning!!!!',
'Fill out your Password',
[
{text: 'OK', onPress: () => console.log('OK Pressed')},
],
{ cancelable: false }
)
console.log("cant go to next page 3")
return;
}
if(this.props.registrationDraft.password !==
this.props.registrationDraft.confirmPassword){
Alert.alert(
'Warning!!!!!!',
'Password do not match',
[
{text: 'OK', onPress: () => console.log('OK Pressed')},
],
{ cancelable: false }
)
console.log("passwords do not match");
return;
}
}
if(this.state.currentPage + 1 === 3){
// if(!this.props.registrationDraft.comfirmPin.length)
this.sendRegistration();
}
this.setState({ currentPage: this.state.currentPage + 1 })
}}>
<Text style={styles.submitText}>{ this.state.currentPage === 2 ? 'Send' : 'Next' }</Text>
</TouchableHighlight>
</FooterTab>
</Footer>
}
</Container>
)
}
}
function mapStateToProps(store) {
return {
isWorking: store.isWorking,
// errorMessage: store.auth.regError,
registered: store.auth.registered,
registerFailed: store.auth.registerFailed,
registerFailedMessage: store.auth.registerFailedMessage,
registrationState: store.auth.registrationState,
registrationDraft: store.auth.registrationDraft
// authToken: store.auth.authToken
};
}
function mapDispatchToProps(dispatch) {
return {
register: (user) => dispatch(register(user)),
updateDraft: (keyValue) => dispatch(updateDraft(keyValue)),
};
}
export default connect(mapStateToProps, mapDispatchToProps)(Register);
//Registeration styling
const styles = StyleSheet.create({
container: {
alignItems: 'center',
justifyContent: 'center',
},
paragraph: {
margin: 10,
marginTop: 0,
fontSize: 20,
fontWeight: '200',
textAlign: 'left',
color: '#090a08',
fontFamily: 'sans-serif-light',
},
logotop: {
backgroundColor: "transparent",
marginTop: 25,
height: 80,
width: 200,
resizeMode: 'contain'
},
stepIndicator: {
marginVertical: 10,
marginTop: 10,
},
circles: {
flexDirection: 'row',
alignItems: 'center',
paddingVertical: 20,
alignSelf: 'center',
color: '#222'
},
rowItem: {
flex: 3,
paddingVertical: 20
},
title: {
flex: 1,
fontSize: 20,
color: '#333333',
paddingVertical: 16,
fontWeight: '600'
},
body: {
flex: 1,
fontSize: 15,
color: '#606060',
lineHeight: 24,
marginRight: 8
},
submit:{
marginTop: 0,
paddingTop: 4,
paddingBottom:15,
marginLeft:40,
marginRight:40,
width: 100,
height: 40,
backgroundColor:'#2B2B26',
borderRadius:10,
borderWidth: 1,
borderColor: '#fff'
},
submitText: {
color: '#fff',
textAlign: 'center',
fontSize: 20,
},
submitQuit:{
marginTop: 0,
paddingTop: 4,
paddingBottom:15,
marginLeft:40,
marginRight:40,
width: 100,
height: 40,
backgroundColor:'#2B2B26',
borderRadius:10,
borderWidth: 1,
borderColor: '#fff'
},
submitTextQuit: {
color: '#fff',
textAlign: 'center',
marginRight: 6,
fontSize: 20,
},
input: {
backgroundColor: '#ffffff',
borderBottomWidth: 0,
marginBottom: 10,
borderRadius: 2,
paddingVertical: 5,
width: '100%'
},
placeholder: {
fontSize: 12
},
errorMessage: {
marginTop: 40
},
loggedInDesc: {
marginTop: 40
},
congratulations: {
fontSize: 30,
textAlign: 'center',
color: '#0d6851',
marginTop: 40,
fontFamily: 'AvenirLTStd-Roman',
},
registrationFailed: {
fontSize: 30,
textAlign: 'center',
color: 'red',
marginTop: 40,
fontFamily: 'AvenirLTStd-Roman',
}
});'use strict';
import React, { Component } from 'react';
import { View, StyleSheet, Image, TouchableHighlight, Alert } from 'react-native';
import { Container, Content, Input, Button, Footer, FooterTab, Text } from 'native-base';
import { connect } from 'react-redux';
import StepIndicator from 'react-native-step-indicator';
// import { RegisterFinal, RegisterStepOne, RegisterStepTwo, Progress, Congratulation } from '../components/register'
import RegisterStepOne from '../components/register/RegisterStepOne'
import RegisterStepTwo from '../components/register/RegisterStepTwo'
import RegisterFinal from '../components/register/RegisterFinal'
import ProgressIn from '../components/register/ProgressIn'
import Congratulation from '../components/register/Congratulation'
import RegistrationFailure from '../components/register/RegistrationFailure'
import { StackActions } from 'react-navigation';
import { register, updateDraft } from '../actions/auth';
import {StepOne} from '../screens/WalkThrough';
import Frisbee from 'frisbee';
import Spinner from 'react-native-loading-spinner-overlay';
//Temprorary api call for confirm pin
const api = new Frisbee({
baseURI: 'https://localhost:5678', //'http://localhost:3000',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
});
const MAX_LENGTH_CODE = 6;
const MAX_LENGTH_NUMBER = 14;
const customStyles = {
stepIndicatorSize: 30,
currentStepIndicatorSize: 40,
separatorStrokeWidth: 2,
currentStepStrokeWidth: 3,
stepStrokeCurrentColor: '#222',
stepStrokeWidth: 1,
stepStrokeFinishedColor: '#222',
stepStrokeUnFinishedColor: '#aaaaaa',
separatorFinishedColor: '#0d6851',
separatorUnFinishedColor: '#aaaaaa',
stepIndicatorFinishedColor: '#0d6851',
stepIndicatorUnFinishedColor: '#ffffff',
stepIndicatorCurrentColor: '#ffffff',
stepIndicatorLabelFontSize: 13,
currentStepIndicatorLabelFontSize: 13,
stepIndicatorLabelCurrentColor: '#222',
stepIndicatorLabelFinishedColor: '#ffffff',
stepIndicatorLabelUnFinishedColor: '#aaaaaa',
labelColor: '#999999',
labelSize: 13,
currentStepLabelColor: '#222'
}
class Register extends Component {
constructor(props) {
super(props);
this.state = {
onChangeText: false,
registrationState: 0,
currentPage: 0,
confirmationPin: "",
error: null,
enterCode: false,
spinner: false,
};
}
//Getting the otp from the api temporary
_getCode = () => {
this.setState({ spinner: true });
setTimeout(async () => {
try {
const res = await api.post('/socket.io/1/websocket/', {
body: {
...this.refs.form.getValues(),
...this.state.country
}
});
if (res.err) throw res.err;
this.setState({
spinner: false,
enterCode: true,
verification: res.body
});
this.refs.form.refs.Input.setNativeProps({ text: '' });
setTimeout(() => {
Alert.alert('Sent!', "We've sent you a verification code", [{
text: 'OK',
onPress: () => this.refs.form.refs.Input.focus()
}]);
}, 100);
} catch (err) {
// <https://github.com/niftylettuce/react-native-loading-spinner-overlay/issues/30#issuecomment-276845098>
this.setState({ spinner: false });
setTimeout(() => {
Alert.alert('Oops!', err.message);
}, 100);
}
}, 100);
}
_verifyCode = () => {
this.setState({ spinner: true });
setTimeout(async () => {
try {
const res = await api.put('/socket.io/1/websocket/', {
body: {
...this.refs.form.getValues(),
...this.state.country
}
});
if (res.err) throw res.err;
this.refs.form.refs.Input.blur();
// <https://github.com/niftylettuce/react-native-loading-spinner-overlay/issues/30#issuecomment-276845098>
this.setState({ spinner: false });
setTimeout(() => {
Alert.alert('Success!', 'You have successfully verified your phone number');
}, 100);
} catch (err) {
// <https://github.com/niftylettuce/react-native-loading-spinner-overlay/issues/30#issuecomment-276845098>
this.setState({ spinner: false });
setTimeout(() => {
Alert.alert('Oops!', err.message);
}, 100);
}
}, 100);
}
onChangeText = (val) => {
if (!this.state.enterCode) return;
if (val.length === MAX_LENGTH_CODE)
this._verifyCode();
}
_tryAgain = () => {
this.refs.form.refs.Input.setNativeProps({ text: '' })
this.refs.form.refs.Input.focus();
this.setState({ enterCode: false });
}
sendRegistration(){
let payload = Object.assign({}, {confirmationPin: this.state.confirmationPin}, this.props.registrationDraft)
console.log({Req: payload});
this.props.register(payload);
//This is what i added for the code verification
this.state.enterCode ? this._verifyCode() : this._getCode();
}
render() {
return (
<Container>
<View style={{ justifyContent: 'center', alignItems: 'center' }}>
<Image style={styles.logotop} source={require("../assets/img/proximity.png")} />
<Text style={{ fontSize: 30, fontFamily: 'Raleway-Regular', }}>Provisioning</Text>
</View>
<View style={styles.stepIndicator}>
<StepIndicator
customStyles={customStyles}
stepCount={4}
currentPosition={this.state.currentPage}
labels={}
/>
</View>
<Content>
{/* <ErrorBar /> */}
{this.state.currentPage === 0 && <RegisterStepOne updateField={(e)=> this.props.updateDraft(e)} params={this.props.registrationDraft} dispatch={this.props.navigation.dispatch} />}
{this.state.currentPage === 1 && <RegisterStepTwo updateField={(e)=> this.props.updateDraft(e)} params={this.props.registrationDraft} />}
{this.state.currentPage === 2 && <RegisterFinal updateField={(e)=>this.setState(e)} params={this.state} />}
{this.state.currentPage === 3 && this.props.registrationState < 4 && <ProgressIn registrationState={this.props.registrationState} />}
{this.state.currentPage === 3 && this.props.registrationState === 4 && <Congratulation styles={styles} navigate={(e) => this.props.navigation.navigate(e)} />}
{this.state.currentPage === 3 && this.props.registrationState < 4 && this.props.registerFailed !== true && <RegistrationFailure styles={styles} dispatch={this.props.navigation.dispatch}/>}
</Content>
<Spinner
visible={this.state.spinner}
textContent={'One moment...'}
textStyle={{ color: '#222' }}
/>
{this.state.currentPage < 3 &&
<Footer style={{ flexDirection: 'row', backgroundColor: 'transparent', height: 70, shadowOffset: { height: 0, width: 0 }, shadowOpacity: 0, elevation: 0 }} transparent noShadow>
<FooterTab style={{ margin: 5, backgroundColor: 'transparent', }}>
<TouchableHighlight style={styles.submitQuit} onPress={() => {
if(this.state.currentPage === 0){
this.props.navigation.dispatch(/*StackActions.popToTop()*/StackActions.pop({n: 2}));
}else{
this.setState({ currentPage: this.state.currentPage - 1 })
}
}}>
<Text style={styles.submitTextQuit}> { this.state.currentPage === 0 ? 'Back' : 'Back' }</Text>
</TouchableHighlight>
</FooterTab>
<FooterTab style={{ margin: 5, backgroundColor: 'transparent', }}>
<TouchableHighlight style={styles.submit} onPress={() => {
console.log({ isWorking: this.props.isWorking});
if (this.props.isWorking){
console.log('response for this');
return;
}
console.log(this.state.currentPage)
if(this.state.currentPage === 0){
if(!this.props.registrationDraft.firstName.length ||
!this.props.registrationDraft.surname.length ||
!this.props.registrationDraft.NINLastSix.length ||
!this.props.registrationDraft.yearOfBirth.length ||
!this.props.registrationDraft.phone.length){
Alert.alert(
'Warning!!!!',
'Fill out the required fields',
[
{text: 'OK', onPress: () => console.log('OK Pressed')},
],
{ cancelable: false }
)
console.log("cant go to next page 2")
return;
}
}
if(this.state.currentPage === 1){
if(!this.props.registrationDraft.password.length ||
!this.props.registrationDraft.confirmPassword.length){
Alert.alert(
'Warning!!!!',
'Fill out your Password',
[
{text: 'OK', onPress: () => console.log('OK Pressed')},
],
{ cancelable: false }
)
console.log("cant go to next page 3")
return;
}
if(this.props.registrationDraft.password !==
this.props.registrationDraft.confirmPassword){
Alert.alert(
'Warning!!!!!!',
'Password do not match',
[
{text: 'OK', onPress: () => console.log('OK Pressed')},
],
{ cancelable: false }
)
console.log("passwords do not match");
return;
}
}
if(this.state.currentPage + 1 === 3){
// if(!this.props.registrationDraft.comfirmPin.length)
this.sendRegistration();
}
this.setState({ currentPage: this.state.currentPage + 1 })
}}>
<Text style={styles.submitText}>{ this.state.currentPage === 2 ? 'Send' : 'Next' }</Text>
</TouchableHighlight>
</FooterTab>
</Footer>
}
</Container>
)
}
}
function mapStateToProps(store) {
return {
isWorking: store.isWorking,
// errorMessage: store.auth.regError,
registered: store.auth.registered,
registerFailed: store.auth.registerFailed,
registerFailedMessage: store.auth.registerFailedMessage,
registrationState: store.auth.registrationState,
registrationDraft: store.auth.registrationDraft
// authToken: store.auth.authToken
};
}
function mapDispatchToProps(dispatch) {
return {
register: (user) => dispatch(register(user)),
updateDraft: (keyValue) => dispatch(updateDraft(keyValue)),
};
}
export default connect(mapStateToProps, mapDispatchToProps)(Register);
//Registeration styling
const styles = StyleSheet.create({
container: {
alignItems: 'center',
justifyContent: 'center',
},
paragraph: {
margin: 10,
marginTop: 0,
fontSize: 20,
fontWeight: '200',
textAlign: 'left',
color: '#090a08',
fontFamily: 'sans-serif-light',
},
logotop: {
backgroundColor: "transparent",
marginTop: 25,
height: 80,
width: 200,
resizeMode: 'contain'
},
stepIndicator: {
marginVertical: 10,
marginTop: 10,
},
circles: {
flexDirection: 'row',
alignItems: 'center',
paddingVertical: 20,
alignSelf: 'center',
color: '#222'
},
rowItem: {
flex: 3,
paddingVertical: 20
},
title: {
flex: 1,
fontSize: 20,
color: '#333333',
paddingVertical: 16,
fontWeight: '600'
},
body: {
flex: 1,
fontSize: 15,
color: '#606060',
lineHeight: 24,
marginRight: 8
},
submit:{
marginTop: 0,
paddingTop: 4,
paddingBottom:15,
marginLeft:40,
marginRight:40,
width: 100,
height: 40,
backgroundColor:'#2B2B26',
borderRadius:10,
borderWidth: 1,
borderColor: '#fff'
},
submitText: {
color: '#fff',
textAlign: 'center',
fontSize: 20,
},
submitQuit:{
marginTop: 0,
paddingTop: 4,
paddingBottom:15,
marginLeft:40,
marginRight:40,
width: 100,
height: 40,
backgroundColor:'#2B2B26',
borderRadius:10,
borderWidth: 1,
borderColor: '#fff'
},
submitTextQuit: {
color: '#fff',
textAlign: 'center',
marginRight: 6,
fontSize: 20,
},
input: {
backgroundColor: '#ffffff',
borderBottomWidth: 0,
marginBottom: 10,
borderRadius: 2,
paddingVertical: 5,
width: '100%'
},
placeholder: {
fontSize: 12
},
errorMessage: {
marginTop: 40
},
loggedInDesc: {
marginTop: 40
},
congratulations: {
fontSize: 30,
textAlign: 'center',
color: '#0d6851',
marginTop: 40,
fontFamily: 'AvenirLTStd-Roman',
},
registrationFailed: {
fontSize: 30,
textAlign: 'center',
color: 'red',
marginTop: 40,
fontFamily: 'AvenirLTStd-Roman',
}
});'use strict';
import React, { Component } from 'react';
import { View, StyleSheet, TouchableHighlight, BackHandler, Alert } from 'react-native';
import { Text, Footer, FooterTab, Container, } from 'native-base';
import { StackActions, createStackNavigator, createAppContainer } from 'react-navigation';
const pushAction = StackActions.push({
routeName: 'Register',
params: {
myUserId: 9,
},
});
export default class RegisterFinal extends Component {
render() {
let dispatch = this.props.dispatch;
// const { goBack } = this.props.navigation;
return (
<View style={styles.container}>
<View>
<View>
<View>
<Text style={{margin: 4, marginTop: 30, alignSelf: 'center', color: 'red', fontSize: 20}}>Ooops!!</Text>
<Text style={{ margin: 4, marginTop: 20, fontFamily: 'Raleway-Regular', fontSize: 20, textAlign: 'center', color: '#595959', }}>
Your submission returned an error</Text>
<Text style={{ margin: 4, fontFamily: 'Raleway-Regular', fontSize: 20, textAlign: 'center', color: '#595959', }}> Please go back and try again.
</Text>
</View>
{/* <Footer style={{ backgroundColor: 'transparent', height: 140, shadowOffset: {height: 0, width: 0}, shadowOpacity: 0, elevation: 0}}transparent noShadow>
<FooterTab style={{ margin: 10, backgroundColor: 'transparent', justifyContent: 'center' }}>
<TouchableHighlight style={styles.submit} onPress={() => { console.log("Proceeding to Start All Over"); dispatch(StackActions.pop({ n: 2 })) }}>
<Text style={styles.submitText}>Retry</Text>
</TouchableHighlight>
</FooterTab>
</Footer> */}
<Footer style={{ justifyContent: 'center', marginTop: 140, alignSelf: 'center', flexDirection: 'row', backgroundColor: 'transparent', height: 70, shadowOffset: {height: 0, width: 0}, shadowOpacity: 0, elevation: 0}}transparent noShadow>
<FooterTab style={{marginLeft: -10, margin: 5, backgroundColor: 'transparent',}}>
<TouchableHighlight style={styles.submit} onPress={() => {
// Alert.alert(
// 'Exit App',
// 'Do you want to exit?',
// [
// {text: 'No', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
// {text: 'Yes', onPress: () => {this.props.dispatch(StackActions.pop({n: 1}));
// BackHandler.exitApp();}},
// ],
// { cancelable: false });
// return true;
console.log('you just tap quit');
console.log(this.props);
// return this.state.handleBackPress;
this.props.dispatch(StackActions.pop({n: 4}));
BackHandler.exitApp();
}}>
<Text style={styles.submitText}>Quit</Text>
</TouchableHighlight>
</FooterTab>
<FooterTab style={{margin: 5, backgroundColor: 'transparent',}}>
<TouchableHighlight style={styles.submit}
onPress={() => { console.log("Proceeding to Start All Over");
this.props.dispatch(pushAction);
}}>
<Text style={styles.submitText}>Retry</Text>
</TouchableHighlight>
</FooterTab>
</Footer>
</View>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
},
submit:{
marginTop: 0,
paddingTop: 5,
paddingBottom:15,
marginLeft:40,
marginRight:40,
width: 100,
height: 40,
backgroundColor:'#2B2B26',
borderRadius:10,
borderWidth: 1,
borderColor: '#fff'
},
submitText: {
color: '#fff',
textAlign: 'center',
fontSize: 20,
},
});'use strict';
import React, { Component } from 'react';
import { View, StyleSheet, TouchableHighlight, BackHandler, Alert } from 'react-native';
import { Text, Footer, FooterTab, Container, } from 'native-base';
import { StackActions, createStackNavigator, createAppContainer } from 'react-navigation';
const pushAction = StackActions.push({
routeName: 'Register',
params: {
myUserId: 9,
},
});
export default class RegisterFinal extends Component {
render() {
let dispatch = this.props.dispatch;
// const { goBack } = this.props.navigation;
return (
<View style={styles.container}>
<View>
<View>
<View>
<Text style={{margin: 4, marginTop: 30, alignSelf: 'center', color: 'red', fontSize: 20}}>Ooops!!</Text>
<Text style={{ margin: 4, marginTop: 20, fontFamily: 'Raleway-Regular', fontSize: 20, textAlign: 'center', color: '#595959', }}>
Your submission returned an error</Text>
<Text style={{ margin: 4, fontFamily: 'Raleway-Regular', fontSize: 20, textAlign: 'center', color: '#595959', }}> Please go back and try again.
</Text>
</View>
{/* <Footer style={{ backgroundColor: 'transparent', height: 140, shadowOffset: {height: 0, width: 0}, shadowOpacity: 0, elevation: 0}}transparent noShadow>
<FooterTab style={{ margin: 10, backgroundColor: 'transparent', justifyContent: 'center' }}>
<TouchableHighlight style={styles.submit} onPress={() => { console.log("Proceeding to Start All Over"); dispatch(StackActions.pop({ n: 2 })) }}>
<Text style={styles.submitText}>Retry</Text>
</TouchableHighlight>
</FooterTab>
</Footer> */}
<Footer style={{ justifyContent: 'center', marginTop: 140, alignSelf: 'center', flexDirection: 'row', backgroundColor: 'transparent', height: 70, shadowOffset: {height: 0, width: 0}, shadowOpacity: 0, elevation: 0}}transparent noShadow>
<FooterTab style={{marginLeft: -10, margin: 5, backgroundColor: 'transparent',}}>
<TouchableHighlight style={styles.submit} onPress={() => {
// Alert.alert(
// 'Exit App',
// 'Do you want to exit?',
// [
// {text: 'No', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
// {text: 'Yes', onPress: () => {this.props.dispatch(StackActions.pop({n: 1}));
// BackHandler.exitApp();}},
// ],
// { cancelable: false });
// return true;
console.log('you just tap quit');
console.log(this.props);
// return this.state.handleBackPress;
this.props.dispatch(StackActions.pop({n: 4}));
BackHandler.exitApp();
}}>
<Text style={styles.submitText}>Quit</Text>
</TouchableHighlight>
</FooterTab>
<FooterTab style={{margin: 5, backgroundColor: 'transparent',}}>
<TouchableHighlight style={styles.submit}
onPress={() => { console.log("Proceeding to Start All Over");
this.props.dispatch(pushAction);
}}>
<Text style={styles.submitText}>Retry</Text>
</TouchableHighlight>
</FooterTab>
</Footer>
</View>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
},
submit:{
marginTop: 0,
paddingTop: 5,
paddingBottom:15,
marginLeft:40,
marginRight:40,
width: 100,
height: 40,
backgroundColor:'#2B2B26',
borderRadius:10,
borderWidth: 1,
borderColor: '#fff'
},
submitText: {
color: '#fff',
textAlign: 'center',
fontSize: 20,
},
});react-native redux react-redux react-thunk
react-native redux react-redux react-thunk
asked Nov 22 at 22:27
dilas
113
asked Nov 22 at 22:27
dilas
113
asked Nov 22 at 22:27
dilas
113
asked Nov 22 at 22:27
dilas
113
asked Nov 22 at 22:27
dilas
113
113
Great that you provided your code but I don't think I really understand your question. Could you please elaborate more on "it just loop to error page but behind the scene there is an activity going on". What exactly do you mean with loop to the error page and what kind of activity are you mentioning??
– Y. Gherbi
Nov 22 at 23:31
when a user get to input a wrong data in a required field for the first time it hit the server and them pop up the error page. The problem i am faced with is when the user tap on retry, and go through the processes he/she ran through initicially it pop the error message page before it send a response from the server.
– dilas
Nov 23 at 0:32
How do you get toRegistrationFailure.jsin the first place? What happens when user makes a mistake during registration? Does it set some state variable? Do you clear that variable when user tries again? If you could explain the scenario a bit more with respect to the code or provide a working Expo snack, it would help us figure it out easily.
– Uzair A.
Nov 23 at 4:21
here is the link to the expo snack snack.expo.io/Bylb3cToQ
– dilas
Nov 23 at 6:24
add a comment |
Great that you provided your code but I don't think I really understand your question. Could you please elaborate more on "it just loop to error page but behind the scene there is an activity going on". What exactly do you mean with loop to the error page and what kind of activity are you mentioning??
– Y. Gherbi
Nov 22 at 23:31
when a user get to input a wrong data in a required field for the first time it hit the server and them pop up the error page. The problem i am faced with is when the user tap on retry, and go through the processes he/she ran through initicially it pop the error message page before it send a response from the server.
– dilas
Nov 23 at 0:32
How do you get toRegistrationFailure.jsin the first place? What happens when user makes a mistake during registration? Does it set some state variable? Do you clear that variable when user tries again? If you could explain the scenario a bit more with respect to the code or provide a working Expo snack, it would help us figure it out easily.
– Uzair A.
Nov 23 at 4:21
here is the link to the expo snack snack.expo.io/Bylb3cToQ
– dilas
Nov 23 at 6:24
Great that you provided your code but I don't think I really understand your question. Could you please elaborate more on "it just loop to error page but behind the scene there is an activity going on". What exactly do you mean with loop to the error page and what kind of activity are you mentioning??
– Y. Gherbi
Nov 22 at 23:31
Great that you provided your code but I don't think I really understand your question. Could you please elaborate more on "it just loop to error page but behind the scene there is an activity going on". What exactly do you mean with loop to the error page and what kind of activity are you mentioning??
– Y. Gherbi
Nov 22 at 23:31
when a user get to input a wrong data in a required field for the first time it hit the server and them pop up the error page. The problem i am faced with is when the user tap on retry, and go through the processes he/she ran through initicially it pop the error message page before it send a response from the server.
– dilas
Nov 23 at 0:32
when a user get to input a wrong data in a required field for the first time it hit the server and them pop up the error page. The problem i am faced with is when the user tap on retry, and go through the processes he/she ran through initicially it pop the error message page before it send a response from the server.
– dilas
Nov 23 at 0:32
How do you get to
RegistrationFailure.js in the first place? What happens when user makes a mistake during registration? Does it set some state variable? Do you clear that variable when user tries again? If you could explain the scenario a bit more with respect to the code or provide a working Expo snack, it would help us figure it out easily.– Uzair A.
Nov 23 at 4:21
How do you get to
RegistrationFailure.js in the first place? What happens when user makes a mistake during registration? Does it set some state variable? Do you clear that variable when user tries again? If you could explain the scenario a bit more with respect to the code or provide a working Expo snack, it would help us figure it out easily.– Uzair A.
Nov 23 at 4:21
here is the link to the expo snack snack.expo.io/Bylb3cToQ
– dilas
Nov 23 at 6:24
here is the link to the expo snack snack.expo.io/Bylb3cToQ
– dilas
Nov 23 at 6:24
add a comment |
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53438646%2fi-have-been-getting-loop-on-my-error-page-when-i-click-retry%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53438646%2fi-have-been-getting-loop-on-my-error-page-when-i-click-retry%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Great that you provided your code but I don't think I really understand your question. Could you please elaborate more on "it just loop to error page but behind the scene there is an activity going on". What exactly do you mean with loop to the error page and what kind of activity are you mentioning??
– Y. Gherbi
Nov 22 at 23:31
when a user get to input a wrong data in a required field for the first time it hit the server and them pop up the error page. The problem i am faced with is when the user tap on retry, and go through the processes he/she ran through initicially it pop the error message page before it send a response from the server.
– dilas
Nov 23 at 0:32
How do you get to
RegistrationFailure.jsin the first place? What happens when user makes a mistake during registration? Does it set some state variable? Do you clear that variable when user tries again? If you could explain the scenario a bit more with respect to the code or provide a working Expo snack, it would help us figure it out easily.– Uzair A.
Nov 23 at 4:21
here is the link to the expo snack snack.expo.io/Bylb3cToQ
– dilas
Nov 23 at 6:24