upgrading to react 18

.eslintrc.js

@@ -6,7 +6,7 @@ module.exports = {
     browser: true,
     mocha: true,
   },
-  parser: 'babel-eslint',
+  parser: '@babel/eslint-parser',
   extends: ['eslint:recommended', 'prettier'],
   plugins: ['react'],
   globals: {

conf/config.json

@@ -1 +1 @@
-{"interval":"60","port":9998,"scrapingAnt":{"apiKey":"","proxy":"datacenter"},"workingHours":{"from":"","to":""}}
+{"interval":"54","port":9998,"scrapingAnt":{"apiKey":"","proxy":"datacenter"},"workingHours":{"from":"","to":""}}

package.json

@@ -60,7 +60,7 @@
     "@rematch/core": "2.2.0",
     "@rematch/loading": "2.1.2",
     "@sendgrid/mail": "7.7.0",
-    "axios": "0.27.2",
+    "axios": "1.2.1",
     "better-sqlite3": "8.0.1",
     "body-parser": "1.20.1",
     "cookie-session": "2.0.0",
@@ -72,12 +72,12 @@
     "nanoid": "3.3.3",
     "node-mailjet": "3.3.13",
     "query-string": "7.1.3",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-redux": "8.0.5",
     "react-router": "5.2.1",
     "react-router-dom": "5.3.0",
-    "react-switch": "6.0.0",
+    "react-switch": "7.0.0",
     "redux": "4.2.0",
     "redux-thunk": "2.4.2",
     "restana": "4.9.7",
@@ -88,25 +88,25 @@
     "x-ray": "2.3.4"
   },
   "devDependencies": {
-    "@babel/core": "7.20.5",
+    "@babel/core": "^7.20.5",
+    "@babel/eslint-parser": "^7.19.1",
     "@babel/preset-env": "7.20.2",
     "@babel/preset-react": "7.18.6",
-    "babel-eslint": "10.1.0",
-    "babel-loader": "8.2.5",
+    "babel-loader": "9.1.0",
     "chai": "4.3.7",
     "clean-webpack-plugin": "4.0.0",
-    "copy-webpack-plugin": "10.2.4",
-    "css-loader": "6.7.2",
-    "eslint": "7.32.0",
+    "copy-webpack-plugin": "11.0.0",
+    "css-loader": "6.7.3",
+    "eslint": "^8.30.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-react": "7.31.11",
     "file-loader": "6.2.0",
     "history": "5.3.0",
     "husky": "4.3.8",
     "less": "4.1.3",
-    "less-loader": "10.2.0",
-    "lint-staged": "12.4.1",
-    "mocha": "9.2.2",
+    "less-loader": "11.1.0",
+    "lint-staged": "13.1.0",
+    "mocha": "10.2.0",
     "prettier": "2.8.1",
     "proxyquire": "2.1.3",
     "redux-logger": "3.0.6",
@@ -114,8 +114,8 @@
     "style-loader": "3.3.1",
     "url-loader": "4.1.1",
     "webpack": "5.75.0",
-    "webpack-cli": "4.9.2",
-    "webpack-dev-server": "3.11.2",
+    "webpack-cli": "5.0.1",
+    "webpack-dev-server": "4.11.1",
     "webpack-merge": "5.8.0"
   }
 }

ui/src/App.js

