import React, { useEffect } from 'react'
import { BrowserRouter, Route, Redirect, Switch, Link } from 'react-router-dom'
import { ChakraProvider } from '@chakra-ui/react'
import Index from './components/Index'
import SignIn from './components/SignIn'
import SignUp from './components/SignUp'
import DockerContainerCreate from './components/DockerContainerCreate'
import DockerContainerList from './components/DockerContainerList'
import 'semantic-ui-css/semantic.min.css'

const App = () => {
  return (
    <ChakraProvider>
      <BrowserRouter>
        <Switch>
          <Route exact path="/" component={Index}/>
          <Route exact path="/sign-in" component={SignIn}/>
          <Route exact path="/sign-up" component={SignUp}/>
          <Route exact path="/docker/container/create" component={DockerContainerCreate}/>
          <Route exact path="/docker/container/list" component={DockerContainerList}/>
          <Redirect path="*" to="/"/>
        </Switch>
      </BrowserRouter>
    </ChakraProvider>
  )
}

export default App