Merge pull request #5 from Elius94:React-18-migration

React-18-migration
Elius94 · May 6, 2022 · 199c6d5 · 199c6d5
2 parents 6c87e19 + 0493155
commit 199c6d5
Show file tree

Hide file tree

Showing 11 changed files with 23,124 additions and 23,422 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,41 +1,30 @@
 {
     "name": "koriss",
-    "version": "1.2.3",
+    "version": "1.2.4",
     "private": false,
     "dependencies": {
-        "@emailjs/browser": "^3.4.0",
-        "@emotion/react": "^11.8.1",
+        "@emotion/react": "^11.9.0",
         "@emotion/styled": "^11.8.1",
-        "@mui/icons-material": "^5.4.2",
-        "@mui/material": "^5.4.3",
-        "@mui/styles": "^5.4.2",
-        "@testing-library/jest-dom": "^4.2.4",
-        "@testing-library/react": "^9.5.0",
-        "@testing-library/user-event": "^7.2.1",
-        "@types/markdown-to-jsx": "^6.11.1",
-        "@types/react-helmet": "^6.1.5",
-        "@types/react-helmet-async": "^1.0.3",
-        "@types/react-router-dom": "^5.1.5",
-        "@types/validator": "^13.1.0",
+        "@mui/icons-material": "^5.6.2",
+        "@mui/material": "^5.6.4",
+        "@mui/styles": "^5.6.2",
+        "@mui/system": "^5.6.4",
         "clsx": "^1.1.1",
-        "final-form": "^4.20.1",
-        "leaflet": "^1.7.1",
-        "lodash": "^4.17.21",
-        "markdown-to-jsx": "^6.11.4",
+        "eslint-config-react-app": "^7.0.1",
+        "leaflet": "^1.8.0",
         "mui-image": "^1.0.4",
-        "react": "^17.0.2",
-        "react-device-detect": "^2.1.2",
-        "react-dom": "^17.0.0",
-        "react-final-form": "^6.5.1",
+        "react": "^18.1.0",
+        "react-device-detect": "^2.2.2",
+        "react-dom": "^18.1.0",
         "react-iubenda-policy": "^0.1.1",
-        "react-leaflet": "^3.2.5",
-        "react-parallax-mouse": "^1.5.1",
-        "react-router": "^5.2.0",
-        "react-router-dom": "^5.2.0",
-        "react-scripts": "^3.4.3",
-        "react-scroll-parallax": "^3.0.3",
-        "typescript": "^3.9.7",
-        "validator": "^13.1.1"
+        "react-leaflet": "^4.0.0",
+        "react-markdown": "^8.0.3",
+        "react-router-dom": "^6.3.0",
+        "react-scripts": "^5.0.1",
+        "react-scroll-parallax": "^3.1.0",
+        "rehype-raw": "^6.1.1",
+        "remark-gfm": "^3.0.1",
+        "typescript": "^4.6.4"
     },
     "scripts": {
         "start": "react-scripts start",
@@ -53,7 +42,8 @@
     ],
     "devDependencies": {
         "@types/leaflet": "^1.7.9",
-        "@types/lodash": "^4.14.180"
+        "@types/react-dom": "^18.0.3",
+        "@types/react-router-dom": "^5.1.5"
     },
     "resolutions": {
         "selfsigned": "^1.10.8"

diff --git a/public/index.html b/public/index.html
@@ -39,6 +39,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin="" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import "./App.css";
 import Home from "./onepirate/Home";
-import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
 import Contact from "./onepirate/Contact";
 import { ParallaxProvider } from 'react-scroll-parallax';
 import Articles from "./onepirate/Articles";
@@ -12,23 +12,15 @@ function App() {
   return (
     <React.Fragment>
       <ParallaxProvider>
-        <Router>
-          <Switch>
-            <Route path="/contattami">
-              <Contact />
-            </Route>
-            <Route path="/articoli">
-              <Articles />
-            </Route>
-            <Route path="/index.html">
-              <Home />
-            </Route>
-            <Route exact path="/">
-              <Home />
-            </Route>
-            <Route component={NotFound404} />
-          </Switch>
-        </Router>
+        <BrowserRouter>
+          <Routes>
+            <Route path="/contattami" element={<Contact />} />
+            <Route path="/articoli/*" element={<Articles />} />
+            <Route path="/index.html" element={<Home />} />
+            <Route path="/" element={<Home />} />
+            <Route path="*" element={<NotFound404 />} />
+          </Routes>
+        </BrowserRouter>
       </ParallaxProvider>
     </React.Fragment>
   );

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,14 +1,17 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import * as ReactDOMClient from 'react-dom/client';
 import "./index.css";
 import App from "./App";
 import * as serviceWorker from "./serviceWorker";
 
-ReactDOM.render(
+const rootElement : HTMLElement | null = document.getElementById("root");
+
+const root = ReactDOMClient.createRoot(rootElement? rootElement : document.createElement("div"));
+
+root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById("root")
+  </React.StrictMode>
 );
 
 // If you want your app to work offline and load faster, you can change

diff --git a/src/onepirate/404.css b/src/onepirate/404.css
@@ -19,6 +19,7 @@
 
 .full {
     height: 70vh;
+    max-height: 1800px;
 }
 
 .center {

diff --git a/src/onepirate/404.tsx b/src/onepirate/404.tsx
@@ -2,16 +2,15 @@ import React from "react";
 import AppAppBar from "./modules/views/AppAppBar";
 import AppFooter from "./modules/views/AppFooter";
 import withRoot from "./modules/withRoot";
-import { MouseParallaxContainer, MouseParallaxChild } from "react-parallax-mouse";
-import { isMobile } from 'react-device-detect';
 import { ParallaxBanner } from "react-scroll-parallax";
 import { BannerLayer } from "react-scroll-parallax/dist/components/ParallaxBanner/types";
 import "./404.css";
+import { isMobile } from "react-device-detect";
 
 export const AdvancedBannerTop = () => {
     const background: BannerLayer = {
         image: "/EL_04138_cielo.jpg",
-        translateY: [10, 60],
+        translateY: [10, 40],
         opacity: [1, 0.3],
         scale: [1.05, 1, "easeOutCubic"],
         shouldAlwaysCompleteAnimation: true
@@ -25,8 +24,8 @@ export const AdvancedBannerTop = () => {
     };
 
     const korino: BannerLayer = {
-        translateY: [30, 33],
-        translateX: [5, -10],
+        translateY: isMobile? [30, 33] : [30, 53],
+        translateX: isMobile? [5, -10] : [5, -5],
         scale: [0.12, 0.18, "easeOutCubic"],
         shouldAlwaysCompleteAnimation: true,
         expanded: false,
@@ -38,8 +37,8 @@ export const AdvancedBannerTop = () => {
     };
 
     const cartello: BannerLayer = {
-        translateY: [10, 13],
-        translateX: [-30, -25],
+        translateY: isMobile? [10, 13] : [10, 33],
+        translateX: isMobile? [-30, -25] : [-30, -15],
         scale: [0.1, 0.2, "easeOutCubic"],
         shouldAlwaysCompleteAnimation: true,
         expanded: false,
@@ -69,97 +68,7 @@ function NotFound404() {
     return (
         <React.Fragment>
             <AppAppBar />
-            {isMobile ? (
                 <AdvancedBannerTop />
-            ) : (
-                <div
-                    style={{
-                        height: "500px",
-                        width: "100%",
-                        minWidth: "1200px",
-                        background: "#01011A",
-                        color: "#fff",
-                        overflow: "hidden",
-                    }}>
-                    <div
-                        style={{
-                            height: "100%",
-                            display: "flex",
-                            flexDirection: "column",
-                            justifyContent: "center"
-                        }}
-                    >
-                        <MouseParallaxContainer
-                            className="parallax"
-                            containerStyles={{
-                                width: "100%",
-                                display: "grid",
-                                gridTemplateColumns: "auto auto auto auto auto"
-                            }}
-                            resetOnLeave
-                        >
-                            <MouseParallaxChild
-                                factorX={0.03}
-                                factorY={0.01}
-                                updateStyles={{
-                                    background: "url(/EL_03496.jpg)",
-                                    backgroundPositionY: "80%",
-                                    transform: "scale(1.2)",
-                                    position: "absolute",
-                                    filter: "blur(1px) brightness(80%)",
-                                    backgroundSize: "cover",
-                                    backgroundRepeat: "no-repeat",
-                                    width: "100%",
-                                    height: "100%",
-                                    backfaceVisibility: "hidden",
-                                    boxShadow: "inset 0px 0px 150px black"
-                                }}
-                            >
-                            </MouseParallaxChild>
-                            <MouseParallaxChild
-                                factorX={0.08}
-                                factorY={0.05}
-                                updateStyles={{
-                                    display: "flex",
-                                    alignItems: "center",
-                                    justifyContent: "center",
-                                    width: "auto",
-                                    height: "61%"
-                                }}
-                            >
-                                <img
-                                    src="/raccoon_cute.png"
-                                    alt="Cute Raccoon"
-                                    height={"40%"}
-                                    style={{
-                                        margin: "5% 8% 300px",
-                                    }}
-                                />
-                            </MouseParallaxChild>
-                            <MouseParallaxChild
-                                factorX={0.05}
-                                factorY={0.03}
-                                updateStyles={{
-                                    display: "flex",
-                                    alignItems: "center",
-                                    justifyContent: "center",
-                                    width: "auto",
-                                    height: "52%"
-                                }}
-                            >
-                                <img
-                                    src="/sign-404.png"
-                                    alt="Road Sign"
-                                    height={"30%"}
-                                    style={{
-                                        margin: "5% 8% 300px",
-                                    }}
-                                />
-                            </MouseParallaxChild>
-                        </MouseParallaxContainer>
-                    </div>
-                </div>
-            )}
             <AppFooter />
         </React.Fragment >
     )

diff --git a/src/onepirate/Articles.tsx b/src/onepirate/Articles.tsx
@@ -1,24 +1,18 @@
 import React from "react";
-import { Route, Switch, useRouteMatch } from 'react-router-dom';
+import { Route, Routes } from 'react-router-dom';
 import withRoot from "./modules/withRoot";
 import Privacy from "./pages/Privacy";
 import NotFound404 from './404';
 import Article from "./pages/Article";
 
 function Articles() {
-    const { path } = useRouteMatch()
-
     return (
         <React.Fragment>
-            <Switch>
-                <Route path={`${path}/privacy`}>
-                    <Privacy />
-                </Route>
-                <Route path={`${path}/benefici-massaggio-infantile`}>
-                    <Article article={"articolo_massaggi"} />
-                </Route>
-                <Route component={NotFound404} />
-            </Switch>
+            <Routes>
+                <Route path={`privacy`} element={<Privacy />} />
+                <Route path={`benefici-massaggio-infantile`} element={<Article article={"articolo_massaggi"} />} />
+                <Route path={`*`} element={<NotFound404 />} />
+            </Routes>
         </React.Fragment>
     )
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -19,6 +19,7 @@ @@
     .full {
         height: 70vh;
+        max-height: 1800px;
     }
     .center {
@@ Expand Down @@