update react-router-dom to v6

don't need v5-compat

jsx/package-lock.json

@@ -19,8 +19,7 @@
         "react-icons": "^4.8.0",
         "react-multi-select-component": "^4.3.4",
         "react-redux": "^7.2.8",
-        "react-router-dom": "^5.3.4",
+        "react-router-dom": "^6.22.2",
-        "react-router-dom-v5-compat": "^6.22.2",
         "recompose": "npm:react-recompose@^0.33.0",
         "redux": "^4.2.1",
         "regenerator-runtime": "^0.13.11"
@@ -7845,17 +7844,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/path-to-regexp": {
-      "version": "1.8.0",
-      "license": "MIT",
-      "dependencies": {
-        "isarray": "0.0.1"
-      }
-    },
-    "node_modules/path-to-regexp/node_modules/isarray": {
-      "version": "0.0.1",
-      "license": "MIT"
-    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "dev": true,
@@ -8324,57 +8312,6 @@
       "license": "MIT"
     },
     "node_modules/react-router": {
-      "version": "5.3.4",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.12.13",
-        "history": "^4.9.0",
-        "hoist-non-react-statics": "^3.1.0",
-        "loose-envify": "^1.3.1",
-        "path-to-regexp": "^1.7.0",
-        "prop-types": "^15.6.2",
-        "react-is": "^16.6.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=15"
-      }
-    },
-    "node_modules/react-router-dom": {
-      "version": "5.3.4",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.12.13",
-        "history": "^4.9.0",
-        "loose-envify": "^1.3.1",
-        "prop-types": "^15.6.2",
-        "react-router": "5.3.4",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=15"
-      }
-    },
-    "node_modules/react-router-dom-v5-compat": {
-      "version": "6.22.2",
-      "resolved": "https://registry.npmjs.org/react-router-dom-v5-compat/-/react-router-dom-v5-compat-6.22.2.tgz",
-      "integrity": "sha512-d7Bo6q3lRwUqtrmuULkpu3NECk+nOT3eNz6PnR5lGIWi0NN7gu6i281cqe3Cfu8v0MmNE41D0g/JdKJhfE7Brw==",
-      "dependencies": {
-        "history": "^5.3.0",
-        "react-router": "6.22.2"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.8",
-        "react-dom": ">=16.8",
-        "react-router-dom": "4 || 5"
-      }
-    },
-    "node_modules/react-router-dom-v5-compat/node_modules/react-router": {
       "version": "6.22.2",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.2.tgz",
       "integrity": "sha512-YD3Dzprzpcq+tBMHBS822tCjnWD3iIZbTeSXMY9LPSG541EfoBGyZ3bS25KEnaZjLcmQpw2AVLkFyfgXY8uvcw==",
@@ -8388,28 +8325,20 @@
         "react": ">=16.8"
       }
     },
-    "node_modules/react-router-dom/node_modules/history": {
+    "node_modules/react-router-dom": {
-      "version": "4.10.1",
+      "version": "6.22.2",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.2.tgz",
+      "integrity": "sha512-WgqxD2qySEIBPZ3w0sHH+PUAiamDeszls9tzqMPBDA1YYVucTBXLU7+gtRfcSnhe92A3glPnvSxK2dhNoAVOIQ==",
       "dependencies": {
-        "@babel/runtime": "^7.1.2",
+        "@remix-run/router": "1.15.2",
-        "loose-envify": "^1.2.0",
+        "react-router": "6.22.2"
-        "resolve-pathname": "^3.0.0",
+      },
-        "tiny-invariant": "^1.0.2",
+      "engines": {
-        "tiny-warning": "^1.0.0",
+        "node": ">=14.0.0"
-        "value-equal": "^1.0.1"
+      },
-      }
+      "peerDependencies": {
-    },
+        "react": ">=16.8",
-    "node_modules/react-router/node_modules/history": {
+        "react-dom": ">=16.8"
-      "version": "4.10.1",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.1.2",
-        "loose-envify": "^1.2.0",
-        "resolve-pathname": "^3.0.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0",
-        "value-equal": "^1.0.1"
       }
     },
     "node_modules/react-transition-group": {
@@ -8633,10 +8562,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/resolve-pathname": {
-      "version": "3.0.0",
-      "license": "MIT"
-    },
     "node_modules/resolve.exports": {
       "version": "2.0.2",
       "dev": true,
@@ -9449,14 +9374,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/tiny-invariant": {
-      "version": "1.3.1",
-      "license": "MIT"
-    },
-    "node_modules/tiny-warning": {
-      "version": "1.0.3",
-      "license": "MIT"
-    },
     "node_modules/tmpl": {
       "version": "1.0.5",
       "dev": true,
@@ -9726,10 +9643,6 @@
         "node": ">=10.12.0"
       }
     },
