From a28d85732f6d538fc5e6bcd1733a34c37c606d8d Mon Sep 17 00:00:00 2001 From: charliemidtlyng Date: Tue, 17 Dec 2024 12:08:24 +0100 Subject: [PATCH 1/2] =?UTF-8?q?Fjerne=20avhengigheten=20til=20react=20rout?= =?UTF-8?q?er=20prompt,=20og=20forenkle=20bruken=20til=20v=C3=A5rt=20behov?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 - .../hooks/felles/useRedirectEtterLagring.ts | 2 +- .../Felles/Modal/UlagretDataModal.tsx | 83 +++++++++++++------ yarn.lock | 5 -- 4 files changed, 58 insertions(+), 33 deletions(-) diff --git a/package.json b/package.json index cbf11bf99..291632b44 100644 --- a/package.json +++ b/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", diff --git a/src/frontend/App/hooks/felles/useRedirectEtterLagring.ts b/src/frontend/App/hooks/felles/useRedirectEtterLagring.ts index 2b31b6f0e..46285ec65 100644 --- a/src/frontend/App/hooks/felles/useRedirectEtterLagring.ts +++ b/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. diff --git a/src/frontend/Felles/Modal/UlagretDataModal.tsx b/src/frontend/Felles/Modal/UlagretDataModal.tsx index 64e37699f..3d152bcc8 100644 --- a/src/frontend/Felles/Modal/UlagretDataModal.tsx +++ b/src/frontend/Felles/Modal/UlagretDataModal.tsx @@ -1,35 +1,66 @@ -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( + ({ 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(); + event.returnValue = 'Changes you made may not be saved.'; + } + }, + [ulagretData] + ), + { capture: true } + ); + return ( - - {({ isActive, onConfirm, onCancel }) => ( - { - onConfirm(); - setTimeout(nullstillIkkePersisterteKomponenter, 10); - }, - tekst: 'Forlat siden', + blocker.state === 'blocked' && ( + { + onForlatSiden(); + setTimeout(nullstillIkkePersisterteKomponenter, 10); }, - marginTop: 4, - }} - /> - )} - + tekst: 'Forlat siden', + }, + marginTop: 4, + }} + /> + ) ); }; diff --git a/yarn.lock b/yarn.lock index 32d886d0f..b70991b2a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6554,11 +6554,6 @@ react-router-dom@7.0.2: 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== - react-router@7.0.2: version "7.0.2" resolved "https://registry.yarnpkg.com/react-router/-/react-router-7.0.2.tgz#2820e107cb8cec8acc5db15a17470c056ea86022" From ccfb979de0ce306897eb782d186db1739d2997ee Mon Sep 17 00:00:00 2001 From: charliemidtlyng Date: Wed, 18 Dec 2024 09:30:19 +0100 Subject: [PATCH 2/2] Fjern bruk av deprecated event-kode --- src/frontend/Felles/Modal/UlagretDataModal.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/frontend/Felles/Modal/UlagretDataModal.tsx b/src/frontend/Felles/Modal/UlagretDataModal.tsx index 3d152bcc8..97d570342 100644 --- a/src/frontend/Felles/Modal/UlagretDataModal.tsx +++ b/src/frontend/Felles/Modal/UlagretDataModal.tsx @@ -30,7 +30,6 @@ export const UlagretDataModal: FC = () => { (event) => { if (ulagretData) { event.preventDefault(); - event.returnValue = 'Changes you made may not be saved.'; } }, [ulagretData]