Major package updates & refactor for React 18.

package.json

@@ -13,32 +13,31 @@
     "chokidar": "^3.5.3",
     "dbffile": "^1.8.1",
     "dinero.js": "^1.9.1",
-    "dotenv": "^10.0.0",
     "electron-is-dev": "^2.0.0",
     "electron-log": "^4.4.8",
     "electron-reload": "^2.0.0-alpha.1",
     "electron-store": "^8.0.2",
     "electron-updater": "^5.0.5",
     "firebase": "^7.24.0",
-    "graphql": "^15.5.3",
+    "graphql": "^16.5.0",
     "lodash": "^4.17.20",
-    "logrocket": "^2.0.0",
+    "logrocket": "^3.0.1",
     "moment": "^2.29.4",
-    "node-sass": "^6.0.1",
     "nucleus-nodejs": "^3.0.9",
     "query-string": "^7.1.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-infinite-scroller": "^1.2.6",
-    "react-redux": "^7.2.5",
-    "react-router-dom": "^5.3.0",
-    "react-scripts": "4.0.3",
+    "react-redux": "^8.0.2",
+    "react-router-dom": "^6.3.0",
+    "react-scripts": "5.0.1",
     "recharts": "^2.1.13",
     "redux": "^4.2.0",
     "redux-logger": "^3.0.6",
     "redux-persist": "^6.0.0",
     "redux-saga": "^1.1.3",
     "reselect": "^4.1.6",
+    "sass": "^1.54.0",
     "subscriptions-transport-ws": "^0.9.19"
   },
   "scripts": {

src/components/pages/routes/routes.page.jsx

@@ -1,6 +1,7 @@
 import { Layout } from "antd";
 import React from "react";
 import { connect } from "react-redux";
+import { Routes } from "react-router-dom";
 import { Route } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../../redux/user/user.selectors";
@@ -36,10 +37,12 @@ export function RoutesPage({ bodyshop }) {
       </Layout.Sider>
       <Layout style={{ background: "#fff" }}>
         <Layout.Content style={{ marginLeft: "1rem", height: "100%" }}>
-          <Route exact path="/settings" component={SettingsPage} />
-          <Route exact path="/reporting" component={ReportingPage} />
-          <Route exact path="/scan" component={ScanPage} />
-          <Route exact path="/" component={JobsPage} />
+          <Routes>
+            <Route exact path="/settings" element={<SettingsPage />} />
+            <Route exact path="/reporting" element={<ReportingPage />} />
+            <Route exact path="/scan" element={<ScanPage />} />
+            <Route exact path="/" element={<JobsPage />} />
+          </Routes>
         </Layout.Content>
         <ReleaseNotes />
         <UpdateManagerOrganism />

src/index.js

@@ -1,4 +1,4 @@
-import "antd/dist/antd.css";
+import "antd/dist/antd.min.css";
 //import LogRocket from "logrocket";
 import React from "react";
 import ReactDOM from "react-dom";
@@ -8,7 +8,6 @@ import { PersistGate } from "redux-persist/integration/react";
 import App from "./App/App";
 import "./index.css";
 import { persistor, store } from "./redux/store";
-require("dotenv").config();
 
 //if (process.env.NODE_ENV === "production") LogRocket.init("imex/rps");