import React from 'react';
import { HashRouter as Router, Route, Redirect, Switch } from "react-router-dom";
import { ConnectedHomePage as HomePage } from './HomePage/HomePage';
import { ConnectedBoardPage as BoardPage } from './BoardPage/BoardPage';
import { ConnectedEditBoardPage as EditBoardPage } from './BoardPage/EditBoardPage';
import { store } from '../store/store';
import { Provider } from 'react-redux';
import { logout } from '../store/actions/logout';

export class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <Router>
          <Switch>
            <Route path="/" exact component={HomePage} />
            <Route path="/boards/new" exact component={EditBoardPage} />
            <Route path="/boards/:id" exact component={BoardPage} />
            <Route path="/boards/:id/edit" exact component={EditBoardPage} />
            <Route path="/logout" exact component={() => {
              this.logout();
              return <Redirect to="/" />;
            }} />
            <Route component={() => <Redirect to="/" />} />
          </Switch>
        </Router>
      </Provider>
    );
  }

  logout() {
    store.dispatch(logout());
  }
}