Merge pull request #2969 from navikt/fjern-react-router-prompt

Fjerne avhengigheten til react router prompt, og forenkle bruken til …

package.json

@@ -72,7 +72,6 @@
         "react-dom": "^18.3.1",
         "react-pdf": "9.1.1",
         "react-router-dom": "7.0.2",
-        "react-router-prompt": "^0.7.1",
         "react-select": "^5.8.3",
         "styled-components": "^6.1.13",
         "svg-inline-loader": "^0.8.2",

src/frontend/App/hooks/felles/useRedirectEtterLagring.ts

@@ -3,7 +3,7 @@ import { useApp } from '../../context/AppContext';
 import { useNavigate } from 'react-router-dom';
 
 /**
- * Denne trengs fordi vi bruker react-router-prompt for å sperre for å navigere når man har ulagret data.
+ * Denne trengs fordi vi bruker react-router for å sperre for å navigere når man har ulagret data.
  * Den sperren gjør at vi heller ikke klarer å navigere videre etter lagring og nullstilling av ulagret data.
  * For å omgå sperren må vi vente på at ulagretData er satt til false samtidig som vi sier at vi ønsker å navigere videre.
  * Dette fungerer ikke inni komponenten, så vi må ha denne hooken for å omgå problemet.

src/frontend/Felles/Modal/UlagretDataModal.tsx

@@ -1,35 +1,65 @@
-import React, { FC } from 'react';
+import React, { FC, useCallback } from 'react';
 import { useApp } from '../../App/context/AppContext';
 import { ModalWrapper } from './ModalWrapper';
-import ReactRouterPrompt from 'react-router-prompt';
+import { BlockerFunction, useBeforeUnload, useBlocker } from 'react-router-dom';
 
 export const UlagretDataModal: FC = () => {
     const { nullstillIkkePersisterteKomponenter, ulagretData } = useApp();
+    const skalBlokkere = React.useCallback<BlockerFunction>(
+        ({ currentLocation, nextLocation }) =>
+            ulagretData && currentLocation.pathname !== nextLocation.pathname,
+        [ulagretData]
+    );
+    const blocker = useBlocker(skalBlokkere);
+
+    React.useEffect(() => {
+        if (blocker.state === 'blocked' && ulagretData === false) {
+            blocker.reset();
+        }
+    }, [blocker, ulagretData]);
+
+    const onAvbryt = () => blocker.state === 'blocked' && blocker.reset();
+    const onForlatSiden = () => blocker.state === 'blocked' && blocker.proceed();
+
+    /**
+     * Denne trengs for å fange opp når noen refresher siden eller prøver å gå ut av selve siden.
+     * Da kommer nettleserens innebygde prompt opp
+     */
+    useBeforeUnload(
+        useCallback(
+            (event) => {
+                if (ulagretData) {
+                    event.preventDefault();
+                }
+            },
+            [ulagretData]
+        ),
+        { capture: true }
+    );
+
     return (
-        <ReactRouterPrompt when={ulagretData}>
-            {({ isActive, onConfirm, onCancel }) => (
-                <ModalWrapper
-                    tittel={
-                        'Du har ikke lagret dine siste endringer og vil miste disse om du forlater siden'
-                    }
-                    visModal={isActive}
-                    onClose={onCancel}
-                    aksjonsknapper={{
-                        hovedKnapp: {
-                            onClick: onCancel,
-                            tekst: 'Gå tilbake for å lagre',
-                        },
-                        lukkKnapp: {
-                            onClick: () => {
-                                onConfirm();
-                                setTimeout(nullstillIkkePersisterteKomponenter, 10);
-                            },
-                            tekst: 'Forlat siden',
+        blocker.state === 'blocked' && (
+            <ModalWrapper
+                tittel={
+                    'Du har ikke lagret dine siste endringer og vil miste disse om du forlater siden'
+                }
+                visModal={true}
+                onClose={onAvbryt}
+                aksjonsknapper={{
+                    hovedKnapp: {
+                        onClick: onAvbryt,
+                        tekst: 'Gå tilbake for å lagre',
+                    },
+                    lukkKnapp: {
+                        onClick: () => {
+                            onForlatSiden();
+                            setTimeout(nullstillIkkePersisterteKomponenter, 10);
                         },
-                        marginTop: 4,
-                    }}
-                />
-            )}
-        </ReactRouterPrompt>
+                        tekst: 'Forlat siden',
+                    },
+                    marginTop: 4,
+                }}
+            />
+        )
     );
 };

yarn.lock

@@ -6554,11 +6554,6 @@ [email protected]:
   dependencies:
     react-router "7.0.2"
 
-react-router-prompt@^0.7.1:
-  version "0.7.1"
-  resolved "https://registry.yarnpkg.com/react-router-prompt/-/react-router-prompt-0.7.1.tgz#1e5326d221824d092f47876147704de2447d5001"
-  integrity sha512-U8G2gPMDkS6fdmcHebhkgKv9v/oxsErQFVQYuQ/DXKD/CUSxvXPQpikE//Ij+vZdXleOJwW3RJIkoa2ctVqnuw==
-
 [email protected]:
   version "7.0.2"
   resolved "https://registry.yarnpkg.com/react-router/-/react-router-7.0.2.tgz#2820e107cb8cec8acc5db15a17470c056ea86022"