Dependencies are updated

Author: M-Numonov

README.md

@@ -1,4 +1,4 @@
-# Sing App React 5.0.0
+# Sing App React 8.3.2
 
 Our React version follows latest industry best practices and uses Redux as a state manager. This version is a great choice when you want to be in control of your own codebase and decide on development approaches that are the best for your project. Webpack Module Bundler and Yarn as a package manager are under the hood.
 

changelog.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## [8.3.2]
+
+- Updated React/ReactDOM
+- Updated Dependencies
+
 ## [8.3.1]
 
 - UI adjust

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sing-app-react",
-  "version": "6.0.0",
+  "version": "8.3.2",
   "private": true,
   "scripts": {
     "build": "cross-env REACT_APP_BACKEND=true cross-env PUBLIC_URL='/sing-app-react' node scripts/build.js",
@@ -54,23 +54,23 @@
     ]
   },
   "dependencies": {
-    "@amcharts/amcharts4": "^4.10.25",
-    "@amcharts/amcharts4-geodata": "^4.1.23",
+    "@amcharts/amcharts4": "^4.10.35",
+    "@amcharts/amcharts4-geodata": "^4.1.26",
     "@fullcalendar/core": "5.11.0",
     "@fullcalendar/daygrid": "5.11.0",
     "@fullcalendar/interaction": "5.11.0",
     "@fullcalendar/list": "5.11.0",
     "@fullcalendar/react": "5.11.1",
     "@fullcalendar/timegrid": "5.11.0",
     "animate.css": "4.1.1",
-    "apexcharts": "^3.35.3",
+    "apexcharts": "^3.40.0",
     "awesome-bootstrap-checkbox": "https://github.com/flatlogic/awesome-bootstrap-checkbox#bump-to-bootstrap5",
     "axios": "^0.27.2",
     "bootstrap": "5.1.3",
     "bootstrap-slider": "^10.6.2",
     "bootstrap_calendar": "https://github.com/xero/bootstrap_calendar.git#1.0.1",
     "chroma-js": "^2.4.2",
-    "classnames": "^2.3.1",
+    "classnames": "^2.3.2",
     "connected-react-router": "6.9.2",
     "cross-env": "^7.0.3",
     "draft-js": "^0.11.7",
@@ -85,27 +85,27 @@
     "formsy-react": "0.19.5",
     "glyphicons-halflings": "^1.9.1",
     "highcharts": "^7.2.2",
-    "highcharts-react-official": "^3.1.0",
+    "highcharts-react-official": "^3.2.0",
     "history": "^4.10.1",
     "jasny-bootstrap": "^3.1.3",
     "jsonwebtoken": "^8.5.1",
     "line-awesome": "^1.3.0",
     "md5": "^2.3.0",
     "messenger": "git+https://github.com/HubSpot/messenger.git#v1.4.2",
-    "moment": "^2.29.3",
+    "moment": "^2.29.4",
     "nvd3": "1.8.6",
-    "qs": "^6.10.5",
+    "qs": "^6.11.2",
     "query-string": "^6.14.1",
     "rc-color-picker": "^1.2.6",
     "rc-hammerjs": "0.6.10",
     "rc-slider": "^8.7.1",
-    "react": "^17.0.2",
+    "react": "^18.0.0",
     "react-animate-height": "^2.1.2",
     "react-animated-number": "^0.4.4",
     "react-apexcharts": "^1.4.0",
     "react-app-polyfill": "^0.2.2",
     "react-autosize-textarea": "^5.0.1",
-    "react-bootstrap": "^1.6.5",
+    "react-bootstrap": "^1.5.2",
     "react-bootstrap-table": "4.3.1",
     "react-bootstrap-table-next": "^4.0.3",
     "react-bootstrap-table2-editor": "^1.4.0",
@@ -115,7 +115,7 @@
     "react-bootstrap-table2-toolkit": "^2.1.3",
     "react-datetime": "^2.16.3",
     "react-dev-utils": "^6.1.1",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.0.0",
     "react-draft-wysiwyg": "1.14.7",
     "react-dropzone": "^6.2.4",
     "react-google-maps": "^9.4.5",
@@ -142,7 +142,7 @@
     "react-transition-group": "^2.9.0",
     "react-trend": "^1.2.5",
     "reactstrap": "9.1.1",
-    "redux": "^4.2.0",
+    "redux": "^4.2.1",
     "redux-thunk": "^2.4.1",
     "reselect": "^4.1.6",
     "rickshaw": "1.7.1",
@@ -210,8 +210,8 @@
     "workbox-webpack-plugin": "4.3.1"
   },
   "resolutions": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "engines": {
     "node": "14"

src/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import {createRoot} from "react-dom/client";
 import { routerMiddleware } from 'connected-react-router';
 import { createStore, applyMiddleware, compose } from 'redux';
 import { Provider } from 'react-redux'
@@ -39,11 +39,12 @@ export const store = createStore(
 
 store.dispatch(doInit());
 
-ReactDOM.render(
+const container = document.getElementById("root");
+const root = createRoot(container);
+root.render(
     <Provider store={store}>
-        <App />
-    </Provider>,
-    document.getElementById('root')
+        <App/>
+    </Provider>
 );
 
 // If you want your app to work offline and load faster, you can change