import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import MemberList from './member';
import ProductList from './ProductList';
import Dashboard from './Dashboard';
import AuthContext from './AuthContext';
import SignIn from './SignIn';
import Head from './Head';
function Panel(props) {
return (
<div>
<Head onLogout={props.onLogout} />
<BrowserRouter>
<Switch>
<Route path="/members">
<MemberList />
</Route>
<Route path="/products">
<ProductList />
</Route>
<Route path="/">
<Dashboard />
</Route>
</Switch>
</BrowserRouter>
</div>
);
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoged: false,
num: null,
role: null,
token: null
};
this.logout = this.logout.bind(this);
this.login = this.login.bind(this);
}
componentDidMount() {
const token = localStorage.getItem("token");
if (token !== "") {
const num = localStorage.getItem("num");
const role = localStorage.getItem("role");
this.setState({ isLoged: true, num, role, token });
}
}
storeState(token, num, role) {
localStorage.setItem("token", token);
localStorage.setItem("num", num);
localStorage.setItem("role", role);
}
login(token, member) {
this.setState({
isLoged: true,
num: member.num,
role: member.role,
token: token
});
this.storeState(token, member.num, member.role);
}
logout() {
this.setState({
isLoged: false,
num: null,
role: null,
token: null
});
this.storeState("", "", "");
}
render() {
const component = this.state.isLoged ?
<Panel onLogout={this.logout} /> :
<SignIn onLogin={this.login} />;
return (
<AuthContext.Provider value={this.state}>
{component}
</AuthContext.Provider>
);
}
}
export default App;