AntallAnnonser til useSWR. Legger til stillingsannonser i vite-proxy

src/App/Hovedside/TjenesteBoksContainer/Pamboks/Pamboks.tsx

@@ -1,42 +1,92 @@
-import React, {useContext, useEffect, useState} from 'react';
-import {OrganisasjonsDetaljerContext} from '../../../OrganisasjonDetaljerProvider';
-import {arbeidsplassenURL} from '../../../../lenker';
+import React from 'react';
+import { arbeidsplassenURL } from '../../../../lenker';
 import PamboksIkon from './pamboks-ikon.svg';
 import './Pamboks.css';
-import {Tjenesteboks} from "../Tjenesteboks";
+import { Tjenesteboks } from '../Tjenesteboks';
+import { z } from 'zod';
+import useSWR from 'swr';
+import * as Sentry from '@sentry/browser';
+import { useContext } from 'react';
+import { OrganisasjonsDetaljerContext } from '../../../OrganisasjonDetaljerProvider';
 
 const Pamboks = () => {
-    const { antallAnnonser } = useContext(OrganisasjonsDetaljerContext);
-    const [stillingsAnnonseTekst, setStillingsAnnonseTekst] = useState('Lag ny stillingsannonse');
+    const antallAnnonser = useAntallannonser();
 
-    const TekstUtenTall = () =>
-        <>Lag et jobbtreff
-            <br />Lag en stillingsannonse</>;
+    return (
+        <Tjenesteboks
+            ikon={PamboksIkon}
+            href={arbeidsplassenURL}
+            tittel={'Rekruttere på arbeidsplassen.no'}
+            aria-label={
+                'Rekruttere på arbeidsplassen.no, ' +
+                (antallAnnonser > 0
+                    ? `Stillingsannonser ( ${antallAnnonser} aktive)`
+                    : 'Lag ny stillingsannonse') +
+                ' og lag et jobbtreff'
+            }
+        >
+            {antallAnnonser > 0 ? (
+                <div className={'pamboks__bunntekst'}>
+                    <span>
+                        {' '}
+                        <span className={'pamboks__antall'}>{antallAnnonser}</span>stillingsannonser
+                        (aktive)
+                    </span>
+                    <div className={'pamboks__bunntekst'}>Lag et jobbtreff</div>
+                </div>
+            ) : (
+                <>
+                    Lag et jobbtreff
+                    <br />
+                    Lag en stillingsannonse
+                </>
+            )}
+        </Tjenesteboks>
+    );
+};
+
+export default Pamboks;
 
-    const TekstMedTall = () =>
-        <div className={'pamboks__bunntekst'}>
-            <span> <span className={'pamboks__antall'}>{antallAnnonser}</span>stillingsannonser (aktive)</span>
-            <div className={'pamboks__bunntekst'}>Lag et jobbtreff
-            </div>
-        </div>;
+const PamStatusAnnonser = z.object({
+    PUBLISERT: z.number(),
+});
 
