import ReactDOM from 'react-dom'
import {
  BrowserRouter as Router,
  Switch,
  Redirect,
  Route,
  Link
} from 'react-router-dom'

import { CssBaseline } from '@material-ui/core';

import Login from './pages/login'


const Secure = ({children}) => {
  const token = localStorage.getItem('token')

  if (!token) {
    return <Redirect to="/login" />
  }

  return children
}

const Home = () => {
  return <h1>Home</h1>
}

const App = () => {
  return (
    <Router>
      <CssBaseline />
      <Switch>
        <Route path="/login">
          <Login />
        </Route>

        <Route path="/">
          <Secure>
            <Home />
          </Secure>
        </Route>
      </Switch>
    </Router>
  )
}

ReactDOM.render(<App />, document.getElementById('app'))