Bump React To 18.2.0

Bump react to v18, and handle all the breaking changes. This includes
bumping a lot of other dependencies to versions which support react 18,
and handling the breaking changes for those.

Refer to the following documents for migration guides:
React: https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html
Router: https://reactrouter.com/docs/en/v6/upgrading/v5

Signed-off-by: Hassan Abouelela <[email protected]>

1 files changed, 24 insertions, 26 deletions

diff --git a/src/App.tsx b/src/App.tsx
index 523e583..752a6c6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,11 +3,7 @@
 import React, { Suspense } from "react";
 import { jsx, css, Global } from "@emotion/react";
 
-import {
-    BrowserRouter as Router,
-    Route,
-    Switch
-} from "react-router-dom";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
 
 import { PropagateLoader } from "react-spinners";
 
@@ -35,31 +31,33 @@ function PageLoading() {
     </div>;
 }
 
+function Routing(): JSX.Element {
+    const renderedRoutes = routes.map(({path, Component}) => (
+        <Route key={path} path={path} element={
+            <Suspense fallback={<PageLoading/>}><Component/></Suspense>
+        }/>
+    ));
+
+    return (
+        <Routes location={location}>
+            {renderedRoutes}
+        </Routes>
+    );
+}
+
 function App(): JSX.Element {
     return (
         <div>
             <Global styles={globalStyles}/>
-            <Router>
-                <Route render={({ location }) => (
-                    <TransitionGroup>
-                        <CSSTransition
-                            key={location.pathname}
-                            classNames="fade"
-                            timeout={300}
-                        >
-                            <Switch location={location}>
-                                {routes.map(({path, Component}) => (
-                                    <Route exact key={path} path={path}>
-                                        <Suspense fallback={<PageLoading/>}>
-                                            <Component/>
-                                        </Suspense>
-                                    </Route>
-                                ))}
-                            </Switch>
-                        </CSSTransition>
-                    </TransitionGroup>
-                )}/>
-            </Router>
+            <TransitionGroup>
+                <CSSTransition key={location.pathname} classNames="fade" timeout={300}>
+                    <BrowserRouter>
+                        <Routes>
+                            <Route path="*" element={<Routing/>}/>
+                        </Routes>
+                    </BrowserRouter>
+                </CSSTransition>
+            </TransitionGroup>
         </div>
     );
 }