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 0a24189b7..9701adfe6 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}; }; @@ -62,139 +58,104 @@ const App: FunctionComponent = () => { revalidateOnFocus: false, }} > - + - - - - - - - - - - - } - /> - - - - } - /> - - - - } - /> - - - - - } - /> - - - - } - /> - - {' '} - Finner ikke siden.{' '} - - {' '} - Gå til Min side - arbeidsgiver - {' '} - - } - /> - - - - - - } - /> - + + + + + + + + + } + /> + + + + } + /> + + + + } + /> + + + + + } + /> + + + + } + /> + + Finner ikke siden.{' '} + + Gå til Min side arbeidsgiver + + + } + /> + + + + - + ); diff --git a/src/App/LoginBoundary.tsx b/src/App/LoginBoundary.tsx index fab8a7263..0fc8fda24 100644 --- a/src/App/LoginBoundary.tsx +++ b/src/App/LoginBoundary.tsx @@ -1,18 +1,64 @@ -import React, { FunctionComponent, useContext } from 'react'; -import { SpinnerMedBanner } from './Spinner'; -import { Innlogget, LoginContext } from './LoginProvider'; +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'; -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); + }) + .catch(() => setInnlogget(Innlogget.FEIL)); + }, []); 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 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. + + ); } }; -export default LoginBoundary; +export enum Innlogget { + LASTER, + IKKE_INNLOGGET, + INNLOGGET, + FEIL, +} 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, + }); +};