From 3a56f54b996187890aa8eea56179b32331e84bd4 Mon Sep 17 00:00:00 2001
From: Flora Thiebaut <flora.thiebaut@sdsc.ethz.ch>
Date: Tue, 14 Jan 2025 14:46:03 +0100
Subject: [PATCH] refactor(client): some migration step for `react-router@v6`

---
 .../src/project/new/ProjectNew.container.jsx  | 47 ++++++++++++-------
 1 file changed, 30 insertions(+), 17 deletions(-)

diff --git a/client/src/project/new/ProjectNew.container.jsx b/client/src/project/new/ProjectNew.container.jsx
index 6680c5b15c..b0c1bce480 100644
--- a/client/src/project/new/ProjectNew.container.jsx
+++ b/client/src/project/new/ProjectNew.container.jsx
@@ -31,8 +31,9 @@ import {
   useRef,
   useState,
 } from "react";
-import { useHistory } from "react-router";
+import { useNavigate } from "reafct-router-dom-v5-compat";
 
+import { useLoginUrl } from "../../authentication/useLoginUrl.hook";
 import { Loader } from "../../components/Loader";
 import { newProjectSchema } from "../../model/RenkuModels";
 import AppContext from "../../utils/context/appContext";
@@ -57,7 +58,6 @@ import {
   checkTitleDuplicates,
   validateTitle,
 } from "./ProjectNew.state";
-import { useLoginUrl } from "../../authentication/useLoginUrl.hook";
 
 const CUSTOM_REPO_NAME = "Custom";
 
@@ -90,18 +90,27 @@ function ForkProject(props) {
 
   const loginUrl = useLoginUrl();
 
-  const history = useHistory();
+  // const history = useHistory();
+
+  // const location = useLocation();
+  const navigate = useNavigate();
+
+  // useEffect(() => {
+  //   if (
+  //     !logged &&
+  //     typeof window === "object" &&
+  //     typeof window.location.assign === "function"
+  //   ) {
+  //     window.location.assign(loginUrl);
+  //   }
+  //   // This only needs to run once
+  // }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
-    if (
-      !logged &&
-      typeof window === "object" &&
-      typeof window.location.assign === "function"
-    ) {
-      window.location.assign(loginUrl);
+    if (!logged) {
+      navigate(loginUrl);
     }
-    // This only needs to run once
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [logged, loginUrl, navigate]);
 
   // Monitor changes to projects list
   useEffect(() => {
@@ -253,7 +262,8 @@ function ForkProject(props) {
 
       if (mounted.current && !visibilityError) {
         // addForkNotification(notifications, newUrl, newProjectData, startingLocation, true, false);
-        history.push(newUrl);
+        // history.push(newUrl);
+        navigate(newUrl);
       } else if (mounted.current && visibilityError) {
         setForking(false); // finish forking
         setForkUrl(newUrl); // allow display the button to go to the forked project
@@ -379,7 +389,9 @@ function NewProjectWrapper(props) {
 function NewProject(props) {
   const { model, importingDataset, startImportDataset, coordinator } = props;
   const { params } = useContext(AppContext);
-  const history = useHistory();
+  // const history = useHistory();
+  // const location = useLocation();
+  const navigate = useNavigate();
   const user = useLegacySelector((state) => state.stateModel.user);
   const newProject = useLegacySelector((state) => state.stateModel.newProject);
   const [namespace, setNamespace] = useState(null);
@@ -450,14 +462,14 @@ function NewProject(props) {
         setAutomatedData(data);
         if (!importingDataset) {
           const newUrl = Url.get(Url.pages.project.new);
-          history.push(newUrl);
+          navigate(newUrl);
         }
       }
     } catch (e) {
       // This usually happens when the link is wrong and the base64 string is broken
       coordinator.setAutomated(null, e);
     }
-  }, [coordinator, importingDataset, history]);
+  }, [coordinator, importingDataset, navigate]);
 
   const removeAutomated = useCallback(
     (manuallyReset = true) => {
@@ -614,7 +626,8 @@ function NewProject(props) {
 
   const goToProject = () => {
     const slug = coordinator?.getSlugAndReset();
-    history.push(`/projects/${slug}`);
+    // history.push(`/projects/${slug}`);
+    navigate(`/projects/${slug}`);
   };
 
   const sendProjectToAddDataset = (projectPath) => {
@@ -641,7 +654,7 @@ function NewProject(props) {
         if (!creation.kgError && !creation.projectError) {
           const slug = `${creation.newNamespace}/${creation.newNameSlug}`;
           if (importingDataset) sendProjectToAddDataset(slug);
-          else history.push(`/projects/${slug}`);
+          else navigate(`/projects/${slug}`);
           resetCreationResult();
         }
       }