upgrade web deps

web/client/package.json

@@ -5,21 +5,21 @@
   "dependencies": {
     "@testing-library/jest-dom": "^5.15.1",
     "@testing-library/react": "^12.1.2",
-    "@testing-library/user-event": "^13.5.0",
+    "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^27.0.3",
+    "@types/jest": "^29.2.4",
-    "@types/node": "^16.11.11",
+    "@types/node": "^18.11.12",
-    "@types/react": "^17.0.37",
+    "@types/react": "^18.0.26",
-    "@types/react-dom": "^17.0.11",
+    "@types/react-dom": "^18.0.9",
     "bootstrap": "^5.1.3",
     "copy-to-clipboard": "^3.3.1",
     "fetch-to-curl": "^0.5.2",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-bootstrap": "^2.0.3",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-json-pretty": "^2.2.0",
-    "react-scripts": "4.0.3",
+    "react-scripts": "5.0.1",
     "typescript": "^4.5.2",
-    "web-vitals": "^2.1.2"
+    "web-vitals": "^3.1.0"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -46,9 +46,9 @@
     ]
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.46.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/parser": "^5.46.0",
-    "eslint": "^7.32.0",
+    "eslint": "^8.29.0",
     "eslint-plugin-react": "^7.27.1"
   }
 }

web/client/src/index.tsx

@@ -1,15 +1,11 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import 'bootstrap/dist/css/bootstrap.min.css'
 import App from './App'
 import reportWebVitals from './reportWebVitals'
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('root') as HTMLElement)
-  <React.StrictMode>
+root.render(<App />)
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
-)
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))

web/client/src/lib/flow.ts

@@ -74,8 +74,8 @@ export class Flow {
   private _previewRequestBody: IPreviewBody | null = null
   private _hexviewResponseBody: string | null = null
 
-  private connMgr: ConnectionManager;
+  private connMgr: ConnectionManager
-  private conn: IConnection | undefined;
+  private conn: IConnection | undefined
 
   constructor(msg: IMessage, connMgr: ConnectionManager) {
     this.no = ++Flow.curNo