@@ -27,14 +27,17 @@ export default function FredyApp() {
   const [loading, setLoading] = React.useState(true);
   const currentUser = useSelector((state) => state.user.currentUser);
 
-  useEffect(async () => {
-    await dispatch.provider.getProvider();
-    await dispatch.jobs.getJobs();
-    await dispatch.jobs.getProcessingTimes();
-    await dispatch.notificationAdapter.getAdapter();
-    await dispatch.user.getCurrentUser();
+  useEffect(() => {
+    async function init() {
+      await dispatch.provider.getProvider();
+      await dispatch.jobs.getJobs();
+      await dispatch.jobs.getProcessingTimes();
+      await dispatch.notificationAdapter.getAdapter();
+      await dispatch.user.getCurrentUser();
 
-    setLoading(false);
+      setLoading(false);
+    }
+    init();
   }, [currentUser?.userId]);
 
   const needsLogin = () => {

ui/src/Index.js

@@ -4,7 +4,9 @@ import { reduxStore } from './services/rematch/store';
 import { HashRouter } from 'react-router-dom';
 import { createHashHistory } from 'history';
 import { Provider } from 'react-redux';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
+const container = document.getElementById('fredy');
+const root = createRoot(container);
 
 const history = createHashHistory();
 
@@ -12,11 +14,10 @@ import App from './App';
 
 import './Index.less';
 
-ReactDOM.render(
+root.render(
   <Provider store={reduxStore}>
     <HashRouter history={history}>
       <App />
     </HashRouter>
-  </Provider>,
-  document.getElementById('fredy')
+  </Provider>
 );

ui/src/views/generalSettings/GeneralSettings.js

@@ -23,18 +23,24 @@ const GeneralSettings = function Users() {
   const [workingHourTo, setWorkingHourTo] = React.useState(null);
   const ctx = React.useContext(ToastContext);
 
-  React.useEffect(async () => {
-    await dispatch.generalSettings.getGeneralSettings();
-    setLoading(false);
+  React.useEffect(() => {
+    async function init() {
+      await dispatch.generalSettings.getGeneralSettings();
+      setLoading(false);
+    }
+    init();
   }, []);
 
-  React.useEffect(async () => {
-    setInterval(settings?.interval);
-    setPort(settings?.port);
-    setScrapingAntApiKey(settings?.scrapingAnt?.apiKey);
-    setWorkingHourFrom(settings?.workingHours?.from);
-    setWorkingHourTo(settings?.workingHours?.to);
-    setScrapingAntProxy(settings?.scrapingAnt?.proxy || 'datacenter');
+  React.useEffect(() => {
+    async function init() {
+      setInterval(settings?.interval);
+      setPort(settings?.port);
+      setScrapingAntApiKey(settings?.scrapingAnt?.apiKey);
+      setWorkingHourFrom(settings?.workingHours?.from);
+      setWorkingHourTo(settings?.workingHours?.to);
+      setScrapingAntProxy(settings?.scrapingAnt?.proxy || 'datacenter');
+    }
+    init();
   }, [settings]);
 
   const nullOrEmpty = (val) => val == null || val.length === 0;

ui/src/views/user/Users.js

@@ -18,9 +18,12 @@ const Users = function Users() {
   const [userIdToBeRemoved, setUserIdToBeRemoved] = React.useState(null);
   const history = useHistory();
 
-  React.useEffect(async () => {
-    await dispatch.user.getUsers();
-    setLoading(false);
+  React.useEffect(() => {
+    async function init() {
+      await dispatch.user.getUsers();
+      setLoading(false);
+    }
+    init();
   }, []);
 
   const onUserRemoval = async () => {

ui/src/views/user/mutation/UserMutator.js

@@ -21,21 +21,24 @@ const UserMutator = function UserMutator() {
   const ctx = React.useContext(ToastContext);
   const dispatch = useDispatch();
 
-  React.useEffect(async () => {
-    if (params.userId != null) {
-      try {
-        const userJson = await xhrGet(`/api/admin/users/${params.userId}`);
-        const user = userJson.json;
+  React.useEffect(() => {
+    async function init() {
+      if (params.userId != null) {
+        try {
+          const userJson = await xhrGet(`/api/admin/users/${params.userId}`);
+          const user = userJson.json;
 
-        const defaultName = user?.username || '';
-        const defaultIsAdmin = user?.isAdmin || false;
+          const defaultName = user?.username || '';
+          const defaultIsAdmin = user?.isAdmin || false;
 
-        setUsername(defaultName);
-        setIsAdmin(defaultIsAdmin);
-      } catch (Exception) {
-        console.error(Exception);
+          setUsername(defaultName);
+          setIsAdmin(defaultIsAdmin);
+        } catch (Exception) {
+          console.error(Exception);
+        }
       }
     }
+    init();
   }, [params.userId]);
 
   const saveUser = async () => {

webpack.dev.js

@@ -6,7 +6,7 @@ const path = require('path');
 module.exports = merge(common, {
   devtool: 'inline-source-map',
   devServer: {
-    contentBase: path.join(__dirname, 'ui', 'public'),
+    static: path.join(__dirname, 'ui', 'public'),
     port: 9000,
     proxy: {
       '/api': {