App.jsx

import Button from "react-md/lib/Buttons/Button";
import UserButton from "./UserButton";
import Register from "./Register";
import React, {Component} from "react";
import {CloseButton, NavigationDrawer} from "react-md/lib/NavigationDrawers";
import NavLink from "./NavLink";
import Profile from "./Profile"
import {connect} from "react-redux";
import { Link as RouterLink, Route, Switch } from 'react-router-dom';
import Home from "./Home";

const navItems = [{
    exact: true,
    label: 'Home',
    to: '/home',
    icon: 'home',
    loggedIn: false,
}, {
    exact: true,
    label: 'Profile',
    to: '/profile',
    icon: 'account_circle',
    loggedIn: true,
// }, {
//     label: 'Page 2',
//     to: '/page-2',
//     icon: 'donut_large',
// }, {
//     label: 'Page 3',
//     to: '/page-3',
//     icon: 'flight_land',
}];

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            visible: true,
            position: 'left',
        };

        this._toggleLeft = this._toggleLeft.bind(this);
        this._toggleRight = this._toggleRight.bind(this);
        this._closeDrawer = this._closeDrawer.bind(this);
        this._handleToggle = this._handleToggle.bind(this);
    }


    // componentDidMount() {
    //     window.addEventListener("beforeunload", (ev) => {
    //         ev.preventDefault();
    //         if (!this.props.rememberMe) {
    //             logOut()
    //         }
    //         // return
    //     });
    //
    // }
    //
    // componentWillUnmount() {
    //     window.removeEventListener('onbeforeunload', this.handleWindowClose);
    // }

    _handleToggle(visible) {
        this.setState({visible});
    }

    _closeDrawer() {
        this.setState({visible: false});
    }

    _toggleLeft() {
        this.setState({visible: !this.state.visible, position: 'left'});
    }

    _toggleRight() {
        this.setState({visible: !this.state.visible, position: 'right'});
    }

    render() {
        const signUpButton = (
            <Button
                style={{marginLeft: 5, marginRight: 5}}
                raised
                primary
                label="Sign up"
                component={RouterLink}
                to="/user/register"
                // tooltipLabel="Close the interactive demo"
                // tooltipDelay={150}
                // tooltipPosition="left"
            />
        );
        const userButton = <UserButton/>;
        return (
            <Route
                render={
                    function ({location}) {
                        return (
                            <NavigationDrawer
                                mobileDrawerType={NavigationDrawer.DrawerTypes.TEMPORARY}
                                tabletDrawerType={NavigationDrawer.DrawerTypes.TEMPORARY}
                                desktopDrawerType={NavigationDrawer.DrawerTypes.TEMPORARY}
                                drawerTitle="Databrary"
                                // drawerHeader={<CloseButton/>}
                                toolbarActions={[signUpButton, userButton]}
                                toolbarTitle="Databrary"
                                toolbarThemeType="themed"
                                navItems={
                                    navItems.
                                        // filter(p => (this.props.loggedIn === p.loggedIn) || !p.loggedIn).
                                        map(props => <NavLink {...props} key={props.to}/>)
                                }
                            >
                                {/*<Switch key={location.key}>*/}
                                    <Route exact path="/home" location={location} component={Home}/>
                                    <Route exact path="/user/register" location={location} component={Register}/>
                                    <Route exact path="/profile" location={location} component={Profile}/>
                                {/*</Switch>*/}
                            </NavigationDrawer>
                        )
                    }.bind(this)
                }
            />
        );
    }
}

const mapStateToProps = (state) => {
    return {
        loggedIn: state.loggedIn,
    }
};

export default connect(
    mapStateToProps,
)(App);