Merge pull request #1659 from navikt/revert-1658-SWR-og-ZOD

Revert "Swr og zod for tjenestebokser"

package.json

@@ -46,7 +46,6 @@
         "react-tooltip": "^4.2.13",
         "regenerator-runtime": "^0.13.7",
         "smoothscroll-polyfill": "^0.4.4",
-        "swr": "^2.2.2",
         "typescript": "4.5.4",
         "uuid": "^9.0.0",
         "whatwg-fetch": "^3.6.2",

src/App/Hovedside/TjenesteBoksContainer/Arbeidsforholdboks/Arbeidsforholdboks.tsx

@@ -1,13 +1,25 @@
-import React from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { innsynAaregURL } from '../../../../lenker';
 import arbeidsforholdikon from './arbeidsforholdikon.svg';
-import { useAntallArbeidsforholdFraAareg } from './useAntallArbeidsforholdFraAareg';
+import { hentAntallArbeidsforholdFraAareg } from '../../../../api/arbeidsforholdApi';
+import { OrganisasjonsDetaljerContext } from '../../../OrganisasjonDetaljerProvider';
 import './ArbeidsforholdBoks.css';
 import { Tjenesteboks } from '../Tjenesteboks';
 
 const Arbeidsforholdboks = () => {
-    const antallArbeidsforhold = useAntallArbeidsforholdFraAareg();
-
+    const { valgtOrganisasjon } = useContext(OrganisasjonsDetaljerContext);
+    const [antallArbeidsforhold, setAntallArbeidsforhold] = useState('–');
+    useEffect(() => {
+        if (valgtOrganisasjon)
+            hentAntallArbeidsforholdFraAareg(
+                valgtOrganisasjon.organisasjon.OrganizationNumber,
+                valgtOrganisasjon.organisasjon.ParentOrganizationNumber ?? ''
+            ).then((antallArbeidsforholdRespons) =>
+                setAntallArbeidsforhold(
+                    antallArbeidsforholdRespons > 0 ? antallArbeidsforholdRespons.toString() : '–'
+                )
+            );
+    }, [valgtOrganisasjon]);
     const orgnummerFraUrl = new URLSearchParams(window.location.search).get('bedrift') ?? '';
     const href = innsynAaregURL + (orgnummerFraUrl === '' ? '' : `?bedrift=${orgnummerFraUrl}`);
 
@@ -21,9 +33,7 @@ const Arbeidsforholdboks = () => {
             <div className="arbeidsforholdboks">
                 <span>
                     {' '}
-                    <span className="antall-arbeidsforhold">
-                        {antallArbeidsforhold > 0 ? antallArbeidsforhold : '-'}
-                    </span>
+                    <span className="antall-arbeidsforhold">{antallArbeidsforhold}</span>
                     arbeidsforhold (aktive og avsluttede){' '}
                 </span>
                 <div className="bunntekst">

src/App/Hovedside/TjenesteBoksContainer/ForebyggeFraværboks/ForebyggeFraværboks.tsx

@@ -1,56 +1,65 @@
-import { lenkeTilForebyggefravar } from '../../../../lenker';
-import React from 'react';
+import {lenkeTilForebyggefravar} from '../../../../lenker';
+import React, {useContext, useEffect, useState} from 'react';
+import * as Sentry from "@sentry/browser";
 import ForebyggeFraværIkon from './ForebyggeFraværIkon.svg';
 import './ForebyggeFraværboks.css';
-import { useSykefravær } from './useSykefravær';
-import { StortTall, Tjenesteboks } from '../Tjenesteboks';
+import {OrganisasjonsDetaljerContext} from '../../../OrganisasjonDetaljerProvider';
+import {hentSykefravær, Sykefraværsrespons} from '../../../../api/sykefraværStatistikkApi';
+import {StortTall, Tjenesteboks} from "../Tjenesteboks";
+
 
 const ForebyggeFraværboks = () => {
     const valgtbedrift = () => {
         const orgnummerFraUrl = new URLSearchParams(window.location.search).get('bedrift') ?? '';
         return orgnummerFraUrl === '' ? '' : `?bedrift=${orgnummerFraUrl}`;
     };
 
-    return (
-        <Tjenesteboks
-            ikon={ForebyggeFraværIkon}
-            href={lenkeTilForebyggefravar + valgtbedrift()}
-            tittel="Forebygge fravær"
-            aria-label={beskrivelse}
-        >
-            <Beskrivelse />
-        </Tjenesteboks>
-    );
+    return <Tjenesteboks
+        ikon={ForebyggeFraværIkon}
+        href={lenkeTilForebyggefravar + valgtbedrift()}
+        tittel='Forebygge fravær'
+        aria-label={beskrivelse}
+    >
+        <Beskrivelse/>
+    </Tjenesteboks>;
 };
 
-const beskrivelse = 'Verktøy for å forebygge fravær i din virksomhet.';
+const beskrivelse = 'Verktøy for å forebygge fravær i din virksomhet.'
 
 const Beskrivelse = () => {
+    const {valgtOrganisasjon} = useContext(OrganisasjonsDetaljerContext);
+    const [sykefravær, setSykefravær] = useState<Sykefraværsrespons | undefined>(undefined);
+
     const statistikktype = (type: string) => {
         switch (type) {
             case 'NÆRING':
             case 'BRANSJE':
-                return 'bransje';
-            default:
-                return 'bedrift';
+                return 'bransje'
+            default :
+                return 'bedrift'
         }
-    };
-
-    const sykefravær = useSykefravær();
+    }
+    useEffect(() => {
+        if (valgtOrganisasjon)
+            hentSykefravær(valgtOrganisasjon.organisasjon.OrganizationNumber).then(sykefraværsrespons =>
+                setSykefravær(sykefraværsrespons),
+            ).catch(error => {
+                Sentry.captureException(error)
+                setSykefravær(undefined);
+            });
+    }, [valgtOrganisasjon]);
 
     if (sykefravær !== undefined) {
         return (
             <span>
-                <StortTall>{sykefravær.prosent.toString()} %</StortTall>
-                <>
-                    {' '}
-                    legemeldt sykefravær i din {statistikktype(sykefravær.type)}. Lag en plan for å
-                    redusere fraværet.{' '}
-                </>
+                <StortTall>
+                    {sykefravær.prosent.toString()} %
+                </StortTall>
+                <> legemeldt sykefravær i din {statistikktype(sykefravær.type)}. Lag en plan for å redusere fraværet. </>
             </span>
         );
     }
     return <span>{beskrivelse}</span>;
-};
+}
 
 export default ForebyggeFraværboks;

