App.js

import { Suspense, useEffect, useState } from "react";
import { Helmet } from "react-helmet";
import {
  BrowserRouter as Router,
  Link,
  Route,
  Switch,
  useLocation,
} from "react-router-dom";
import { ReactKeycloakProvider as KeycloakProvider } from "@react-keycloak/web";
import { ExtraErrorData } from "@sentry/integrations/dist/extraerrordata";
import * as Sentry from "@sentry/react";
import { Integrations } from "@sentry/tracing";
import classNames from "classnames";

import MobileNav from "components/MobileNav";
import { basics } from "config";

import VNav from "./components/VNav";
import Accommodation from "./pages/Accommodation";
import Home from "./pages/Home";
import Map from "./pages/Map";
import Registration from "./pages/Registration";
import Team from "./pages/Team";
import Volunteers from "./pages/Volunteers";
import keycloak from "./keycloak";
import partyLogo from "./logo-full-black.svg";

import "./styles.css";

/**
 * If configured, set up Sentry client that reports uncaught errors down to
 * https://sentry.io.
 */
if (process.env.REACT_APP_SENTRY_DSN) {
  Sentry.init({
    dsn: process.env.REACT_APP_SENTRY_DSN,
    tracesSampleRate: 0.1,
    integrations: [new ExtraErrorData(), new Integrations.BrowserTracing()],
  });
}

function AppHeaderVenueInfo() {
  const location = useLocation();
  const isRoot = location.pathname === "/";
  const [mobileNavOpen, setMobnileNavOpen] = useState(false);

  // Close menu on navigation
  useEffect(() => {
    setMobnileNavOpen(false);
  }, [location]);

  return (
    <>
      <MobileNav
        isOpen={mobileNavOpen}
        onClose={() => setMobnileNavOpen(false)}
      />
      {/* Mobile nav trigger */}
      <div
        className={classNames({ "block md:hidden": !isRoot, hidden: isRoot })}
      >
        <button
          className="head-alt-base"
          onClick={() => setMobnileNavOpen(true)}
        >
          Menu
        </button>
      </div>
      <div
        className={classNames("md:text-right ml-auto head-alt-base", {
          "hidden md:block": !isRoot,
        })}
      >
        <h2>{process.env.REACT_APP_CF_EVENT_DATE}</h2>
        <h2>{process.env.REACT_APP_CF_EVENT_CITY}</h2>
        <h2>{process.env.REACT_APP_CF_EVENT_VENUE}</h2>
      </div>
    </>
  );
}

function PageBody() {
  const location = useLocation();
  const isRoot = location.pathname === "/";

  return (
    <div
      className={classNames({
        "flex flex-col md:flex-row md:space-x-8": !isRoot,
      })}
    >
      <Switch>
        <Route path="/registrace">
          <Registration />
        </Route>
        <Route path="/organizatori">
          <Team />
        </Route>
        <Route path="/ubytovani">
          <Accommodation />
        </Route>
        <Route path="/mapa">
          <Map />
        </Route>
        <Route path="/pro-dobrovolniky">
          <Volunteers />
        </Route>
        <Route path="/">
          <Home />
        </Route>
      </Switch>

      {!isRoot && (
        <VNav className="hidden md:block mt-8 md:mt-0 md:w-1/4 p-4 md:p-8" />
      )}
    </div>
  );
}

function BaseApp() {
  const year = new Date().getFullYear();

  return (
    <Router>
      <Helmet>
        <title>{basics.appTitle} | Pirátská strana</title>
        <meta name="description" content={basics.appDesc} />
      </Helmet>

      <div className="container container--default my-4 md:my-16 space-y-8 md:space-y-16">
        <header className="md:flex items-center text-center md:text-left">
          <h1 className="head-alt-xl cf-app-title">
            <Link to="/" className="no-underline hover:no-underline">
              {basics.appTitle}
            </Link>
          </h1>
          <AppHeaderVenueInfo />
        </header>

        <PageBody />

        <footer className="border-t border-grey-125 pt-4 flex flex-col md:flex-row items-center md:justify-between space-y-4  text-center md:text-left">
          <img src={partyLogo} className="w-32" alt="Pirátská strana" />
          <p>Piráti, {year}. Všechna práva vyhlazena.</p>
        </footer>
      </div>
    </Router>
  );
}

const LoadingComponent = (
  <div className="h-screen w-screen flex justify-center items-center">
    <div className="text-center">
      <div className="flex flex-col md:flex-row items-center space-x-4 text-center mb-2">
        <h1 className="head-alt-md md:head-alt-lg">{basics.appTitle}</h1>
      </div>
      <p className="text-center head-xs">Načítám aplikaci ...</p>
    </div>
  </div>
);

const AuthenticatedApp = () => {
  const keycloakInitConfig = {
    onLoad: "check-sso",
    // Necessary to prevent Keycloak cookie issues:
    // @see: https://stackoverflow.com/a/63588334/303184
    checkLoginIframe: false,
  };

  const onKeycloakEvent = async (event) => {
    if (["onAuthRefreshSuccess", "onAuthSuccess"].includes(event)) {
      Sentry.setUser(keycloak.tokenParsed);
    }
  };

  return (
    <>
      <KeycloakProvider
        authClient={keycloak}
        initOptions={keycloakInitConfig}
        LoadingComponent={LoadingComponent}
        onEvent={onKeycloakEvent}
      >
        <Suspense fallback={LoadingComponent}>
          <BaseApp />
        </Suspense>
      </KeycloakProvider>
    </>
  );
};

const ErrorBoundaryFallback = ({ error }) => {
  return (
    <div className="h-screen w-screen flex justify-center items-center">
      <div className="text-center">
        <h1 className="head-alt-xl text-red-600 mb-4">
          V aplikaci došlo k chybě :(
        </h1>
        <p className="text-lg leading-normal">
          Naši vývojáři o tom již byli informování a opraví to co nejdříve.
          <br />
          Omlouváme se za tuto nepříjemnost.
        </p>
        <a href="/" className="btn mt-8">
          <div className="btn__body">Načíst znovu</div>
        </a>
      </div>
    </div>
  );
};

const App = Sentry.withProfiler(() => {
  return (
    <Sentry.ErrorBoundary fallback={ErrorBoundaryFallback} showDialog>
      <AuthenticatedApp />
    </Sentry.ErrorBoundary>
  );
});
export default App;