Call function after history.push() redirects

Viewed 705

I have a function that checks if a user is logged in on componentDidMount and changes the log in button to log out if there is a session.

Problem:

I tried using ComponentdidUpdate but since the component is already mounted and i was not able to update the state, it doesn't refresh, hence my log in button stays as a log in button.

componentDidMount() {
        Axios.get(config.ServerURL + "/user", {withCredentials: true}).then(result => {
            console.log("component mounted:",result.data)
            if (result.data) {
                this.setState({isLoggedIn: true});
            }
        }).catch(error => {
            console.log({message: error.response});
        })
    }

I have a button that changes based on the state: isLoggedIn:

<div className={"App-login-button"}>
                                {!this.state.isLoggedIn && <Link to={"/login"}>
                                    <AwesomeButton type="primary" title={"Login"}>Login</AwesomeButton>
                                </Link>}

                                {this.state.isLoggedIn && <Link to={"/logout"}>
                                    <AwesomeButton type="primary" title={"logout"} onPress={this.handleLogOut}>logout</AwesomeButton>
                                </Link>}

                            </div>

When I log in from my login component (eg: localhost:3000/login)

handleSubmit = (event) => {
        Axios.post(Config.ServerURL + '/auth/login',
            {email: this.state.email, password: this.state.password},
            {
                withCredentials: true

            }).then(result => {
            if (result.data.business) {
                this.props.history.push({pathname: '/business', state: {email: result.data.email}});
            }
            useHistory.push('/', );

        }).catch(error => {
            console.log(error);
            //console.log(error.response.data.info)
        });

    }

for user

exports.find = (req, res) => {
    res.send(req.user);
}

I would like to either:

change the state.isLoggedIn to true

or

run a get User check again.

1 Answers

I changed

useHistory.push('/');

back to

this.props.history.push('/');
this.props.history.go();

the go forces a refresh on the page, allowing the component to rerender. I don't mind the added computational issue, so this works for me.

Related