AKR:OTR:VKT:YKI:SHARED(Frontend) OPHAKRKEH-515 jest migration test fixes

frontend/package.json

@@ -46,7 +46,7 @@
     "react-dom": "^18.2.0",
     "react-i18next": "^13.3.1",
     "react-redux": "^8.1.3",
-    "react-router-dom": "6.18.0",
+    "react-router-dom": "6.13.0",
     "redux-saga": "^1.2.3"
   },
   "devDependencies": {
@@ -110,14 +110,7 @@
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1"
   },
-  "@availableBiggerUpdates": [
-    "loader-utils",
-    "@mui/x-date-pickers",
-    "i18next",
-    "i18next-browser-languagedetector",
-    "react-router-dom",
-    "prettier + eslint-plugin-prettier",
-    "stylelint + configs",
-    "typescript"
-  ]
+  "@comments": {
+    "react-router-dom": "Do not update past 6.13.0 until useBlocker is fixed, see https://github.com/remix-run/react-router/issues/11155"
+  }
 }

frontend/packages/akr/package.json

@@ -22,6 +22,6 @@
     "akr:tslint": "yarn g:tsc --pretty --noEmit"
   },
   "dependencies": {
-    "shared": "npm:@opetushallitus/[email protected].31"
+    "shared": "npm:@opetushallitus/[email protected].32"
   }
 }

frontend/packages/otr/package.json

@@ -25,6 +25,6 @@
     "otr:tslint": "yarn g:tsc --pretty --noEmit"
   },
   "dependencies": {
-    "shared": "npm:@opetushallitus/[email protected].31"
+    "shared": "npm:@opetushallitus/[email protected].32"
   }
 }

frontend/packages/shared/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opetushallitus/kieli-ja-kaantajatutkinnot.shared",
-  "version": "1.9.31",
+  "version": "1.9.32",
   "description": "Shared Frontend Package",
   "exports": {
     "./components": "./src/components/index.tsx",

frontend/packages/shared/src/components/ScrollToTop/ScrollToTop.tsx

@@ -1,20 +1,12 @@
-import { History } from 'history';
-import { useContext, useLayoutEffect } from 'react';
-import { UNSAFE_NavigationContext } from 'react-router-dom';
+import { useLayoutEffect } from 'react';
+import { useLocation } from 'react-router-dom';
 
 export const ScrollToTop = () => {
-  // FIXME: UNSAFE_NavigationContext is no longer allowed in react router 6
-  /*
-  const navigator = useContext(UNSAFE_NavigationContext).navigator as History;
+  const location = useLocation();
+
   useLayoutEffect(() => {
-    const unlisten = navigator.listen(({ action }) => {
-      if (action !== 'POP') {
-        window.scrollTo({ left: 0, top: 0 });
-      }
-    });
+    window.scrollTo({ left: 0, top: 0 });
+  }, [location]);
 
-    return unlisten;
-  }, [navigator]);
-  */
   return null;
 };

frontend/packages/shared/src/hooks/useNavigationProtection/useCallbackPrompt.ts

@@ -1,10 +1,8 @@
-import { Blocker, Transition } from 'history';
 import { useCallback, useEffect, useState } from 'react';
-import { useLocation, useNavigate } from 'react-router';
-
-import { useBlocker } from './useBlocker';
 
 export const useCallbackPrompt = (when: boolean, baseUrl?: string) => {
+
+  /*
   const navigate = useNavigate();
   const location = useLocation();
   const [showPrompt, setShowPrompt] = useState(false);
@@ -65,6 +63,6 @@ export const useCallbackPrompt = (when: boolean, baseUrl?: string) => {
   }, [isNavigationConfirmed, blockedTransition, navigate, isWithinBaseUrl]);
 
   useBlocker(handleBlockedNavigation, when, baseUrl);
-
+  */
   return { showPrompt, confirmNavigation, cancelNavigation };
 };

frontend/packages/shared/src/hooks/useNavigationProtection/useNavigationProtection.ts

@@ -1,6 +1,7 @@
-import { useEffect } from 'react';
+import { useEffect, useCallback } from 'react';
+import { flushSync } from "react-dom";
 
-import { useCallbackPrompt } from './useCallbackPrompt';
+import { unstable_useBlocker as useBlocker } from 'react-router-dom';
 
 export const useNavigationProtection = (
   when: boolean,
@@ -10,14 +11,26 @@ export const useNavigationProtection = (
   ) => void,
   baseUrl?: string
 ) => {
-  const { showPrompt, confirmNavigation, cancelNavigation } = useCallbackPrompt(
-    when,
-    baseUrl
-  );
+
+  const shouldBlock =
+    ({ currentLocation, nextLocation, historyAction }) =>
+      when &&
+      !nextLocation.pathname.includes(baseUrl) &&
+      currentLocation.pathname !== nextLocation.pathname;
+
+  const blocker = useBlocker(shouldBlock);
+
+  const confirmNavigation = useCallback(() => {
+    blocker.proceed();
+  }, [blocker]);
+
+  const cancelNavigation = useCallback(() => {
+    blocker.reset();
+  }, [blocker]);
 
   useEffect(() => {
-    if (showPrompt) {
+    if (blocker.state === "blocked") {
       showConfirmationDialog(confirmNavigation, cancelNavigation);
     }
-  }, [showPrompt, confirmNavigation, cancelNavigation, showConfirmationDialog]);
+  }, [blocker, confirmNavigation, cancelNavigation, showConfirmationDialog]);
 };

frontend/packages/vkt/package.json

@@ -26,6 +26,6 @@
   },
   "dependencies": {
     "reduxjs-toolkit-persist": "^7.2.1",
-    "shared": "npm:@opetushallitus/[email protected].31"
+    "shared": "npm:@opetushallitus/[email protected].32"
   }
 }