Opravy drobných chyb hlášených Reactem + úpravy kvůli novým verzím balíčků

src/App.js

@@ -5,13 +5,13 @@ import {
   BrowserRouter as Router,
   Link,
   Route,
-  Switch,
+  Routes,
   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 { browserTracingIntegration } from "@sentry/browser"
+import { extraErrorDataIntegration } from "@sentry/integrations";
 import classNames from "classnames";
 
 import MobileNav from "components/MobileNav";
@@ -48,7 +48,7 @@ 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()],
+    integrations: [extraErrorDataIntegration(), new browserTracingIntegration()],
   });
 }
 
@@ -103,56 +103,24 @@ function PageBody() {
         "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>
+      <Routes>
+        <Route path="/registrace" element={<Registration />} />
+        <Route path="/stravovani" element={<Catering />} />
+        <Route path="/organizatori" element={<Team />} />
+        <Route path="/ubytovani" element={<Accommodation />} />
+        <Route path="/mapa" element={<Map />} />
+        <Route path="/program" element={<Program />} />
+        <Route path="/doprava" element={<Transportation />} />
+        <Route path="/pro-dobrovolniky" element={<Volunteers />} />
+        <Route path="/party" element={<Party />} />
+        <Route path="/volba-predsednictva" element={<LeaderElection />} />
+        <Route path="/workshopy" element={<Workshops />} />
+        <Route path="/zasedani" element={<Meeting />} />
+        <Route path="/hendikepovani" element={<Disabled />} />
+        <Route path="/deti-a-zabava" element={<KidsnFun />} />
+        <Route path="/platba/:id" element={<Payment />} />
+        <Route path="/" element={<Home />} />
+      </Routes>
 
       {!isRoot && (
         <VNav className="hidden md:block mt-8 md:mt-0 md:w-1/4 p-4 md:p-8" />

src/components/VNav.js

@@ -21,8 +21,7 @@ const VNav = ({ className, ...props }) => {
             <li key={navItem.link}>
               <NavLink
                 to={navItem.link}
-                className="vertical-navbar__item"
-                activeClassName="vertical-navbar__item--active px-4 md:px-8 -mx-4 md:-mx-8"
+                className={({ isActive }) => (isActive ? "vertical-navbar__item--active px-4 md:px-8 -mx-4 md:-mx-8" : "vertical-navbar__item")}
               >
                 {navItem.title}
               </NavLink>

src/components/VenueCard.js

@@ -4,7 +4,6 @@ import classNames from "classnames";
 
 import { Card, CardBody, CardBodyText } from "./cards";
 
-
 const VenueCard = ({
   children,
   title,
@@ -72,8 +71,8 @@ const VenueCard = ({
         <p className="text-sm">
           {street}<br />
           {city}<br />
-        <i class="ico--map"></i>&nbsp;{gps}<br/>
-        <i class="ico--link"></i>&nbsp;<a href={href} target="_blank" rel="noreferrer noopener">{hhref}</a>
+          <i className="ico--map"></i>&nbsp;{gps}<br />
+          <i className="ico--link"></i>&nbsp;<a href={href} target="_blank" rel="noreferrer noopener">{hhref}</a>
         </p>
         {children}
       </CardBody>

src/gingerbread.svg

 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 84 116" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+<svg width="100%" height="100%" viewBox="0 0 84 116" version="1.1" xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
     <g transform="matrix(1,0,0,1,-116.284,-164.832)">
         <g transform="matrix(0.1,0,0,-0.1,0,785)">
             <g transform="matrix(0.410945,-2.54324e-18,-2.54324e-18,0.390178,228.828,3353.9)">

src/index.js

 import React from "react";
-import ReactDOM from "react-dom";
+//import ReactDOM from "react-dom";
+import ReactDOM from "react-dom/client";
 
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 
-ReactDOM.render(
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById("root")
+  </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function

src/keycloak.js

@@ -2,7 +2,7 @@ import Keycloak from "keycloak-js";
 
 // Setup Keycloak instance as needed
 // Pass initialization options as required or leave blank to load from 'keycloak.json'
-const keycloak = Keycloak({
+const keycloak = new Keycloak({
   url: "https://auth.pirati.cz/auth",
   realm: "pirati",
   clientId: "cf2022",

src/pages/Home.js

 import Button from "components/Button";
-import CrossroadCard from "components/CrossroadCard";
-import VenueCard from "components/VenueCard";
-import { nav } from "config";
-import { venues } from "config";
 
 import cfLogo from "../cf2023_kormidlo_lod.svg";
 
@@ -16,7 +12,6 @@ const Home = () => {
   return (
     <article className="space-y-8 md:space-y-16">
 
-
       <div className="content-block">
         <p className="text-md lg:text-lg">
           <strong>Zasedání CF se bude konat v prostorách Masarykovy koleje v&nbsp;Praze v termínu 9.&nbsp;listopadu 2024 od 9 do 18 hodin.</strong><br /><br />
@@ -24,7 +19,6 @@ const Home = () => {
         </p>
       </div>
 
-
       {/*
       <div className="grid md:grid-cols-3 gap-4 md:gap-8 content-block">
         {venues.map((venueItem) => (
@@ -75,7 +69,6 @@ const Home = () => {
       </div>
 */}
 
-
       <div className="relative card elevation-10 flex flex-col lg:flex-row lg:items-center my-8 xl:-mx-16 container-padding--zero md:container-padding--auto overflow-hidden">
         <div
           className="cf-hero"

src/pages/KidsnFun.js

 
-import Button from "components/Button";
 import { Helmet } from "react-helmet";
 
 import PageTitle from "components/PageTitle";

src/pages/LeaderElection.js

@@ -30,7 +30,7 @@ const LeaderElection = () => {
             <h2 className="head-heavy-sm mb-4">{postClass.postTitle}</h2>
             <div className="grid grid-cols-1 lg:grid-cols-2 row-gap-8 col-gap-8">
               {postClass.candidates.map((candidate) => (
-                <div className="content-block">
+                <div className="content-block" key={candidate.name}>
                   {/*
                   <div className="avatar badge__avatar avatar--md">
                     <img src={"/medailonky/" + candidate.img} alt={candidate.name} />

src/pages/Map.js

@@ -14,7 +14,6 @@ import { accommodation, basics, map } from "config";
 import VenueCard from "components/VenueCard";
 import { venues } from "config";
 
-
 const Map = () => {
   const markerGroups = {
     basics: {
@@ -70,8 +69,6 @@ const Map = () => {
         <meta property="og:title" content="Mapa" />
       </Helmet>
 
-      {}
-
       <div className="container-padding--zero md:container-padding--auto">
         <MapContainer
           center={[map.center.lat, map.center.lon]}
@@ -115,10 +112,10 @@ const Map = () => {
             gps={venueItem.gps}
             href={venueItem.href}
             title_short={venueItem.title_short}
+            key={venueItem.title_short}
           />
         ))}
       </div>
-
     </article>
   );
 };

src/pages/Meeting.js

@@ -10,7 +10,6 @@ import { venues } from "config";
 import prvni_patro from "../sono_e.jpg";
 import druhe_patro from "../sono_i.jpg";
 
-
 const Meeting = () => {
   const venueItem = venues[1];
   return (
@@ -74,7 +73,6 @@ const Meeting = () => {
       {/*
 */}
 
-
       <div className="content-block p-2">
       </div>
 

src/pages/Party.js

@@ -142,7 +142,7 @@ const Party = () => {
 
         <table>
           <thead>
-            <td colspan="2">
+            <td colSpan="2">
             Program / Line-up
             </td>
           </thead>