22

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { withRouter, Route, Switch, Redirect } from 'react-router-dom';

import Main from 'containers/Main'
import Onboarding from 'containers/Onboarding'
import Login from 'containers/Login'

class App extends Component {
    render() {
        const { auth, password } = this.props;
        return (
            <div>
                {auth ?
                    <Switch>
                        <PrivateRoute path="/app/main" component={Main} password={password}/>
                        <Route path='/app/login' component={Login} />
                        <Redirect to='/app/main' />
                    </Switch>
                    :
                    <Switch>
                        <Route path="/app/onboarding" component={Onboarding} />
                        <Redirect to='/app/onboarding/hello' />
                    </Switch>
                }
            </div>
        )
    }
}

const PrivateRoute = ({component: Component, password, ...rest}) => (
    <Route {...rest} render={(props) => (
        password !== ''
        ? <Component {...props} />
        : <Redirect to='/app/login' />
    )} />
)


export default withRouter(connect(
    state => ({
        auth: state.user.isUserAuthenticated,
        password: state.user.password
    })
)(App));