refactor(client): some migration step for react-router@v6

client/src/App.jsx

@@ -89,6 +89,7 @@ function CentralContentContainer(props) {
     model: props.model,
     notifications,
     params: props.params,
+    webSocket: socket,
   };
 
   // check anonymous sessions settings
@@ -122,45 +123,32 @@ function CentralContentContainer(props) {
               <LazyHelp />
             </ContainerWrap>
           </CompatRoute>
-          <Route path={Url.get(Url.pages.search)}>
+          <CompatRoute path="/search">
             <ContainerWrap>
-              <LazySearchPage
-                userName={props.user?.data?.name}
-                isLoggedUser={props.user.logged}
-                model={props.model}
-              />
+              <LazySearchPage />
             </ContainerWrap>
-          </Route>
-          <Route path={Url.get(Url.pages.inactiveKgProjects)}>
+          </CompatRoute>
+          <CompatRoute path="/inactive-kg-projects">
             {props.user.logged ? (
               <ContainerWrap>
-                <LazyInactiveKGProjectsPage socket={socket} />
+                <LazyInactiveKGProjectsPage />
               </ContainerWrap>
             ) : (
               <LazyNotFound />
             )}
-          </Route>
-          <Route
-            exact
-            path={[
-              Url.get(Url.pages.projects),
-              Url.get(Url.pages.projects.starred),
-              Url.get(Url.pages.projects.all),
-            ]}
-          >
-            <ContainerWrap>
-              <LazyProjectList />
-            </ContainerWrap>
-          </Route>
-          <Route exact path={Url.get(Url.pages.project.new)}>
+          </CompatRoute>
+          {["/projects", "/projects/starred", "/projects/all"].map((path) => (
+            <CompatRoute key={path} exact path={path}>
+              <ContainerWrap>
+                <LazyProjectList />
+              </ContainerWrap>
+            </CompatRoute>
+          ))}
+          <CompatRoute exact path="/projects/new">
             <ContainerWrap>
-              <LazyNewProject
-                model={props.model}
-                user={props.user}
-                client={props.client}
-              />
+              <LazyNewProject />
             </ContainerWrap>
-          </Route>
+          </CompatRoute>
           <Route path="/projects/:subUrl+">
             <LazyProjectView
               client={props.client}

client/src/components/quicknav/QuickNav.container.jsx

@@ -17,7 +17,7 @@
  */
 
 import { useEffect, useState } from "react";
-import { useHistory } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom-v5-compat";
 
 import { useKgSearchContext } from "../../features/kgSearch/KgSearchContext";
 import {
@@ -73,7 +73,8 @@ export const defaultAnonymousSuggestionQuickBar = {
 };
 
 export function QuickNavContainer({ user }) {
-  const history = useHistory();
+  const location = useLocation();
+  const navigate = useNavigate();
 
   const {
     kgSearchState,
@@ -131,8 +132,8 @@ export function QuickNavContainer({ user }) {
     e.preventDefault();
     setPhrase(currentPhrase);
     refetchLastQueries(e.currentTarget);
-    if (history.location.pathname === "/search") return;
-    history.push("/search");
+    if (location.pathname === "/search") return;
+    navigate("/search");
   };
 
   const onSuggestionsFetchRequested = () => {

client/src/components/quicknav/QuickNav.present.jsx

@@ -16,11 +16,11 @@
  * limitations under the License.
  */
 
+import { faSearch } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Component } from "react";
-import { Link } from "react-router-dom";
 import Autosuggest from "react-autosuggest";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faSearch } from "@fortawesome/free-solid-svg-icons";
+import { Link } from "react-router-dom-v5-compat";
 
 // ? react-autosuggest styles are defined there q_q
 // ? also, the order of import matters here q_q

client/src/dataset/addtoproject/DatasetAddToNewProject.tsx

@@ -23,7 +23,6 @@ import { WarnAlert } from "../../components/Alert";
 import { Loader } from "../../components/Loader";
 import { NewProject } from "../../project/new/ProjectNew.container";
 import AppContext from "../../utils/context/appContext";
-import useLegacySelector from "../../utils/customHooks/useLegacySelector.hook";
 import type {
   AddDatasetHandlers,
   AddDatasetStatus,
@@ -57,7 +56,6 @@ function AddDatasetNewProject({
   const [newProject, setNewProject] = useState<TNewProject | null>(null);
   const setCurrentStatus = handlers.setCurrentStatus;
   const { client } = useContext(AppContext);
-  const user = useLegacySelector((state) => state.stateModel.user);
 
   useEffect(() => setCurrentStatus(null), [setCurrentStatus]);
 
@@ -112,11 +110,8 @@ function AddDatasetNewProject({
     ) ? null : (
       <NewProject
         key="newProject"
-        model={model}
         importingDataset={true}
         startImportDataset={startImportDataset}
-        user={user}
-        client={client}
       />
     );
 

client/src/features/inactiveKgProjects/InactiveKgProjects.tsx

@@ -18,7 +18,7 @@
 
 import { useCallback, useContext, useEffect } from "react";
 import { Balloon, Briefcase } from "react-bootstrap-icons";
-import { Link } from "react-router-dom";
+import { Link } from "react-router-dom-v5-compat";
 import { Button, Table } from "reactstrap";
 
 import { Loader } from "../../components/Loader";
@@ -214,18 +214,13 @@ function InactiveProjectsTable({
   );
 }
 
-interface InactiveKGProjectsPageProps {
-  socket: any; // eslint-disable-line @typescript-eslint/no-explicit-any
-}
-
-interface ProjectsNotIndexedPageProps extends InactiveKGProjectsPageProps {
+interface ProjectsNotIndexedPageProps {
   projectList: InactiveKgProjects[];
 }
 
-function ProjectsNotIndexedPage({
-  projectList,
-  socket,
-}: ProjectsNotIndexedPageProps) {
+function ProjectsNotIndexedPage({ projectList }: ProjectsNotIndexedPageProps) {
+  const { webSocket: socket } = useContext(AppContext);
+
   const dispatch = useAppDispatch();
 
   const activationStatus = useAppSelector(
@@ -345,7 +340,9 @@ function ProjectsNotIndexedPage({
   );
 }
 
-function InactiveKGProjectsPage({ socket }: InactiveKGProjectsPageProps) {
+function InactiveKGProjectsPage() {
+  // { socket }: InactiveKGProjectsPageProps
+
   const user = useLegacySelector((state) => state.stateModel.user);
   const { data, isFetching, isLoading, error } = useGetInactiveProjects(
     user?.data?.id
@@ -382,7 +379,7 @@ function InactiveKGProjectsPage({ socket }: InactiveKGProjectsPageProps) {
   if (projectList.length === 0 || projectList.length === totalCompleted)
     return <AllProjectsIndexed />;
 
-  return <ProjectsNotIndexedPage projectList={projectList} socket={socket} />;
+  return <ProjectsNotIndexedPage projectList={projectList} />;
 }
 
 export default InactiveKGProjectsPage;

client/src/features/inactiveKgProjects/LazyInactiveKGProjectsPage.tsx

@@ -16,17 +16,15 @@
  * limitations under the License.
  */
 
-import { ComponentProps, Suspense, lazy } from "react";
+import { Suspense, lazy } from "react";
 import PageLoader from "../../components/PageLoader";
 
 const InactiveKGProjectsPage = lazy(() => import("./InactiveKgProjects"));
 
-export default function LazyInactiveKGProjectsPage(
-  props: ComponentProps<typeof InactiveKGProjectsPage>
-) {
+export default function LazyInactiveKGProjectsPage() {
   return (
     <Suspense fallback={<PageLoader />}>
-      <InactiveKGProjectsPage {...props} />
+      <InactiveKGProjectsPage />
     </Suspense>
   );
 }

client/src/features/kgSearch/KgSearchContext.tsx

@@ -23,7 +23,7 @@ import {
   useContext,
   useMemo,
 } from "react";
-import { useHistory, useLocation } from "react-router";
+import { useLocation, useNavigate } from "react-router-dom-v5-compat";
 import {
   DateFilterTypes,
   DatesFilter,
@@ -65,7 +65,7 @@ export const KgSearchContextProvider = ({
   children,
 }: KgSearchContextProviderProps) => {
   const location = useLocation();
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const kgSearchState = useMemo(() => {
     const state = searchStringToState(location.search);
@@ -81,9 +81,9 @@ export const KgSearchContextProvider = ({
         typeDate: dates.type ?? DateFilterTypes.all,
         page: 1,
       });
-      history.push({ search });
+      navigate({ search });
     },
-    [history, kgSearchState]
+    [kgSearchState, navigate]
   );
   const setMyProjects = useCallback(() => {
     const search = stateToSearchString({
@@ -93,8 +93,8 @@ export const KgSearchContextProvider = ({
       phrase: "",
       page: 1,
     });
-    history.push({ search });
-  }, [history, kgSearchState]);
+    navigate({ search });
+  }, [kgSearchState, navigate]);
   const setMyDatasets = useCallback(() => {
     const search = stateToSearchString({
       ...kgSearchState,
@@ -103,39 +103,39 @@ export const KgSearchContextProvider = ({
       phrase: "",
       page: 1,
     });
-    history.push({ search });
-  }, [history, kgSearchState]);
+    navigate({ search });
+  }, [kgSearchState, navigate]);
   const setPhrase = useCallback(
     (phrase: string) => {
       const search = stateToSearchString({
         ...kgSearchState,
         phrase,
         page: 1,
       });
-      history.push({ search });
+      navigate({ search });
     },
-    [history, kgSearchState]
+    [kgSearchState, navigate]
   );
   const setPage = useCallback(
     (page: number) => {
       const search = stateToSearchString({ ...kgSearchState, page });
-      history.push({ search });
+      navigate({ search });
     },
-    [history, kgSearchState]
+    [kgSearchState, navigate]
   );
   const setSort = useCallback(
     (sort: SortingOptions) => {
       const search = stateToSearchString({ ...kgSearchState, sort, page: 1 });
-      history.push({ search });
+      navigate({ search });
     },
-    [history, kgSearchState]
+    [kgSearchState, navigate]
   );
   const setType = useCallback(
     (type: TypeEntitySelection) => {
       const search = stateToSearchString({ ...kgSearchState, type, page: 1 });
-      history.push({ search });
+      navigate({ search });
     },
-    [history, kgSearchState]
+    [kgSearchState, navigate]
   );
   const setUserRole = useCallback(
     (role: UserRoles) => {
@@ -144,9 +144,9 @@ export const KgSearchContextProvider = ({
         role,
         page: 1,
       });
-      history.push({ search });
+      navigate({ search });
     },
-    [history, kgSearchState]
+    [kgSearchState, navigate]
   );
   const setVisibility = useCallback(
     (visibility: VisibilitiesFilter) => {
@@ -155,14 +155,14 @@ export const KgSearchContextProvider = ({
         visibility,
         page: 1,
       });
-      history.push({ search });
+      navigate({ search });
     },
-    [history, kgSearchState]
+    [kgSearchState, navigate]
   );
   const reset = useCallback(() => {
     const search = stateToSearchString(defaultSearchState);
-    history.push({ search });
-  }, [history]);
+    navigate({ search });
+  }, [navigate]);
 
   const reducers = {
     setDates,