change current step

[hanaechahid]

Hi, I call an axios request in the first step when I click next button and then the request returns a success response I change the errors props to false to pass to the next step but didn't work I need to click on it many times then it passes to the next.

How can I fix that?
thank you

[colbymillerdev]

@hanaechahid Can you post the code when you get a chance so we can try to determine where the issue is occurring?

[hanaechahid]

Hi @colbymillerdev , here is some code:

// identity step
    identityStep = () => {
        let regExp = /^(?=.*\d)(?=.*[A-Z])(?!.*[^a-zA-Z0-9@#$^+=])(.{4,15})$/;
        while(!regExp.test(this.state.password)) {
            this.generatePassword();
        }
        this.addNewUser();
    }
// method to add new user
    addNewUser = () => {
        const {first_name, last_name, username, password, password_verify, email, companyId, roles} = this.state;
        this.data = {
            mail: email,
            firstName: first_name,
            lastName: last_name,
            username: username,
            password: password,
            checkPassword: password_verify,
            organization: companyId.toString(),
            roles: roles
        }
        this.errors = new Array();
        this.props.addNewUser(
            this.data,
            result => {
                this.userCreated = result;
                this.setState({
                    errors: false,
                    showMailError: false,
                    showUserNameError: false,
                    showFirstNameError: false,
                    showLastNameError: false,
                });
                console.log(this.userCreated)
            },
            error => {
                this.errors.push(error);
                delete this.errors[0].organization;
                this.setState({modalVisible: true})
                if(error.hasOwnProperty("mail")) this.setState({emailError: error.mail, showMailError: true, errors: true})
                if(error.hasOwnProperty("username")) this.setState({userNameError: error.username, showUserNameError: true, errors: true})
                if(error.hasOwnProperty("firstName")) this.setState({firstNameError: error.firstName, showFirstNameError: true, errors: true})
                if(error.hasOwnProperty("lastName")) this.setState({lastNameError: error.lastName, showLastNameError: true, errors: true})
                if(Object.keys(error).length === 0 ) {
                    this.setState({
                        errors: false,
                        activeStep: this.state.activeStep + 1,
                        modalVisible: false
                    })
                }
            }
        );
    }

    //professional step 
    professionalStep = () => {
        this.data["organization"] = this.state.companyId.toString();
        /**
         * here we fetch the workspaces to get selected profiles for each workspace
         * then we add those profiles to our data object to send them to the server
         */
        this.state.workspaces.map(workspace => {
            this.items.forEach(item => {
                const profiles = _.find(item, ['id', workspace.id]);
                if(profiles) {
                    this.data ['profiles_' + workspace.id ] = profiles.selected;
                }
                return;
            })
            return this.data;
        });
        this.props.addNewUser(
            this.data,
            result => {
                this.userCreated = result;
                this.setState({
                    errors: false,
                    professionalerrors: false,
                    showMailError: false,
                    showUserNameError: false,
                    showFirstNameError: false,
                    showLastNameError: false,
                });
            },
            error => {
                this.errors.push(error);
                if(error.hasOwnProperty("organization")) {
                    this.setState({
                        professionalerrors: true,
                        organizationError: error.organization,
                        showOrganizationError: true,
                        modalVisible: true
                    })
                }
            }
        );
    }
<View`  style={{flex: 1, backgroundColor: "#FFFFFF"}}>
                        <ProgressSteps
                            ref={ref => { this.progressSteps = ref }}
                            activeStep={this.state.activeStep}>
                            <ProgressStep label="identity"
                                nextBtnStyle={styles.nextBtn} nextBtnTextStyle={styles.btnText}
                                scrollViewProps={this.defaultScrollViewProps}
                                errors={this.state.errors}
                                onNext={() => this.identityStep()}>
                                <View style={{ alignItems: 'center', height: Metrics.HEIGHT * 0.5 }}>
                                    <ScrollView >
                                        <PersonelInfos handleChange={this.handleChange}
                                            email={this.state.email} first_name={this.state.first_name}
                                            last_name={this.state.last_name} username={this.state.username} 
                                            showFirstNameError={this.state.showFirstNameError} 
                                            showLastNameError={this.state.showLastNameError}
                                            showUserNameError={this.state.showUserNameError} showMailError= 
                                            {this.state.showMailError}
                                        />
                                    </ScrollView>
                                </View>
                            </ProgressStep>
                            <ProgressStep label="professional"
                                nextBtnStyle={styles.nextBtn} nextBtnTextStyle={styles.btnText}
                                previousBtnStyle={styles.previousBtn} previousBtnTextStyle={styles.btnText}
                                scrollViewProps={this.defaultScrollViewProps}
                                errors={this.state.professionalerrors}
                                onNext={() => this.professionalStep()}>
                                <View style={{ alignItems: 'center', height: Metrics.HEIGHT * 0.5 }}>
                                    <View style={styles.bodyform}>
                                        <MyComponent />
                                        </View>
                                </View>
                            </ProgressStep>
                            <ProgressStep label="picture"
                                nextBtnStyle={styles.nextBtn} nextBtnTextStyle={styles.btnText}
                                previousBtnStyle={styles.previousBtn} previousBtnTextStyle={styles.btnText}
                                scrollViewProps={this.defaultScrollViewProps}>
                                <View>
                                            <TouchableOpacity
                                            onPress={async () => {
                                                await this.props.navigation.navigate("Camera", {
                                                    navigation: this.props.navigation,
                                                    type: "user",
                                                    userId: this.userCreated.id,
                                                });
                                            }}
                                            >
                                            <FontAwesome
                                                name={"camera"}
                                                style={{
                                                color: "#2CB4FA",
                                                fontSize: Fonts.moderateScale(30),
                                                marginRight: 5
                                                }}
                                            />
                                            </TouchableOpacity>
                                        </View>
                                </View>
                            </ProgressStep>
                        </ProgressSteps>
                </View>

thanks,

[hanaechahid]

@colbymillerdev could you tell me what is wrong with me ?!!!!!!!!!!

[colbymillerdev]

@hanaechahid Couple questions to help give me more context..

1. Is this.props.addNewUser() an asynchronous function?

2. Is the errors state defaulted to false? The onNext() function won't change to the next step if errors = { true }

[hanaechahid]

this is the add new user function:

export const addNewUser = (data, cb, cError) => {
  return async (dispatch, getState) => {
    let tokenAccess = getState()["getCurrentUserToken"][0].access_token;
    // Generated Bearer token
    let genratedToken = "Bearer " + tokenAccess;
    let header = {
      headers: {
        Authorization: genratedToken
      }
    };
    let HOST = await AsyncStorage.getItem("@domainname");
    let url = HOST + API.ADD_NEW_USER;
    axiosInstance
      .post(url, data, header)
      .then(response => {
        const result = response.data;
        if (response.status === 201) {
          dispatch({
            type: ADD_NEW_USER,
            payload: result
          });
          cb(result);
        }
      })
      .catch( error => {
        if(error.response.status === 400 ) {
          if(error.response.data.code === 400) {
            let response_errors = error.response.data.errors;
            cError(response_errors);
          }
        }
        if(error.response.status === 500 ) {
          alert("Server Error");
        }
      })
  };
}

2. errors state initialized as true

[SPineapple]

Hello, I am having the same issue, like in a confirmation form, it will not let me pass the next step even if i set the errors to False :

onNextStep= () => {
    if (list.length != 0) {
      set_errors(true); // stay on the same page
      Alert.alert(
        "Confirmation",
        "Are you sure you got all the books you want?",
        [
          {
            text: "Cancel",
            onPress: () => set_errors(true),
            style: "cancel"
          },
          {
            text: "Yes",
            onPress: () => {
             set_errors(false); // must move on to the next page, but it doesn't
            }
          }
        ],
        { cancelable: false }
      );
    } else {
      return set_errors(false);
    }
  };

Help is appreciated, thanks!

[chenyaw0728]

@hanaechahid

I try to set a loading , can be able to solve this issues. maybe you can try it also.

_updateStep(){
this.setState({ loading:false, current_step : this.state.current_step })
}
render(
if(this.state.loading) return null;

return (
   <ProgressSteps activeStep={this.state.current_step}>
      <ProgressStep     
         onNext={()=>this.setState({loading:true},()=>this._updateStep(data))}
         >
         <View/>
     </ProgressStep>
  </ProgressSteps>
 )

)

[hanaechahid]

@chenyaw0728 thank you, but didn't work for me