+const useAntallannonser = () => {
+    const { valgtOrganisasjon } = useContext(OrganisasjonsDetaljerContext);
+    const orgnr = valgtOrganisasjon?.organisasjon?.OrganizationNumber;
 
-    useEffect(() => {
-        if (antallAnnonser > 0) {
-            setStillingsAnnonseTekst('Stillingsannonser (' + antallAnnonser + ' aktive)');
-        }
-        else {
-            setStillingsAnnonseTekst('Lag ny stillingsannonse')
+    const { data } = useSWR(
+        orgnr === undefined
+            ? null
+            : {
+                  url: '/min-side-arbeidsgiver/stillingsregistrering-api/api/stillinger/numberByStatus',
+                  orgnr,
+              },
+        fetcher,
+        {
+            onError: (error) => {
+                Sentry.captureMessage(
+                    `hent AntallAnnonser fra stillingsregistrering-api feilet med ${
+                        error.status !== undefined ? `${error.status} ${error.statusText}` : error
+                    }`
+                );
+            },
         }
-    }, [antallAnnonser]);
-
-    return <Tjenesteboks
-        ikon={PamboksIkon}
-        href={arbeidsplassenURL}
-        tittel={'Rekruttere på arbeidsplassen.no'}
-        aria-label={'Rekruttere på arbeidsplassen.no, ' + stillingsAnnonseTekst + ' og lag et jobbtreff'}>
-            {antallAnnonser > 0 ? TekstMedTall() : TekstUtenTall()}
-        </Tjenesteboks>;
+    );
+    return data ?? 0;
 };
 
-export default Pamboks;
+const fetcher = async ({ url, orgnr }: { url: string; orgnr: string }) => {
+    await fetch(`/min-side-arbeidsgiver/stillingsregistrering-api/api/arbeidsgiver/${orgnr}`, {
+        method: 'POST',
+    });
+
+    const respons = await fetch(url, {
+        method: 'GET',
+        headers: {
+            organizationNumber: orgnr,
+        },
+    });
+    if (!respons.ok) throw respons;
+    return PamStatusAnnonser.parse(await respons.json()).PUBLISERT;
+};

src/App/OrganisasjonDetaljerProvider.tsx

@@ -4,7 +4,6 @@ import {
     OrganisasjonInfo,
 } from './OrganisasjonerOgTilgangerProvider';
 import { loggBedriftValgtOgTilganger } from '../utils/funksjonerForAmplitudeLogging';
-import { hentAntallannonser, settBedriftIPam } from '../api/pamApi';
 import { Organisasjon } from '../altinn/organisasjon';
 import { useSaker } from './Hovedside/Sak/useSaker';
 import { SakSortering } from '../api/graphql-types';
@@ -17,15 +16,13 @@ interface Props {
 export type Context = {
     endreOrganisasjon: (org: Organisasjon) => void;
     valgtOrganisasjon: OrganisasjonInfo | undefined;
-    antallAnnonser: number;
     antallSakerForAlleBedrifter: number | undefined;
 };
 
 export const OrganisasjonsDetaljerContext = React.createContext<Context>({} as Context);
 
 export const OrganisasjonsDetaljerProvider: FunctionComponent<Props> = ({ children }: Props) => {
     const { organisasjoner } = useContext(OrganisasjonerOgTilgangerContext);
-    const [antallAnnonser, setantallAnnonser] = useState(-1);
     const [valgtOrganisasjon, setValgtOrganisasjon] = useState<OrganisasjonInfo | undefined>(
         undefined
     );
@@ -53,14 +50,6 @@ export const OrganisasjonsDetaljerProvider: FunctionComponent<Props> = ({ childr
     const endreOrganisasjon = async (org: Organisasjon) => {
         const orgInfo = organisasjoner[org.OrganizationNumber];
         setValgtOrganisasjon(orgInfo);
-
-        if (orgInfo.altinntilgang.rekruttering) {
-            settBedriftIPam(orgInfo.organisasjon.OrganizationNumber).then(() =>
-                hentAntallannonser(orgInfo.organisasjon.OrganizationNumber).then(setantallAnnonser)
-            );
-        } else {
-            setantallAnnonser(0);
-        }
     };
 
     useEffect(() => {
@@ -74,7 +63,6 @@ export const OrganisasjonsDetaljerProvider: FunctionComponent<Props> = ({ childr
     }, [valgtOrganisasjon]);
 
     let defaultContext: Context = {
-        antallAnnonser,
         endreOrganisasjon,
         valgtOrganisasjon,
         antallSakerForAlleBedrifter,

vite.config.ts

@@ -35,6 +35,7 @@ export default defineConfig({
             '/min-side-arbeidsgiver/notifikasjon-bruker-api': 'http://localhost:8080',
             '/min-side-arbeidsgiver/tiltaksgjennomforing-api': 'http://localhost:8080',
             '/min-side-arbeidsgiver/presenterte-kandidater-api': 'http://localhost:8080',
+            '/min-side-arbeidsgiver/stillingsregistrering-api': 'http://localhost:8080',
         },
     },
 });