-    "node_modules/value-equal": {
-      "version": "1.0.1",
-      "license": "MIT"
-    },
     "node_modules/vary": {
       "version": "1.1.2",
       "dev": true,

jsx/package.json

@@ -39,8 +39,7 @@
     "react-icons": "^4.8.0",
     "react-multi-select-component": "^4.3.4",
     "react-redux": "^7.2.8",
-    "react-router-dom": "^5.3.4",
+    "react-router-dom": "^6.22.2",
-    "react-router-dom-v5-compat": "^6.22.2",
     "recompose": "npm:react-recompose@^0.33.0",
     "redux": "^4.2.1",
     "regenerator-runtime": "^0.13.11"

jsx/src/App.jsx

@@ -5,7 +5,7 @@ import { createStore } from "redux";
 import { compose } from "recompose";
 import { initialState, reducers } from "./Store";
 import withAPI from "./util/withAPI";
-import { HashRouter, Switch, Route } from "react-router-dom";
+import { HashRouter, Routes, Route } from "react-router-dom";
 
 import ServerDashboard from "./components/ServerDashboard/ServerDashboard";
 import Groups from "./components/Groups/Groups";
@@ -13,7 +13,6 @@ import GroupEdit from "./components/GroupEdit/GroupEdit";
 import CreateGroup from "./components/CreateGroup/CreateGroup";
 import AddUser from "./components/AddUser/AddUser";
 import EditUser from "./components/EditUser/EditUser";
-import { CompatRouter } from "react-router-dom-v5-compat";
 
 import "./style/root.css";
 
@@ -24,40 +23,17 @@ const App = () => {
     <div className="resets">
       <Provider store={store}>
         <HashRouter>
-          <CompatRouter>
+          <Routes>
-            <Switch>
+            <Route path="/" element={compose(withAPI)(ServerDashboard)()} />
-              <Route
+            <Route path="/groups" element={compose(withAPI)(Groups)()} />
-                exact
+            <Route path="/group-edit" element={compose(withAPI)(GroupEdit)()} />
-                path="/"
+            <Route
-                component={compose(withAPI)(ServerDashboard)}
+              path="/create-group"
-              />
+              element={compose(withAPI)(CreateGroup)()}
-              <Route
+            />
-                exact
+            <Route path="/add-users" element={compose(withAPI)(AddUser)()} />
-                path="/groups"
+            <Route path="/edit-user" element={compose(withAPI)(EditUser)()} />
-                component={compose(withAPI)(Groups)}
+          </Routes>
-              />
-              <Route
-                exact
-                path="/group-edit"
-                component={compose(withAPI)(GroupEdit)}
-              />
-              <Route
-                exact
-                path="/create-group"
-                component={compose(withAPI)(CreateGroup)}
-              />
-              <Route
-                exact
-                path="/add-users"
-                component={compose(withAPI)(AddUser)}
-              />
-              <Route
-                exact
-                path="/edit-user"
-                component={compose(withAPI)(EditUser)}
-              />
-            </Switch>
-          </CompatRouter>
         </HashRouter>
       </Provider>
     </div>

jsx/src/components/GroupEdit/GroupEdit.test.jsx

@@ -6,7 +6,6 @@ import userEvent from "@testing-library/user-event";
 import { Provider, useSelector } from "react-redux";
 import { createStore } from "redux";
 import { HashRouter } from "react-router-dom";
-import { CompatRouter } from "react-router-dom-v5-compat";
 // eslint-disable-next-line
 import regeneratorRuntime from "regenerator-runtime";
 
@@ -28,22 +27,20 @@ var okPacket = new Promise((resolve) => resolve(true));
 var groupEditJsx = (callbackSpy) => (
   <Provider store={createStore(() => {}, {})}>
     <HashRouter>
-      <CompatRouter>
+      <GroupEdit
-        <GroupEdit
+        location={{
-          location={{
+          state: {
-            state: {
+            group_data: { users: ["foo"], name: "group" },
-              group_data: { users: ["foo"], name: "group" },
+            callback: () => {},
-              callback: () => {},
+          },
-            },
+        }}
-          }}
+        addToGroup={callbackSpy}
-          addToGroup={callbackSpy}
+        removeFromGroup={callbackSpy}
-          removeFromGroup={callbackSpy}
+        deleteGroup={callbackSpy}
-          deleteGroup={callbackSpy}
+        history={{ push: () => callbackSpy }}
-          history={{ push: () => callbackSpy }}
+        updateGroups={callbackSpy}
-          updateGroups={callbackSpy}
+        validateUser={jest.fn().mockImplementation(() => okPacket)}
-          validateUser={jest.fn().mockImplementation(() => okPacket)}
+      />
-        />
-      </CompatRouter>
     </HashRouter>
   </Provider>
 );

jsx/src/components/Groups/Groups.test.js

@@ -4,8 +4,7 @@ import { act } from "react-dom/test-utils";
 import { render, screen, fireEvent } from "@testing-library/react";
 import { Provider, useDispatch, useSelector } from "react-redux";
 import { createStore } from "redux";
-import { HashRouter } from "react-router-dom";
+import { HashRouter, useSearchParams } from "react-router-dom";
-import { CompatRouter, useSearchParams } from "react-router-dom-v5-compat";
 // eslint-disable-next-line
 import regeneratorRuntime from "regenerator-runtime";
 
@@ -17,8 +16,8 @@ jest.mock("react-redux", () => ({
   useSelector: jest.fn(),
 }));
 
-jest.mock("react-router-dom-v5-compat", () => ({
+jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom-v5-compat"),
+  ...jest.requireActual("react-router-dom"),
   useSearchParams: jest.fn(),
 }));
 
@@ -28,9 +27,7 @@ var mockAsync = () =>
 var groupsJsx = (callbackSpy) => (
   <Provider store={createStore(mockReducers, mockAppState())}>
     <HashRouter>
-      <CompatRouter>
+      <Groups location={{ search: "0" }} updateGroups={callbackSpy} />
-        <Groups location={{ search: "0" }} updateGroups={callbackSpy} />
-      </CompatRouter>
     </HashRouter>
   </Provider>
 );

jsx/src/components/ServerDashboard/ServerDashboard.jsx

@@ -14,10 +14,7 @@ import {
 } from "react-bootstrap";
 import ReactObjectTableViewer from "../ReactObjectTableViewer/ReactObjectTableViewer";
 
-import { Link } from "react-router-dom";
+import { Link, useSearchParams } from "react-router-dom";
-// react-router-dom v6 API
-// should be able to upgrade to v6 someday
-import { useSearchParams } from "react-router-dom-v5-compat";
 import { FaSort, FaSortUp, FaSortDown } from "react-icons/fa";
 
 import "./server-dashboard.css";

jsx/src/components/ServerDashboard/ServerDashboard.test.js

@@ -9,8 +9,8 @@ import {
   getByText,
   getAllByRole,
 } from "@testing-library/react";
-import { HashRouter, Switch } from "react-router-dom";
+import { HashRouter, Routes, Route, useSearchParams } from "react-router-dom";
-import { CompatRouter, useSearchParams } from "react-router-dom-v5-compat";
+// import { CompatRouter,  } from "react-router-dom-v5-compat";
 import { Provider, useSelector } from "react-redux";
 import { createStore } from "redux";
 // eslint-disable-next-line
@@ -23,8 +23,8 @@ jest.mock("react-redux", () => ({
   ...jest.requireActual("react-redux"),
   useSelector: jest.fn(),
 }));
-jest.mock("react-router-dom-v5-compat", () => ({
+jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom-v5-compat"),
+  ...jest.requireActual("react-router-dom"),
   useSearchParams: jest.fn(),
 }));
 

jsx/src/util/paginationParams.js

@@ -1,5 +1,5 @@
 import { debounce } from "lodash";
-import { useSearchParams } from "react-router-dom-v5-compat";
+import { useSearchParams } from "react-router-dom";
 
 export const usePaginationParams = () => {
   // get offset, limit, name filter from URL