App.js

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 Purchase from './purchase/Purchase';
import ShowPurchase from './purchase/ShowPurchase';
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="/purchase/:id">
                    <ShowPurchase />
                </Route>
                <Route path="/purchase">
                    <Purchase />
                </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;