Skip to content
Snippets Groups Projects
Select Git revision
  • 11328a11481c8dc8ed14ae221575e386b4b3553b
  • master default protected
  • 2024-11
  • oprava-babel
  • 2024-1
  • 2023
  • 2022
7 results

App.js

Blame
  • App.js 7.51 KiB
    import React, { Suspense, useEffect, useState } from "react";
    import { Helmet } from "react-helmet";
    import ReactHintFactory from "react-hint";
    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 Transportation from "pages/Transportation";
    
    import VNav from "./components/VNav";
    import Accommodation from "./pages/Accommodation";
    import Catering from "./pages/Catering";
    import Home from "./pages/Home";
    import LeaderElection from "./pages/LeaderElection";
    import Map from "./pages/Map";
    import Party from "./pages/Party";
    import Program from "./pages/Program";
    import Registration from "./pages/Registration";
    import Team from "./pages/Team";
    import Volunteers from "./pages/Volunteers";
    import Workshops from "./pages/Workshops";
    import Meeting from "./pages/Meeting";
    import Disabled from "./pages/Disabled";
    import KidsnFun from "./pages/KidsnFun";
    import Payment from "./pages/Payment";
    import cfLogo from "./cf2023_kormidlo_lod.svg";
    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()],
      });
    }
    
    const ReactHint = ReactHintFactory(React);
    
    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)}
          />
          <div className="flex justify-center space-x-4 md:space-x-0 md:block md:text-right md:ml-auto head-alt-xs md:head-alt-base">
            <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>
          {/* Mobile nav trigger */}
          <div
            className={classNames({
              "mt-4 block md:hidden": !isRoot,
              hidden: isRoot,
            })}
          >
            <button
              className="head-alt-base"
              onClick={() => setMobnileNavOpen(true)}
            >
              Menu
            </button>
          </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="/stravovani">
              <Catering />
            </Route>
            <Route path="/organizatori">
              <Team />
            </Route>
            <Route path="/ubytovani">
              <Accommodation />
            </Route>
            <Route path="/mapa">
              <Map />
            </Route>
            <Route path="/program">
              <Program />
            </Route>
            <Route path="/doprava">
              <Transportation />
            </Route>
            <Route path="/pro-dobrovolniky">
              <Volunteers />
            </Route>
            <Route path="/party">
              <Party />
            </Route>
            <Route path="/volba-predsednictva">
              <LeaderElection />
            </Route>
            <Route path="/workshopy">
              <Workshops />
            </Route>
            <Route path="/zasedani">
              <Meeting />
            </Route>
            <Route path="/hendikepovani">
              <Disabled />
            </Route>
            <Route path="/deti-a-zabava">
              <KidsnFun />
            </Route>
            <Route path="/platba/:id">
              <Payment />
            </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-lg md: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>
    
          <ReactHint
            autoPosition
            events
            attribute="data-tip"
            className="tooltip"
            onRenderContent={(target, content) => (
              <span className="block max-w-xs leading-tight">{content}</span>
            )}
          />
        </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">
            <img
              src={cfLogo}
              alt="CF 2023"
              className="hidden lg:block w-32 mr-16"
            />
          </div>
        </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;