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

client/src/App.jsx

@@ -161,7 +161,7 @@ function CentralContentContainer(props) {
               model={props.model}
             />
           </Route>
-          <Route path="/datasets/:identifier">
+          <CompatRoute path="/datasets/:identifier">
             <LazyShowDataset
               insideProject={false}
               client={props.client}
@@ -175,7 +175,7 @@ function CentralContentContainer(props) {
               logged={props.user.logged}
               model={props.model}
             />
-          </Route>
+          </CompatRoute>
           <CompatRoute path="/datasets">
             <Redirect to="/search?type=dataset" />
           </CompatRoute>

client/src/dataset/Dataset.container.jsx

@@ -17,15 +17,16 @@
  */
 
 import { useEffect, useState } from "react";
-import { useHistory, useParams } from "react-router";
+// import { useHistory, useParams } from "react-router";
+import { useLocation, useParams } from "react-router-dom-v5-compat";
 
 import { useCoreSupport } from "../features/project/useProjectCoreSupport";
 import useLegacySelector from "../utils/customHooks/useLegacySelector.hook";
 import DatasetView from "./Dataset.present";
 
 export default function ShowDataset(props) {
-  const history = useHistory();
-  const location = history.location;
+  // const history = useHistory();
+  const location = useLocation();
 
   const { identifier: identifier_ } = useParams();
   const identifier = identifier_?.replaceAll("-", "");
@@ -160,7 +161,7 @@ export default function ShowDataset(props) {
       fetchError={dataset?.fetchError}
       fetchedKg={dataset?.fetched}
       fileContentUrl={props.fileContentUrl}
-      history={history}
+      // history={history}
       identifier={identifier}
       insideProject={props.insideProject}
       lineagesUrl={props.lineagesUrl}

client/src/dataset/Dataset.present.jsx

@@ -18,10 +18,11 @@
 
 import { faPen, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { isEmpty, groupBy } from "lodash-es";
+import { groupBy, isEmpty } from "lodash-es";
 import { useState } from "react";
 import { Helmet } from "react-helmet";
-import { Link, useHistory } from "react-router-dom";
+// import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom-v5-compat";
 import {
   Button,
   Card,
@@ -42,16 +43,16 @@ import { CoreErrorAlert } from "../components/errors/CoreErrorAlert";
 import { CoreError } from "../components/errors/CoreErrorHelpers";
 import LazyRenkuMarkdown from "../components/markdown/LazyRenkuMarkdown";
 import DeleteDataset from "../project/datasets/delete";
+import useLegacySelector from "../utils/customHooks/useLegacySelector.hook";
 import { toHumanDateTime } from "../utils/helpers/DateTimeUtils";
+import { getEntityImageUrl } from "../utils/helpers/HelperFunctions";
 import { Url } from "../utils/helpers/url";
 import { DatasetError } from "./DatasetError";
 import {
   cleanModifyLocation,
   getDatasetAuthors,
   getUpdatedDatasetImage,
 } from "./DatasetFunctions";
-import { getEntityImageUrl } from "../utils/helpers/HelperFunctions";
-import useLegacySelector from "../utils/customHooks/useLegacySelector.hook";
 
 function DisplayFiles(props) {
   if (!props.files || !props.files?.hasPart) return null;
@@ -297,10 +298,13 @@ function ErrorAfterCreation(props) {
 }
 
 function AddToProjectButton({ insideKg, locked, logged, identifier }) {
-  const history = useHistory();
+  // const history = useHistory();
+  const navigate = useNavigate();
+
   const addDatasetUrl = `/datasets/${identifier}/add`;
   const goToAddToProject = () => {
-    if (history) history.push(addDatasetUrl);
+    // if (history) history.push(addDatasetUrl);
+    navigate(addDatasetUrl);
   };
 
   const tooltip =
@@ -591,7 +595,7 @@ export default function DatasetView(props) {
             client={props.client}
             dataset={dataset}
             externalUrl={props.externalUrl}
-            history={props.history}
+            // history={props.history}
             metadataVersion={props.metadataVersion}
             modalOpen={deleteDatasetModalOpen}
             projectPathWithNamespace={props.projectPathWithNamespace}

client/src/project/datasets/delete/DeleteDataset.tsx

@@ -17,27 +17,28 @@
  */
 
 import { useEffect, useState } from "react";
-import { useHistory } from "react-router";
+// import { useHistory } from "react-router";
+import { useNavigate } from "react-router-dom-v5-compat";
 import {
-  Row,
+  Button,
   Col,
+  FormText,
   Modal,
-  ModalHeader,
   ModalBody,
-  Button,
-  FormText,
+  ModalHeader,
+  Row,
 } from "reactstrap";
 
 import { CoreErrorAlert } from "../../../components/errors/CoreErrorAlert";
 import { Loader } from "../../../components/Loader";
-import type { DatasetCore } from "../../../features/project/project.types";
 import { useDeleteDatasetMutation } from "../../../features/datasets/datasetsCore.api";
+import type { DatasetCore } from "../../../features/project/project.types";
+import { Url } from "../../../utils/helpers/url";
 import {
   CoreErrorContent,
   CoreErrorResponse,
   CoreVersionUrl,
 } from "../../../utils/types/coreService.types";
-import { Url } from "../../../utils/helpers/url";
 
 function ModalContent({
   closeModal,
@@ -108,7 +109,7 @@ type DatasetDeleteModalProps = {
   closeModal: () => void;
   dataset: DeleteDatasetProps["dataset"];
   deleteDataset: () => void;
-  history: DeleteDatasetProps["history"];
+  // history: DeleteDatasetProps["history"];
   modalOpen: DeleteDatasetProps["modalOpen"];
   serverErrors: CoreErrorContent | string | undefined;
   submitLoader: { isSubmitting: boolean; text: string | undefined };
@@ -141,7 +142,7 @@ export type DeleteDatasetSuccessResponse = {
 
 export interface DeleteDatasetProps extends CoreVersionUrl {
   dataset: DatasetCore;
-  history: ReturnType<typeof useHistory>;
+  // history: ReturnType<typeof useHistory>;
   externalUrl: string;
   onCancel: () => void;
   modalOpen: boolean;
@@ -151,6 +152,8 @@ export interface DeleteDatasetProps extends CoreVersionUrl {
 }
 
 function DeleteDataset(props: DeleteDatasetProps) {
+  const navigate = useNavigate();
+
   const [serverErrors, setServerErrors] = useState<
     CoreErrorContent | string | undefined
   >(undefined);
@@ -166,27 +169,33 @@ function DeleteDataset(props: DeleteDatasetProps) {
   });
 
   // handle deleting dataset
-  useEffect(() => {
-    if (deleteDatasetStatus.error && "data" in deleteDatasetStatus.error) {
-      const errorResponse = deleteDatasetStatus.error.data as CoreErrorResponse;
-      setSubmitting(false);
-      setServerErrors(errorResponse.error);
-    } else if (deleteDatasetStatus.error) {
-      // ? This cases is unlikely to happen with the current implementation of renku-core
-      setSubmitting(false);
-      const errorMessage =
-        "There was an unexpected problem deleting the dataset: " +
-        deleteDatasetStatus.error.toString();
-      setServerErrors(errorMessage);
-    } else if (deleteDatasetStatus.isSuccess) {
-      setSubmitting(false);
-      setSubmitLoaderText("Dataset deleted, you will be redirected soon...");
-      props.history.push({
-        pathname: projectDatasetsUrl,
-        state: { reload: true },
-      });
-    }
-  }, [deleteDatasetStatus, props.history, projectDatasetsUrl]);
+  useEffect(
+    () => {
+      if (deleteDatasetStatus.error && "data" in deleteDatasetStatus.error) {
+        const errorResponse = deleteDatasetStatus.error
+          .data as CoreErrorResponse;
+        setSubmitting(false);
+        setServerErrors(errorResponse.error);
+      } else if (deleteDatasetStatus.error) {
+        // ? This cases is unlikely to happen with the current implementation of renku-core
+        setSubmitting(false);
+        const errorMessage =
+          "There was an unexpected problem deleting the dataset: " +
+          deleteDatasetStatus.error.toString();
+        setServerErrors(errorMessage);
+      } else if (deleteDatasetStatus.isSuccess) {
+        setSubmitting(false);
+        setSubmitLoaderText("Dataset deleted, you will be redirected soon...");
+        // props.history.push({
+        //   pathname: projectDatasetsUrl,
+        //   state: { reload: true },
+        // });
+        navigate({ pathname: projectDatasetsUrl }, { state: { reload: true } });
+      }
+    },
+    [deleteDatasetStatus, navigate, projectDatasetsUrl]
+    // [deleteDatasetStatus, props.history, projectDatasetsUrl]
+  );
 
   const localDeleteDataset = () => {
     setSubmitting(true);
@@ -216,7 +225,7 @@ function DeleteDataset(props: DeleteDatasetProps) {
       deleteDataset={localDeleteDataset}
       serverErrors={serverErrors}
       submitLoader={{ isSubmitting, text: submitLoaderText }}
-      history={props.history}
+      // history={props.history}
     />
   );
 }