App.js

import React, { useEffect } from "react";
import './App.css';
import {
  Redirect,
  Route,
  BrowserRouter as Router,
  Switch,
} from 'react-router-dom';
import { ThemeProvider } from "@material-ui/core/styles"
import { CssBaseline } from "@material-ui/core";
import { theme } from "./style/Theme";
import { IOCListView } from './views/IOC/IOCListView';
import { HomeAccessControl } from './views/home/HomeAccessControl';
import { GlobalAppBar } from './components/navigation/GlobalAppBar/GlobalAppBar';
import { IOCDetailsAccessControl } from './views/IOC/IOCDetailsAccessControl';
import { DeploymentsAccessControl } from './views/deployments/DeploymentsAccessControl';
import { DeploymentDetailsAccessControl } from './views/deployments/DeploymentDetailsAccessControl';
import { APIProvider, UserProvider } from './api/SwaggerApi';
import { HostListView } from "./views/host/HostListView";
import { HostDetailsAccessControl } from "./views/host/HostDetailsAccessControl";
import { StatisticsView } from "./views/statistics/StatisticsView";
import { HelpView } from "./views/help/HelpView";
import { AboutView } from "./views/about/AboutView";
import { SnackbarProvider } from 'notistack';
import TokenRenew from './components/auth/TokenRenew';
import { NotificationProvider } from './components/common/notification/Notifications';
import NotFound from './components/navigation/NotFound';
import { applicationSubTitle } from './components/common/Helper';
import { AppErrorBoundary } from "./components/navigation/ErrorBoundary/ErrorBoundary";

//setting up the application (TAB)title
function App() {
  useEffect(() => {
    document.title = "CE deployment" + applicationSubTitle();
  }, []);

  return (
    <AppErrorBoundary>
      <SnackbarProvider preventDuplicate maxSnack="5">
        <ThemeProvider theme={theme}>
          <CssBaseline />
          <Router>
            <APIProvider >
              <UserProvider>
                <TokenRenew />
                <Switch>
                  <Route path="/"
                    render={({ match }) => {
                      console.log(match)
                      return (
                        <NotificationProvider>
                          <GlobalAppBar>
                            <Switch>
                              <Route exact path="/">
                                <Redirect to="/home" />
                              </Route>
                              <Route path="/home" component={HomeAccessControl} exact/>
                              <Route path="/iocs/:id([0-9]+)" component={IOCDetailsAccessControl} exact/>
                              <Route path="/iocs" component={IOCListView} exact/>
                              <Route path="/deployments/:id([0-9]+)" component={DeploymentDetailsAccessControl} exact/>
                              <Route path="/deployments" component={DeploymentsAccessControl} exact/>
                              <Route path="/hosts/:id([0-9]+)" component={HostDetailsAccessControl} exact/>
                              <Route path="/hosts" component={HostListView} exact/>
                              <Route path="/statistics" component={StatisticsView} exact/>
                              <Route path="/help" component={HelpView} exact/>
                              <Route path="/about" component={AboutView} exact/>
                              <Route>
                                <NotFound />
                              </Route>
                            </Switch>
                          </GlobalAppBar>
                        </NotificationProvider>
                      )
                    }
                    }
                  />
                  <Route>
                    <NotFound />
                  </Route>
                </Switch>
              </UserProvider>
            </APIProvider>
          </Router>
        </ThemeProvider>
      </SnackbarProvider>
    </AppErrorBoundary>
  );
}

export default App;