From 4e64f3a2fcd4d80acea492890ffe479ebd4afba6 Mon Sep 17 00:00:00 2001 From: Peter Brottveit Bock Date: Fri, 13 Oct 2023 15:33:27 +0200 Subject: [PATCH 1/7] =?UTF-8?q?Fjern=20LoginContext=20-=20kun=20enkel=20bo?= =?UTF-8?q?undary=20p=C3=A5=20topniv=C3=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Vi har ikke lengere uinnloggede sider. Fjerner context. --- src/App/App.tsx | 228 ++++++++++----------- src/App/LoginBoundary.tsx | 26 ++- src/App/LoginProvider.tsx | 35 ---- src/utils/funksjonerForAmplitudeLogging.ts | 30 ++- 4 files changed, 136 insertions(+), 183 deletions(-) delete mode 100644 src/App/LoginProvider.tsx diff --git a/src/App/App.tsx b/src/App/App.tsx index d7416b114..a265cd1d6 100644 --- a/src/App/App.tsx +++ b/src/App/App.tsx @@ -1,8 +1,8 @@ -import React, { FunctionComponent, useContext, useEffect, useState } from 'react'; +import React, { FunctionComponent, useEffect, useState } from 'react'; import { BrowserRouter, Route, Link as RouterLink, Routes, useLocation } from 'react-router-dom'; import { basename } from '../paths'; import Hovedside from './Hovedside/Hovedside'; -import LoginBoundary from './LoginBoundary'; +import { LoginBoundary } from './LoginBoundary'; import { AlertsProvider } from './Alerts/Alerts'; import { OrganisasjonerOgTilgangerProvider } from './OrganisasjonerOgTilgangerProvider'; import { OrganisasjonsDetaljerProvider } from './OrganisasjonDetaljerProvider'; @@ -10,7 +10,6 @@ import InformasjonOmBedrift from './InformasjonOmBedrift/InformasjonOmBedrift'; import { ManglerTilgangContainer } from './Hovedside/ManglerTilgangContainer/ManglerTilgangContainer'; import { loggSidevisning } from '../utils/funksjonerForAmplitudeLogging'; import './App.css'; -import { Innlogget, LoginContext, LoginProvider } from './LoginProvider'; import { NotifikasjonWidgetProvider } from '@navikt/arbeidsgiver-notifikasjon-widget'; import Banner from './HovedBanner/HovedBanner'; import { Saksoversikt } from './Hovedside/Sak/Saksoversikt/Saksoversikt'; @@ -29,13 +28,10 @@ const miljø = gittMiljo<'local' | 'labs' | 'dev' | 'prod'>({ const AmplitudeSidevisningEventLogger: FunctionComponent = (props) => { const location = useLocation(); - const { innlogget } = useContext(LoginContext); useEffect(() => { - if (innlogget !== Innlogget.LASTER) { - loggSidevisning(location.pathname, innlogget); - } - }, [location.pathname, innlogget]); + loggSidevisning(location.pathname); + }, [location.pathname]); return <>{props.children}; }; @@ -62,7 +58,7 @@ const App: FunctionComponent = () => { revalidateOnFocus: false, }} > - + { - - - - - - - - - } - /> - - - - } - /> - - - - } - /> - - - - - } - /> - - - - } - /> - + + + + + + + + } + /> + + + + } + /> + + + + } + /> + + + + + } + /> + + + + } + /> + + {' '} + Finner ikke siden.{' '} + {' '} - Finner ikke siden.{' '} - - {' '} - Gå til Min side - arbeidsgiver - {' '} - - } - /> - - - - - + Gå til Min side + arbeidsgiver + {' '} + + } + /> + + + + } /> - + ); diff --git a/src/App/LoginBoundary.tsx b/src/App/LoginBoundary.tsx index fab8a7263..2e910da95 100644 --- a/src/App/LoginBoundary.tsx +++ b/src/App/LoginBoundary.tsx @@ -1,18 +1,28 @@ -import React, { FunctionComponent, useContext } from 'react'; +import React, { FunctionComponent, useContext, useEffect, useState } from 'react'; import { SpinnerMedBanner } from './Spinner'; -import { Innlogget, LoginContext } from './LoginProvider'; +import { sjekkInnlogget } from '../api/dnaApi'; -const LoginBoundary: FunctionComponent = props => { - const {innlogget} = useContext(LoginContext) +export const LoginBoundary: FunctionComponent = (props) => { + const [innlogget, setInnlogget] = useState(Innlogget.LASTER); + + useEffect(() => { + sjekkInnlogget().then((innloggetResultat) => { + setInnlogget(innloggetResultat ? Innlogget.INNLOGGET : Innlogget.IKKE_INNLOGGET); + }); + }, []); if (innlogget === Innlogget.INNLOGGET) { - return <>{props.children} + return <>{props.children}; } else if (innlogget === Innlogget.IKKE_INNLOGGET) { window.location.href = '/min-side-arbeidsgiver/redirect-til-login'; - return null + return null; } else { - return + return ; } }; -export default LoginBoundary; +export enum Innlogget { + LASTER, + IKKE_INNLOGGET, + INNLOGGET, +} diff --git a/src/App/LoginProvider.tsx b/src/App/LoginProvider.tsx deleted file mode 100644 index 3322c7d7f..000000000 --- a/src/App/LoginProvider.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import React, { FunctionComponent, useEffect, useState } from 'react'; -import { sjekkInnlogget } from '../api/dnaApi'; - -export enum Innlogget { - LASTER, - IKKE_INNLOGGET, - INNLOGGET, -} - -interface Context { - innlogget: Innlogget -} - -export const LoginContext = React.createContext({ - innlogget: Innlogget.LASTER -}); - -export const LoginProvider: FunctionComponent = props => { - const [innlogget, setInnlogget] = useState(Innlogget.LASTER); - - useEffect(() => { - sjekkInnlogget() - .then(innloggetResultat => { - setInnlogget(innloggetResultat ? Innlogget.INNLOGGET : Innlogget.IKKE_INNLOGGET) - }) - }, []); - - const state = { - innlogget: innlogget - }; - - return - {props.children} - -}; diff --git a/src/utils/funksjonerForAmplitudeLogging.ts b/src/utils/funksjonerForAmplitudeLogging.ts index a2594ffac..2801dee6d 100644 --- a/src/utils/funksjonerForAmplitudeLogging.ts +++ b/src/utils/funksjonerForAmplitudeLogging.ts @@ -1,6 +1,5 @@ import amplitude from '../utils/amplitude'; import { OrganisasjonInfo } from '../App/OrganisasjonerOgTilgangerProvider'; -import { Innlogget } from '../App/LoginProvider'; import { basename } from '../paths'; import { Enhet, hentUnderenhet } from '../api/enhetsregisteretApi'; import { useLocation } from 'react-router-dom'; @@ -23,10 +22,10 @@ interface EregInfo { const baseUrl = `https://arbeidsgiver.nav.no${basename}`; -export const loggSidevisning = (pathname: string, innlogget: Innlogget) => { +export const loggSidevisning = (pathname: string) => { amplitude.logEvent('sidevisning', { url: `${baseUrl}${pathname}`, - innlogget: innlogget === Innlogget.INNLOGGET, + innlogget: true, }); }; @@ -63,21 +62,19 @@ const finnSektorNavn = (eregOrg: Enhet) => { const hentInfoFraEreg = async (organisasjon: OrganisasjonInfo): Promise => { try { - const underenhet = await hentUnderenhet(organisasjon.organisasjon.OrganizationNumber) + const underenhet = await hentUnderenhet(organisasjon.organisasjon.OrganizationNumber); if (underenhet === undefined) { - return undefined + return undefined; } const antallAnsatte = finnAntallAnsattebøtte(Number(underenhet.antallAnsatte)); const sektor = finnSektorNavn(underenhet); return { antallAnsatte, sektor }; - } catch(e) { + } catch (e) { return undefined; } }; -export const loggBedriftValgtOgTilganger = async ( - org: OrganisasjonInfo | undefined, -) => { +export const loggBedriftValgtOgTilganger = async (org: OrganisasjonInfo | undefined) => { if (org === undefined) return; let tilgangskombinasjon = ''; @@ -119,7 +116,7 @@ export const loggNavigasjon = ( destinasjon: string | undefined, /* hvilken knapp sum ble trykket. burde være unik for siden. */ lenketekst: string, - currentPagePath?: string, + currentPagePath?: string ) => { loggNavigasjonTags(destinasjon, lenketekst, currentPagePath ?? '', {}); }; @@ -129,7 +126,7 @@ export const loggNavigasjonTags = ( /* hvilken knapp sum ble trykket. burde være unik for siden. */ lenketekst: string, currentPagePath: string, - tags: Record, + tags: Record ) => { if (destinasjon !== undefined && destinasjon !== '') { const { origin, pathname } = new URL(destinasjon, baseUrl); @@ -143,15 +140,14 @@ export const loggNavigasjonTags = ( ...tags, }; amplitude.logEvent('navigere', navigasjonsInfo); -} - +}; export const useLoggKlikk = () => { - const {pathname} = useLocation() + const { pathname } = useLocation(); return (knapp: string, annet: Record = {}) => amplitude.logEvent('klikk', { knapp, pathname, - ...annet - }) -} + ...annet, + }); +}; From 8784e768042a8c48ffd4a8df7984deae4015a624 Mon Sep 17 00:00:00 2001 From: Peter Brottveit Bock Date: Fri, 13 Oct 2023 16:00:59 +0200 Subject: [PATCH 2/7] =?UTF-8?q?Flytt=20BrowserRouter=20h=C3=B8yere=20opp?= =?UTF-8?q?=20i=20treet?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App/App.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/App/App.tsx b/src/App/App.tsx index a265cd1d6..2e9bff10a 100644 --- a/src/App/App.tsx +++ b/src/App/App.tsx @@ -58,12 +58,12 @@ const App: FunctionComponent = () => { revalidateOnFocus: false, }} > - - - + + + { /> - - - + + + ); From 0a0223cd3d2419c6adb246d48028d833cd6709a5 Mon Sep 17 00:00:00 2001 From: Peter Brottveit Bock Date: Fri, 13 Oct 2023 16:46:18 +0200 Subject: [PATCH 3/7] Bruk loader uten widget/bedriftsmeny ved login --- src/App/LoginBoundary.tsx | 48 ++++++++++++++++++++++++++++++++++----- 1 file changed, 42 insertions(+), 6 deletions(-) diff --git a/src/App/LoginBoundary.tsx b/src/App/LoginBoundary.tsx index 2e910da95..0fc8fda24 100644 --- a/src/App/LoginBoundary.tsx +++ b/src/App/LoginBoundary.tsx @@ -1,14 +1,19 @@ -import React, { FunctionComponent, useContext, useEffect, useState } from 'react'; -import { SpinnerMedBanner } from './Spinner'; +import React, { FunctionComponent, useEffect, useState } from 'react'; +import { Spinner } from './Spinner'; import { sjekkInnlogget } from '../api/dnaApi'; +import Bedriftsmeny from '@navikt/bedriftsmeny'; +import { setBreadcrumbs } from '@navikt/nav-dekoratoren-moduler'; +import { Alert } from '@navikt/ds-react'; export const LoginBoundary: FunctionComponent = (props) => { const [innlogget, setInnlogget] = useState(Innlogget.LASTER); useEffect(() => { - sjekkInnlogget().then((innloggetResultat) => { - setInnlogget(innloggetResultat ? Innlogget.INNLOGGET : Innlogget.IKKE_INNLOGGET); - }); + sjekkInnlogget() + .then((innloggetResultat) => { + setInnlogget(innloggetResultat ? Innlogget.INNLOGGET : Innlogget.IKKE_INNLOGGET); + }) + .catch(() => setInnlogget(Innlogget.FEIL)); }, []); if (innlogget === Innlogget.INNLOGGET) { @@ -16,8 +21,38 @@ export const LoginBoundary: FunctionComponent = (props) => { } else if (innlogget === Innlogget.IKKE_INNLOGGET) { window.location.href = '/min-side-arbeidsgiver/redirect-til-login'; return null; + } else if (innlogget === Innlogget.LASTER) { + setBreadcrumbs([ + { + url: 'https://arbeidsgiver.nav.no/min-side-arbeidsgiver', + title: 'Min side – arbeidsgiver', + }, + ]).then(() => {}); + return ( + <> + + + + ); } else { - return ; + setBreadcrumbs([ + { + url: 'https://arbeidsgiver.nav.no/min-side-arbeidsgiver', + title: 'Min side – arbeidsgiver', + }, + ]).then(() => {}); + return ( + <> + + Uventet feil. Prøv å last siden på nytt. + + ); } }; @@ -25,4 +60,5 @@ export enum Innlogget { LASTER, IKKE_INNLOGGET, INNLOGGET, + FEIL, } From 5937d3b05a2bde8a113960dd4b7be420feb50ef1 Mon Sep 17 00:00:00 2001 From: Peter Brottveit Bock Date: Mon, 16 Oct 2023 14:38:19 +0200 Subject: [PATCH 4/7] Fiks bad merge og undo urelaterte endringrer --- src/App/App.tsx | 10 +++---- .../InformasjonOmBedrift.css | 14 +++++----- src/App/InformasjonOmBedrift/Kontaktinfo.css | 6 ++--- .../OverordnetEnhet/OverordnetEnhet.css | 27 ++++++++++--------- .../Underenhet/Underenhet.css | 10 +++---- 5 files changed, 32 insertions(+), 35 deletions(-) diff --git a/src/App/App.tsx b/src/App/App.tsx index 9453da634..2973c5bf3 100644 --- a/src/App/App.tsx +++ b/src/App/App.tsx @@ -2,7 +2,7 @@ import React, { FunctionComponent, useContext, useEffect, useState } from 'react import { BrowserRouter, Route, Link as RouterLink, Routes, useLocation } from 'react-router-dom'; import { basename } from '../paths'; import Hovedside from './Hovedside/Hovedside'; -import LoginBoundary from './LoginBoundary'; +import { LoginBoundary } from './LoginBoundary'; import { AlertsProvider } from './Alerts/Alerts'; import { OrganisasjonerOgTilgangerProvider } from './OrganisasjonerOgTilgangerProvider'; import { OrganisasjonsDetaljerProvider } from './OrganisasjonDetaljerProvider'; @@ -10,7 +10,6 @@ import InformasjonOmBedrift from './InformasjonOmBedrift/InformasjonOmBedrift'; import { ManglerTilgangContainer } from './Hovedside/ManglerTilgangContainer/ManglerTilgangContainer'; import { loggSidevisning } from '../utils/funksjonerForAmplitudeLogging'; import './App.css'; -import { Innlogget, LoginContext, LoginProvider } from './LoginProvider'; import { NotifikasjonWidgetProvider } from '@navikt/arbeidsgiver-notifikasjon-widget'; import Banner from './HovedBanner/HovedBanner'; import { Saksoversikt } from './Hovedside/Sak/Saksoversikt/Saksoversikt'; @@ -29,13 +28,10 @@ const miljø = gittMiljo<'local' | 'labs' | 'dev' | 'prod'>({ const AmplitudeSidevisningEventLogger: FunctionComponent = (props) => { const location = useLocation(); - const { innlogget } = useContext(LoginContext); useEffect(() => { - if (innlogget !== Innlogget.LASTER) { - loggSidevisning(location.pathname, innlogget); - } - }, [location.pathname, innlogget]); + loggSidevisning(location.pathname); + }, [location.pathname]); return <>{props.children}; }; diff --git a/src/App/InformasjonOmBedrift/InformasjonOmBedrift.css b/src/App/InformasjonOmBedrift/InformasjonOmBedrift.css index 15b2a5df3..883cdadd1 100644 --- a/src/App/InformasjonOmBedrift/InformasjonOmBedrift.css +++ b/src/App/InformasjonOmBedrift/InformasjonOmBedrift.css @@ -1,14 +1,14 @@ .informasjon-om-bedrift { - margin: 24px auto; - padding: 2rem; - max-width: 60rem; - width: 100%; + margin: 24px auto; + padding: 2rem; + max-width: 60rem; + width: 100%; } .informasjon-om-bedrift .ny-fane-ikon { - margin-top: 3px; + margin-top: 3px; } .informasjon-om-bedrift hr { - width: 100%; -} + width: 100%; +} \ No newline at end of file diff --git a/src/App/InformasjonOmBedrift/Kontaktinfo.css b/src/App/InformasjonOmBedrift/Kontaktinfo.css index e1c83ce4d..789f70c51 100644 --- a/src/App/InformasjonOmBedrift/Kontaktinfo.css +++ b/src/App/InformasjonOmBedrift/Kontaktinfo.css @@ -1,4 +1,4 @@ -.kontaktinfo { +.kontaktinfo{ display: flex; flex-direction: column; gap: 16px; @@ -16,8 +16,8 @@ padding: 0; } -.kontaktinfo-tittel { +.kontaktinfo-tittel{ display: flex; align-items: center; gap: 8px; -} +} \ No newline at end of file diff --git a/src/App/InformasjonOmBedrift/OverordnetEnhet/OverordnetEnhet.css b/src/App/InformasjonOmBedrift/OverordnetEnhet/OverordnetEnhet.css index 8e128ddb3..b88a02a0b 100644 --- a/src/App/InformasjonOmBedrift/OverordnetEnhet/OverordnetEnhet.css +++ b/src/App/InformasjonOmBedrift/OverordnetEnhet/OverordnetEnhet.css @@ -1,19 +1,20 @@ + @media (min-width: 768px) { - .overordnet-enhet-info__container { - width: 32rem; - display: flex; - flex-wrap: wrap; - } - .overordnet-enhet-info__container .tekstboks { - width: 16rem; - } + .overordnet-enhet-info__container { + width: 32rem; + display: flex; + flex-wrap: wrap; + } + .overordnet-enhet-info__container .tekstboks { + width: 16rem; + } } .overordnet-enhet-info__navn { - display: flex; - align-items: center; - text-transform: uppercase; - gap: 0.5rem; + display: flex; + align-items: center; + text-transform: uppercase; + gap: 0.5rem } .overordnet-enhet-info__navn .overordnetenhet-ikon { - margin-right: 0.3rem; + margin-right: 0.3rem; } diff --git a/src/App/InformasjonOmBedrift/Underenhet/Underenhet.css b/src/App/InformasjonOmBedrift/Underenhet/Underenhet.css index dc04fb0d3..8626f0657 100644 --- a/src/App/InformasjonOmBedrift/Underenhet/Underenhet.css +++ b/src/App/InformasjonOmBedrift/Underenhet/Underenhet.css @@ -1,9 +1,9 @@ .underenhet-info__navn { - display: flex; - align-items: center; - text-transform: uppercase; - gap: 0.5rem; + display: flex; + align-items: center; + text-transform: uppercase; + gap: 0.5rem } .underenhet-info__navn .underenhet-ikon { - margin-right: 0.3rem; + margin-right: 0.3rem; } From 905262cc6b9e12b6f596bfb88fe133fa230505f1 Mon Sep 17 00:00:00 2001 From: ebelegu Date: Mon, 16 Oct 2023 15:31:47 +0200 Subject: [PATCH 5/7] AmplitudeSidevisning er alltid innlogget --- src/App/App.tsx | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/src/App/App.tsx b/src/App/App.tsx index 9453da634..82e10bd53 100644 --- a/src/App/App.tsx +++ b/src/App/App.tsx @@ -2,7 +2,7 @@ import React, { FunctionComponent, useContext, useEffect, useState } from 'react import { BrowserRouter, Route, Link as RouterLink, Routes, useLocation } from 'react-router-dom'; import { basename } from '../paths'; import Hovedside from './Hovedside/Hovedside'; -import LoginBoundary from './LoginBoundary'; +import { LoginBoundary } from './LoginBoundary'; import { AlertsProvider } from './Alerts/Alerts'; import { OrganisasjonerOgTilgangerProvider } from './OrganisasjonerOgTilgangerProvider'; import { OrganisasjonsDetaljerProvider } from './OrganisasjonDetaljerProvider'; @@ -10,7 +10,6 @@ import InformasjonOmBedrift from './InformasjonOmBedrift/InformasjonOmBedrift'; import { ManglerTilgangContainer } from './Hovedside/ManglerTilgangContainer/ManglerTilgangContainer'; import { loggSidevisning } from '../utils/funksjonerForAmplitudeLogging'; import './App.css'; -import { Innlogget, LoginContext, LoginProvider } from './LoginProvider'; import { NotifikasjonWidgetProvider } from '@navikt/arbeidsgiver-notifikasjon-widget'; import Banner from './HovedBanner/HovedBanner'; import { Saksoversikt } from './Hovedside/Sak/Saksoversikt/Saksoversikt'; @@ -28,14 +27,9 @@ const miljø = gittMiljo<'local' | 'labs' | 'dev' | 'prod'>({ }); const AmplitudeSidevisningEventLogger: FunctionComponent = (props) => { - const location = useLocation(); - const { innlogget } = useContext(LoginContext); - useEffect(() => { - if (innlogget !== Innlogget.LASTER) { - loggSidevisning(location.pathname, innlogget); - } - }, [location.pathname, innlogget]); + loggSidevisning(location.pathname, true); + }, [location.pathname]); return <>{props.children}; }; From 935bac8712f5b9d4f8efc8f0977924723f35057a Mon Sep 17 00:00:00 2001 From: ebelegu Date: Mon, 16 Oct 2023 15:32:36 +0200 Subject: [PATCH 6/7] Fjernet ekstra routes --- src/App/App.css | 5 ++ src/App/App.tsx | 193 +++++++++++++++++++++--------------------------- 2 files changed, 91 insertions(+), 107 deletions(-) diff --git a/src/App/App.css b/src/App/App.css index c0ded538b..4270ff92d 100644 --- a/src/App/App.css +++ b/src/App/App.css @@ -12,3 +12,8 @@ justify-content: center; margin-top: 8rem; } + +.app-finner-ikke-siden { + width: calc(clamp(15rem, 50rem, 100vw - 2rem)); + margin: 2rem auto; +} \ No newline at end of file diff --git a/src/App/App.tsx b/src/App/App.tsx index 82e10bd53..1bc4926b4 100644 --- a/src/App/App.tsx +++ b/src/App/App.tsx @@ -63,114 +63,93 @@ const App: FunctionComponent = () => { > - - - - - - - - - - } + + + + + + + + + } + /> + + + + } + /> + + + + } + /> + + - - - - } - /> - - - - } - /> - - - - - } - /> - - - - } - /> - - {' '} - Finner ikke siden.{' '} - - {' '} - Gå til Min side - arbeidsgiver - {' '} - - } - /> - - - - - } - /> - + + + } + /> + + + + } + /> + + Finner ikke siden.{' '} + + Gå til Min side arbeidsgiver + + + } + /> + + + + From 4d045a34b89a622b8679285a52c4187ac1142e34 Mon Sep 17 00:00:00 2001 From: ebelegu Date: Mon, 16 Oct 2023 16:20:54 +0200 Subject: [PATCH 7/7] Update App.tsx --- src/App/App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App/App.tsx b/src/App/App.tsx index 0683a1a25..9701adfe6 100644 --- a/src/App/App.tsx +++ b/src/App/App.tsx @@ -30,7 +30,7 @@ const AmplitudeSidevisningEventLogger: FunctionComponent = (props) => { const location = useLocation(); useEffect(() => { - loggSidevisning(location.pathname, true); + loggSidevisning(location.pathname); }, [location.pathname]); return <>{props.children};