src/App/Hovedside/TjenesteBoksContainer/Kandidatlisteboks/Kandidatlisteboks.tsx

@@ -1,35 +1,36 @@
-import React from 'react';
-import { kandidatlisteURL } from '../../../../lenker';
-import { Tjenesteboks } from '../Tjenesteboks';
-import { useAntallKandidater } from './useAntallKandidater';
-import ikon from './kandidatlisteboks-ikon.svg';
+import React, {useContext, useEffect, useState} from 'react';
+import {OrganisasjonsDetaljerContext} from '../../../OrganisasjonDetaljerProvider';
+import {kandidatlisteURL} from '../../../../lenker';
+import {Tjenesteboks} from "../Tjenesteboks";
+import {hentAntallKandidater} from "../../../../api/presenterteKandidaterApi";
+import ikon from "./kandidatlisteboks-ikon.svg";
 import './Kandidatlisteboks.css';
 
 const Kandidatlisteboks = () => {
-    const antallKandidater = useAntallKandidater();
-
+    const {valgtOrganisasjon} = useContext(OrganisasjonsDetaljerContext);
+    const [antallKandidater, setantallKandidater] = useState(0);
+    useEffect(() => {
+        if (valgtOrganisasjon)
+            hentAntallKandidater(valgtOrganisasjon.organisasjon.OrganizationNumber).then(antallKandidater =>
+                setantallKandidater(antallKandidater)
+            );
+    }, [valgtOrganisasjon]);
     const orgnummerFraUrl = new URLSearchParams(window.location.search).get('bedrift') ?? '';
-    const href =
-        kandidatlisteURL + (orgnummerFraUrl === '' ? '' : `?virksomhet=${orgnummerFraUrl}`);
+    const href = kandidatlisteURL + (orgnummerFraUrl === '' ? '' : `?virksomhet=${orgnummerFraUrl}`);
 
-    return antallKandidater === 0 ? null : (
-        <Tjenesteboks
+    return antallKandidater === 0
+        ? null
+        : <Tjenesteboks
             ikon={ikon}
             href={href}
-            tittel="Kandidater til dine stillinger"
-            aria-label="Kandidater til dine stillinger. Se CV til personer NAV har sendt deg."
+            tittel='Kandidater til dine stillinger'
+            aria-label='Kandidater til dine stillinger. Se CV til personer NAV har sendt deg.'
         >
-            <div className="kandidatlisteboks">
-                <span>
-                    {' '}
-                    <span className="kandidatlisteboks__antall">
-                        {antallKandidater}
-                    </span>kandidater{' '}
-                </span>
-                <div className="kandidatlisteboks__bunntekst"></div>
+            <div className='kandidatlisteboks'>
+                <span> <span className='kandidatlisteboks__antall'>{antallKandidater}</span>kandidater </span>
+                <div className='kandidatlisteboks__bunntekst'></div>
             </div>
         </Tjenesteboks>
-    );
 };
 
 export default Kandidatlisteboks;