import React from 'react'
import {
  BrowserRouter,
  Route,
  Routes
} from 'react-router-dom';
import { Provider } from 'react-redux';
import { MuiThemeProvider } from '@material-ui/core/styles';
import theme from './style/theme';
import store from './redux/store';
import IndexContainer from './views/Index';
import ServicesList from "./views/ServicesList";
import SpaceList from './views/SpaceList';
import UrlListView from './views/UrlListView';
import layout from './layout';


const App = () => (
  <MuiThemeProvider theme={theme}>
    <Provider store={store}>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={layout(<IndexContainer />)()} />
          <Route path="/list" element={layout(<SpaceList />)()} />
          <Route path="/services" element={layout(<ServicesList />)()} />
          <Route path="/urls" element={layout(<UrlListView />)()} />
        </Routes>
      </BrowserRouter>
    </Provider>
  </MuiThemeProvider>
);

export default App;