feat: bump dependencies

package.json

@@ -22,15 +22,17 @@
   },
   "dependencies": {
     "@emotion/css": "^11.1.3",
+    "@emotion/styled": "^11.1.3",
+    "@emotion/react": "^11.1.3",
     "@mui/icons-material": "^5.0.0",
     "@mui/material": "^5.0.0",
     "immer": "^9.0.2",
     "lodash": "^4.17.21",
-    "netlify-cli": "^6.4.1",
+    "netlify-cli": "^8.4.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-helmet-async": "^1.0.9",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^6.2.1",
     "react-slick": "^0.28.1",
     "remarkable": "^2.0.1",
     "slick-carousel": "^1.8.1"
@@ -43,11 +45,11 @@
     "@types/react-router-dom": "^5.1.8",
     "@types/react-slick": "^0.23.4",
     "@types/remarkable": "^2.0.3",
-    "@typescript-eslint/eslint-plugin": "^4.30.0",
-    "@typescript-eslint/parser": "^4.30.0",
+    "@typescript-eslint/eslint-plugin": "^5.8.0",
+    "@typescript-eslint/parser": "^5.8.0",
     "@vitejs/plugin-legacy": "^1.5.1",
     "@vitejs/plugin-react": "^1.1.1",
-    "eslint": "^7.27.0",
+    "eslint": "^8.5.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-react": "^7.23.2",
     "eslint-plugin-react-hooks": "^4.2.0",

src/components/Document/Document.tsx

@@ -22,13 +22,13 @@ import Typography from "@mui/material/Typography";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import React, { useEffect, useState } from "react";
 import { Helmet } from "react-helmet-async";
-import { useHistory, useLocation } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import { Delays } from "../../constants/delays";
 import { track } from "../../domains/analytics/track";
 import {
   IChapter,
   ISearchIndex,
-  ISidebarItem,
+  ISidebarItem
 } from "../../domains/documents/DocumentParser";
 import { MarkdownContent } from "../MarkdownContent/MarkdownContent";
 import { ReactRouterLink } from "../ReactRouterLink/ReactRouterLink";
@@ -44,7 +44,7 @@ export function Document(props: {
   renderFooter?(): React.ReactNode;
 }) {
   const theme = useTheme();
-  const history = useHistory();
+  const navigate = useNavigate();
   const location = useLocation();
 
   const [autocompleteOpen, setAutocompleteOpen] = useState(false);
@@ -401,7 +401,7 @@ export function Document(props: {
             const path = (newValue as ISearchIndex).path;
             if (path) {
               setAutocompleteOpen(false);
-              history.push(props.makeChapterLink(path));
+              navigate(props.makeChapterLink(path));
               setMobileTocMenuOpen(false);
               track("search", {
                 search_term: search,
@@ -423,7 +423,7 @@ export function Document(props: {
                 {...renderProps}
                 onClick={() => {
                   setAutocompleteOpen(false);
-                  history.push(props.makeChapterLink(index.path));
+                  navigate(props.makeChapterLink(index.path));
                   setMobileTocMenuOpen(false);
                   track("search", {
                     search_term: search,

src/index.tsx

@@ -7,7 +7,7 @@ import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles";
 import React, { Suspense, useContext } from "react";
 import ReactDom from "react-dom";
 import { HelmetProvider } from "react-helmet-async";
-import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import { ErrorBoundary } from "./components/ErrorBoundary/ErrorBoundary";
 import ScrollToTop from "./components/ScrollToTop/ScrollToTop";
 import { SettingsContext, useSettings } from "./contexts/SettingsContext";
@@ -37,8 +37,27 @@ function AppProviders(props: { children: any }) {
   );
 }
 
+function LazyPage(props: { children: React.ReactNode }) {
+  return (
+    <Suspense
+      fallback={
+        <Fade in>
+          <Container maxWidth="md">
+            <Box display="flex" justifyContent="center" margin="3rem 0">
+              <CircularProgress />
+            </Box>
+          </Container>
+        </Fade>
+      }
+    >
+      {props.children}
+    </Suspense>
+  );
+}
+
 function App() {
   const settingsManager = useContext(SettingsContext);
+
   return (
     <>
       <HelmetProvider>
@@ -55,58 +74,70 @@ function App() {
               <ScrollToTop />
               <Navbar />
               <ErrorBoundary>
-                <Suspense
-                  fallback={
-                    <Fade in>
-                      <Container maxWidth="md">
-                        <Box
-                          display="flex"
-                          justifyContent="center"
-                          margin="3rem 0"
-                        >
-                          <CircularProgress />
-                        </Box>
-                      </Container>
-                    </Fade>
-                  }
-                >
-                  <Switch>
-                    <Route exact path="/" component={HomePage} />
+                <Routes>
+                  <Route
+                    path="/"
+                    element={
+                      <LazyPage>
+                        <HomePage></HomePage>
+                      </LazyPage>
+                    }
+                  ></Route>
+
+                  <Route
+                    path="/:language/srds/:author/:game/"
+                    element={
+                      <LazyPage>
+                        <GamePage></GamePage>
+                      </LazyPage>
+                    }
+                  />
+                  <Route
+                    path="/:language/srds/:author/:game/:chapter?"
+                    element={
+                      <LazyPage>
+                        <GamePage></GamePage>
+                      </LazyPage>
+                    }
+                  />
 
-                    <Route
-                      exact
-                      path="/:language/srds/:author/:game/:chapter?"
-                      component={GamePage}
-                    />
-                    <Route
-                      exact
-                      path="/:language/srds/:author/:game/:chapter?"
-                      component={GamePage}
-                    />
-                    <Route exact path="/search" component={SearchPage} />
+                  <Route
+                    path="/search"
+                    element={
+                      <LazyPage>
+                        <SearchPage></SearchPage>
+                      </LazyPage>
+                    }
+                  />
 
-                    <Route
-                      exact
-                      path={"/browse/:authorSlug/"}
-                      render={() => {
-                        return <ShopAuthorPage />;
-                      }}
-                    />
-                    <Route
-                      exact
-                      path={"/browse/:authorSlug/:productSlug"}
-                      render={() => {
-                        return <ShopAuthorProductPage />;
-                      }}
-                    />
-                    <Route
-                      path="*"
-                      render={() => {
-                        return <NotFoundPage />;
-                      }}
-                    />
-                  </Switch>
-                </Suspense>
+                  <Route
+                    path={"/browse/:authorSlug/"}
+                    element={
+                      <LazyPage>
+                        <ShopAuthorPage></ShopAuthorPage>
+                      </LazyPage>
+                    }
+                  />
+                  <Route
+                    path={"/browse/:authorSlug/:productSlug"}
+                    children={() => {
+                      return <ShopAuthorProductPage />;
+                    }}
+                    element={
+                      <LazyPage>
+                        <ShopAuthorProductPage></ShopAuthorProductPage>
+                      </LazyPage>
+                    }
+                  />
+                  <Route
+                    path="*"
+                    element={
+                      <LazyPage>
+                        <NotFoundPage></NotFoundPage>
+                      </LazyPage>
+                    }
+                  />
+                </Routes>
 
                 <Box mb="50vh" />
               </ErrorBoundary>

src/pages/GamePage/GamePage.tsx

@@ -5,7 +5,7 @@ import Button from "@mui/material/Button";
 import { useTheme } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
 import React, { useEffect, useState } from "react";
-import { useHistory, useLocation, useRouteMatch } from "react-router-dom";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
 import { shopProducts } from "../../../data/shop/shopProducts";
 import { Document } from "../../components/Document/Document";
 import { Page } from "../../components/Page/Page";
@@ -19,25 +19,25 @@ import { ProductLicense } from "../ShopPage/components/ProductLicense";
 import { ProductLinks } from "../ShopPage/components/ProductLinks";
 
 export function GamePage() {
-  const match = useRouteMatch<{
+  const params = useParams<{
     author: string;
     game: string;
     chapter: string;
     language: string | undefined;
   }>();
 
-  const authorSlug = match.params.author;
-  const gameSlug = match.params.game;
-  const chapterSlug = match.params.chapter;
-  const language = match.params.language;
+  const authorSlug = params.author as string;
+  const gameSlug = params.game as string;
+  const chapterSlug = params.chapter as string;
+  const language = params.language as string;
   const product = shopProducts.find(
     (p) => p.slug === gameSlug && p.author.slug === authorSlug
   );
 
   const [chapter, setChapter] = useState<IChapter>();
 
   const theme = useTheme();
-  const history = useHistory();
+  const navigate = useNavigate();
   const location = useLocation();
 
   useEffect(() => {
@@ -58,7 +58,7 @@ export function GamePage() {
         setChapter(result);
       } catch (error) {
         console.error(error);
-        history.replace(`/not-found?path=${location.pathname}`);
+        navigate(`/not-found?path=${location.pathname}`, { replace: true });
       }
     }
   }, [authorSlug, gameSlug, chapterSlug, language]);
@@ -149,7 +149,7 @@ export function GamePage() {
           chapter={chapter}
           language={language}
           onLanguageChange={(newLanguage) => {
-            history.push(
+            navigate(
               AppLinksFactory.makeGameLink({
                 author: authorSlug,
                 game: gameSlug,

src/pages/PrintGamePage/PrintGamePage.tsx

@@ -1,22 +1,22 @@
 import Container from "@mui/material/Container";
 import Grid from "@mui/material/Grid";
 import React, { useEffect, useState } from "react";
-import { useRouteMatch } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import { MarkdownContent } from "../../components/MarkdownContent/MarkdownContent";
 import {
   DocumentParser,
   IDocument,
 } from "../../domains/documents/DocumentParser";
 
 export function PrintGamePage() {
-  const match = useRouteMatch<{
+  const params = useParams<{
     author: string;
     game: string;
     language: string | undefined;
   }>();
-  const gameSlug = match.params.game;
-  const author = match.params.author;
-  const language = match.params.language;
+  const gameSlug = params.game as string;
+  const author = params.author as string;
+  const language = params.language as string;
   const [game, setGame] = useState<IDocument>();
 
   useEffect(() => {

src/pages/ShopPage/ShopAuthorPage.tsx

@@ -5,7 +5,7 @@ import Fade from "@mui/material/Fade";
 import Link from "@mui/material/Link";
 import Typography from "@mui/material/Typography";
 import React from "react";
-import { useRouteMatch } from "react-router";
+import { useParams } from "react-router";
 import { Link as ReactRouterLink } from "react-router-dom";
 import { shopProducts } from "../../../data/shop/shopProducts";
 import { Page } from "../../components/Page/Page";
@@ -14,12 +14,12 @@ import { MoreByAuthor } from "./components/MoreByAuthor";
 import { ShopCategory } from "./components/ShopCategory";
 
 export function ShopAuthorPage() {
-  const match = useRouteMatch<{ authorSlug: string }>();
+  const params = useParams<{ authorSlug: string }>();
 
   const creatorsGames = shopProducts.filter((g) => {
     const authorSlug = g.author.slug;
 
-    return match.params.authorSlug === authorSlug;
+    return params.authorSlug === authorSlug;
   });
   const gamesAsString = creatorsGames.map((g) => g.name).join(", ");
   const [firstGame] = creatorsGames;

src/pages/ShopPage/ShopAuthorProductPage.tsx

@@ -6,7 +6,7 @@ import Link from "@mui/material/Link";
 import { useTheme } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
 import React from "react";
-import { useRouteMatch } from "react-router";
+import { useParams } from "react-router";
 import { Link as ReactRouterLink } from "react-router-dom";
 import { shopProducts } from "../../../data/shop/shopProducts";
 import { Page } from "../../components/Page/Page";
@@ -16,13 +16,10 @@ import { ProductDetails } from "./components/ProductDetails";
 import { ShopCategory } from "./components/ShopCategory";
 
 export function ShopAuthorProductPage() {
-  const match = useRouteMatch<{ authorSlug: string; productSlug: string }>();
+  const params = useParams<{ authorSlug: string; productSlug: string }>();
 
   const selectedGame = shopProducts.find((g) => {
-    return (
-      match.params.authorSlug === g.author.slug &&
-      match.params.productSlug === g.slug
-    );
+    return params.authorSlug === g.author.slug && params.productSlug === g.slug;
   });
 
   const selectedGameTags = selectedGame?.tags ?? [];

src/pages/ShopPage/ShopPage.tsx

@@ -9,7 +9,7 @@ import { useTheme } from "@mui/material/styles";
 import TextField from "@mui/material/TextField";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { default as React, useState } from "react";
-import { useHistory } from "react-router";
+import { useNavigate } from "react-router";
 import { Settings } from "react-slick";
 import { shopCategories } from "../../../data/shop/shopCategories";
 import { IShopProductWithAuthor } from "../../../data/shop/types/IShopProduct";
@@ -109,12 +109,12 @@ export function ShopPage() {
 function ShopPageSearch() {
   const [search, setSearch] = useState("");
 
-  const history = useHistory();
+  const navigate = useNavigate();
   return (
     <form
       onSubmit={(e) => {
         e.preventDefault();
-        history.push(AppLinksFactory.makeSearchPage(search));
+        navigate(AppLinksFactory.makeSearchPage(search));
       }}
     >
       <TextField