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.