frontend: fix react router

* Update react router setup to comply with new v6 version
* Update dev docker-compose to use yarn
* Remove use-query-params which is not compatible with router v6

docker-compose.yml

@@ -30,7 +30,7 @@ services:
       args:
         USER_ID: ${USER_ID}
         GROUP_ID: ${GROUP_ID}
-    command: "sh -c 'npm ci && npm run start'"
+    command: "sh -c 'yarn install --frozen-lockfile && yarn start'"
     working_dir: "/app"
     volumes:
       - ./web:/app

web/package.json

@@ -31,8 +31,7 @@
     "react-measure": "^2.5.2",
     "react-router-dom": "^6.3.0",
     "react-scripts": "4.0.1",
-    "typescript": "~4.1.3",
-    "use-query-params": "^1.1.9"
+    "typescript": "~4.1.3"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -56,4 +55,4 @@
     ]
   },
   "proxy": "http://graphkb:8080"
-}
+}

web/src/App.tsx

@@ -1,31 +1,30 @@
-import React from 'react';
-import { ThemeProvider } from '@material-ui/core';
-import { createTheme } from '@material-ui/core';
-import ExplorerView from './views/ExplorerView';
-import { BrowserRouter as Router, Route } from 'react-router-dom';
-import { QueryParamProvider } from 'use-query-params';
+import React from "react";
+import { ThemeProvider } from "@material-ui/core";
+import { createTheme } from "@material-ui/core";
+import ExplorerView from "./views/ExplorerView";
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 
-if (process.env.NODE_ENV !== 'production') {
-  const whyDidYouRender = require('@welldone-software/why-did-you-render');
+if (process.env.NODE_ENV !== "production") {
+  const whyDidYouRender = require("@welldone-software/why-did-you-render");
   whyDidYouRender(React);
 }
 
 const App: React.FC = () => {
   const darkTheme = createTheme({
     palette: {
-      type: 'dark',
+      type: "dark",
     },
   });
 
   return (
     <ThemeProvider theme={darkTheme}>
       <Router>
-        <QueryParamProvider ReactRouterRoute={Route}>
-          <ExplorerView />
-        </QueryParamProvider>  
+        <Routes>
+          <Route path="" element={<ExplorerView />} />
+        </Routes>
       </Router>
-    </ThemeProvider >
+    </ThemeProvider>
   );
-}
+};
 
-export default App;
+export default App;