/* -------------------------------------------------------------------------- */
/*                                  Libraries                                 */
/* -------------------------------------------------------------------------- */
import React, { useEffect } from "react";
import { BrowserRouter as Router } from "react-router-dom";
import { Provider } from "react-redux";
/* -------------------------------------------------------------------------- */
/*                                    Parts                                   */
/* -------------------------------------------------------------------------- */
import AppHotKeys from "ui/views/HotKeys";
import AppLoader from "components/parts/Loader";
import GlobalSearchbar from "ui/views/GlobalSearch";
/* -------------------------------------------------------------------------- */
/*                                    Misc                                    */
/* -------------------------------------------------------------------------- */
import { store } from "store/store";
import routes from "routes";
import RoutesRenderer from "components/RoutesRenderer";
import NotificationsField from "ui/views/NotificationsField";

/* -------------------------------------------------------------------------- */
/*                         Application root component                         */
/* -------------------------------------------------------------------------- */
/**
 * Application root component
 * @return {JSX.Element}
 */
function App() {
  return (
    <Provider store={store}>
      <AppHotKeys>
        <React.Suspense fallback={<AppLoader />}>
          <Router>
            <RoutesRenderer routes={routes} />
          </Router>
          <GlobalSearchbar />
          <NotificationsField />
        </React.Suspense>
      </AppHotKeys>
    </Provider>
  );
}

export default App;