import React, { Component, Fragment } from 'react';
import { hot } from 'react-hot-loader';
import { HashRouter } from 'react-router-dom'; // ou BrowserRouter
import { Route, Switch, Redirect } from 'react-router';
import { ConnectedLoginPage as LoginPage } from './pages/login';
import DashBoardClient from './pages/DashBoardClient';
import DashBoardDev from './pages/DashBoardDev';
import { ConnectedLogoutPage as LogoutPage } from './pages/logout';
import { connect } from 'react-redux';
import { history } from './util/history';

const LazyHomePage = React.lazy(() => import('./pages/home.lazy'));

export class App extends Component {
    render () {
        return (
            <Fragment>
                <React.Suspense fallback={<div>Chargement en cours...</div>}>
                    <HashRouter history={history}>
                        <Switch>
                            <Route path='/login' exact component={LoginPage} />
                            <Route path='/logout' exact component={LogoutPage} />
                            <Route path='/home' exact component={LazyHomePage} />
                            <Route path='/dashboard-client' exact component={DashBoardClient} />
                            <Route path='/dashboard-dev' exact component={DashBoardDev} />
                            <Route component={() => <Redirect to="/home" />} />
                        </Switch>
                    </HashRouter>
                </React.Suspense>
            </Fragment>
        );
    }
}

export const ConnectedApp = connect()(App);
export const HotApp = hot(module)(ConnectedApp);