import React from 'react'
import { QueryClient, QueryClientProvider } from 'react-query'
import { Route, Routes } from 'react-router-dom'
import './App.css'
import AddGroup from './views/coordinator/AddGroup'
import AddStudent from './views/coordinator/AddStudent'
import Coordinator from './views/coordinator/Coordinator'
import Groups from './views/coordinator/Groups'
import Leaders from './views/coordinator/Leaders'
import Students from './views/coordinator/Students'

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
    },
  },
})

function App() {
  return (
    <div>
      <QueryClientProvider client={queryClient}>
        <Routes>
          <Route index element={<Coordinator />} />
          <Route path="coordinator" element={<Coordinator />}>
            <Route path="groups" element={<Groups />} />
            <Route path="students" element={<Students />} />
            <Route path="leaders" element={<Leaders />} />
            <Route path="add-student" element={<AddStudent />} />
            <Route path="add-group" element={<AddGroup />} />
          </Route>
        </Routes>
      </QueryClientProvider>
    </div>
  )
}

export default App