I have a component <Navbar />at the top of the rendering in my component <App />, and in Navbar, a link to some login page that the router is processing. How can I raise the state from changes made in Login.js, if I can not pass it, it supports the traditional way, as in <Login loginHandler={this.loginHandler} />?
Someone told me that I have to abstract the functions of a single module and share it between both components, but I react too much to a newbie, and I need some kind of example.
thank
Here is the repo: https://github.com/charlesdarkwind/vitae-eternam
Components Added:
basically the login methods are authHandler and authentication, for now it just sets the state for the user id (uid) that I want to be global
App.js:
import React from 'react';
import NavbarTop from './NavbarTop';
class App extends React.Component {
constructor() {
super();
this.authenticate = this.authenticate.bind(this);
this.authHandler = this.authHandler.bind(this);
}
state = {
items: {},
order: {},
uid: null
};
render() {
return (
<div>
<NavbarTop />
</div>
);
}
}
export default App;
Login.js:
import React from 'react';
import { Button } from 'react-bootstrap';
import base from '../base';
import NavbarTop from './NavbarTop';
class Login extends React.Component {
componentDidMount() {
base.onAuth((user) => {
if(user) {
this.authHandler(null, { user });
}
});
}
authenticate(provider) {
console.log(`Tentative de connexion avec ${provider}`);
base.authWithOAuthPopup(provider, this.authHandler);
}
authHandler(err, authData) {
console.log(err, authData);
if(err) {
console.error(err);
return;
}
const orderRef = base.database().ref(this.props.uid);
orderRef.once('value', (snapshot) => {
const data = snapshot.val() || {};
this.setState({
uid: authData.user.uid
});
});
}
render() {
return (
<div>
<NavbarTop />
<div className="loginWrap">
<nav className="login">
<p>Connexion</p>
<Button bsStyle="primary" className="facebook" onClick={() => this.props.authenticate('facebook')}>Connexion avec FaceBook</Button>
<Button bsStyle="danger" className="google" onClick={() => this.props.authenticate('google')}>Connexion avec Google</Button>
</nav>
</div>
</div>
)
}
}
export default Login;
source
share