Etablert tilsyn forbedringer

loosely-type-checked-files.json

@@ -125,19 +125,6 @@
   "packages/fakta-bosted-soker/src/components/BostedSokerView.tsx",
   "packages/fakta-direkte-overgang/src/DirekteOvergangFaktaIndex.stories.tsx",
   "packages/fakta-direkte-overgang/src/components/ManglerSøknadForm.tsx",
-  "packages/fakta-etablert-tilsyn/src/ui/EtablertTilsyn.stories.tsx",
-  "packages/fakta-etablert-tilsyn/src/ui/EtablertTilsynContainer.tsx",
-  "packages/fakta-etablert-tilsyn/src/ui/components/beredskap/beredskapsperioderoversikt/Beredskapsperiodeoversikt.tsx",
-  "packages/fakta-etablert-tilsyn/src/ui/components/beredskap/vurdering-av-beredskapsperioder-form/VurderingAvBeredskapsperioderForm.tsx",
-  "packages/fakta-etablert-tilsyn/src/ui/components/etablertTilsyn/EtablertTilsynMedSmoring.tsx",
-  "packages/fakta-etablert-tilsyn/src/ui/components/etablertTilsyn/EtablertTilsynRowContent.tsx",
-  "packages/fakta-etablert-tilsyn/src/ui/components/nattevåk/nattevåksperiodeoversikt/Nattevåksperiodeoversikt.tsx",
-  "packages/fakta-etablert-tilsyn/src/ui/components/nattevåk/vurdering-av-nattevåksperioder-form/VurderingAvNattevåksperioderForm.tsx",
-  "packages/fakta-etablert-tilsyn/src/ui/components/periodenavigasjon/Periodenavigasjon.tsx",
-  "packages/fakta-etablert-tilsyn/src/ui/components/write-access-bound-content/WriteAccessBoundContent.tsx",
-  "packages/fakta-etablert-tilsyn/src/ui/mainReducer.ts",
-  "packages/fakta-etablert-tilsyn/src/util/dateUtils.ts",
-  "packages/fakta-etablert-tilsyn/src/util/periodUtils.ts",
   "packages/fakta-feilutbetaling/src/components/FeilutbetalingPerioderForm.spec.tsx",
   "packages/fakta-inntektsmelding/src/stories/Inntektsmelding.stories.tsx",
   "packages/fakta-inntektsmelding/src/ui/InntektsmeldingContainer.tsx",
@@ -545,8 +532,6 @@
   "packages/utils/src/http-utils/__tests__/httpUtils.spec.ts",
   "packages/utils/src/http-utils/responseHelpers.ts",
   "packages/utils/src/objectUtils.ts",
-  "packages/utils/src/period-utils/Period.ts",
-  "packages/utils/src/period-utils/getPeriodDifference.ts",
   "packages/utils/src/stringUtils.spec.tsx",
   "packages/utils/src/urlUtils.spec.ts",
   "packages/utils/src/urlUtils.ts",

packages/fakta-etablert-tilsyn/src/ui/EtablertTilsyn.stories.tsx

@@ -1,11 +1,11 @@
 /* eslint-disable no-console */
 import type { Meta, StoryObj } from '@storybook/react';
-import { expect, userEvent, waitFor, within } from '@storybook/test';
+import { expect, fn, userEvent, waitFor } from '@storybook/test';
 import { handlers } from '../../mock/api-mock';
 import { mockUrlPrepend } from '../../mock/constants';
 import EtablertTilsynContainer from './EtablertTilsynContainer';
 
-const meta: Meta<typeof EtablertTilsynContainer> = {
+const meta = {
   title: 'fakta/fakta-etablert-tilsyn',
   component: EtablertTilsynContainer,
   args: {
@@ -16,9 +16,9 @@ const meta: Meta<typeof EtablertTilsynContainer> = {
         sykdom: `${mockUrlPrepend}/mock/sykdom`,
         sykdomInnleggelse: `${mockUrlPrepend}/mock/sykdomInnleggelse`,
       },
-      httpErrorHandler: undefined,
-      lagreBeredskapvurdering: undefined,
-      lagreNattevåkvurdering: undefined,
+      httpErrorHandler: fn(),
+      lagreBeredskapvurdering: fn(),
+      lagreNattevåkvurdering: fn(),
       harAksjonspunktForBeredskap: true,
       harAksjonspunktForNattevåk: true,
     },
@@ -28,15 +28,18 @@ const meta: Meta<typeof EtablertTilsynContainer> = {
       dangerouslyIgnoreUnhandledErrors: true,
     },
   },
-};
+} satisfies Meta<typeof EtablertTilsynContainer>;
 
 export default meta;
-type Story = StoryObj<typeof EtablertTilsynContainer>;
+type Story = StoryObj<typeof meta>;
 
 export const EtablertTilsyn: Story = {
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
+  parameters: {
+    msw: {
+      handlers,
+    },
+  },
+  play: async ({ canvas, step, args }) => {
     await step('skal ha skjema for håndtering av beredskap', async () => {
       await userEvent.click(canvas.getByRole('tab', { name: 'Beredskap' }));
       await waitFor(async () => {
@@ -53,6 +56,22 @@ export const EtablertTilsyn: Story = {
       await userEvent.click(canvas.getByText('Ja, i deler av perioden'));
       await expect(canvas.getByLabelText('Fra')).toBeInTheDocument();
       await expect(canvas.getByLabelText('Til')).toBeInTheDocument();
+      await userEvent.click(canvas.getByText('Bekreft og fortsett'));
+      await waitFor(() =>
+        expect(args.data.lagreBeredskapvurdering).toHaveBeenCalledWith({
+          vurderinger: [
+            {
+              begrunnelse: 'test',
+              kilde: '',
+              periode: {
+                fom: '2021-07-11',
+                tom: '2021-07-12',
+              },
+              resultat: 'OPPFYLT',
+            },
+          ],
+        }),
+      );
     });
 
     await step('skal ha skjema for håndtering av nattevåk', async () => {
@@ -71,12 +90,22 @@ export const EtablertTilsyn: Story = {
       await userEvent.click(canvas.getByText('Ja, i deler av perioden'));
       await expect(canvas.getByLabelText('Fra')).toBeInTheDocument();
       await expect(canvas.getByLabelText('Til')).toBeInTheDocument();
+      await userEvent.click(canvas.getByText('Bekreft og fortsett'));
+      await waitFor(() =>
+        expect(args.data.lagreNattevåkvurdering).toHaveBeenCalledWith({
+          vurderinger: [
+            {
+              begrunnelse: 'test',
+              kilde: '',
+              periode: {
+                fom: '2021-07-11',
+                tom: '2021-07-12',
+              },
+              resultat: 'OPPFYLT',
+            },
+          ],
+        }),
+      );
     });
   },
 };
-
-EtablertTilsyn.parameters = {
-  msw: {
-    handlers,
-  },
-};

packages/fakta-etablert-tilsyn/src/ui/EtablertTilsynContainer.tsx

@@ -1,17 +1,20 @@
 import { get, Period } from '@fpsak-frontend/utils';
 import { Alert, Tabs } from '@navikt/ds-react';
 import { ChildIcon, Infostripe, PageContainer, WarningIcon } from '@navikt/ft-plattform-komponenter';
+import { VurderingDtoResultat } from '@navikt/k9-sak-typescript-client';
+import { useQuery } from '@tanstack/react-query';
 import classnames from 'classnames';
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
+import BeredskapType from '../types/BeredskapType';
 import ContainerContract from '../types/ContainerContract';
+import EtablertTilsynType from '../types/EtablertTilsynType';
+import NattevåkType from '../types/NattevåkType';
 import { InnleggelsesperiodeResponse, SykdomResponse, TilsynResponse } from '../types/TilsynResponse';
 import Beredskapsperiodeoversikt from './components/beredskap/beredskapsperioderoversikt/Beredskapsperiodeoversikt';
 import EtablertTilsynMedSmoring from './components/etablertTilsyn/EtablertTilsynMedSmoring';
 import Nattevåksperiodeoversikt from './components/nattevåk/nattevåksperiodeoversikt/Nattevåksperiodeoversikt';
 import ContainerContext from './context/ContainerContext';
-import ActionType from './mainActionTypes';
 import styles from './mainComponent.module.css';
-import mainComponentReducer from './mainReducer';
 
 interface MainComponentProps {
   data: ContainerContract;
@@ -46,84 +49,93 @@ const getDefaultActiveTab = ({ harAksjonspunktForBeredskap, harAksjonspunktForNa
   return tabs[0];
 };
 
-const EtablertTilsynContainer = ({ data }: MainComponentProps) => {
-  const [state, dispatch] = React.useReducer(mainComponentReducer, {
-    isLoading: true,
-    etablertTilsyn: null,
-    beredskap: null,
-    nattevåk: null,
-    sykdomsperioderSomIkkeErOppfylt: [],
-  });
-  const {
-    isLoading,
+const transformEtablertTilsynResponse = (response: TilsynResponse) => {
+  const etablertTilsyn = response.etablertTilsynPerioder.map(
+    etablertTilsynPeriode => new EtablertTilsynType(etablertTilsynPeriode),
+  );
+  const beredskap = new BeredskapType(response.beredskap);
+  const nattevåk = new NattevåkType(response.nattevåk);
+  const smurtEtablertTilsynPerioder = response.smortEtablertTilsynPerioder.map(
+    etablertTilsynPeriode => new EtablertTilsynType(etablertTilsynPeriode),
+  );
+  return {
     etablertTilsyn,
-    smurtEtablertTilsynPerioder,
     beredskap,
     nattevåk,
-    sykdomsperioderSomIkkeErOppfylt,
-    tilsynHarFeilet,
-    sykdomHarFeilet,
-  } = state;
+    smurtEtablertTilsynPerioder,
+  };
+};
+
+const transformSykdomResponse = (response: SykdomResponse) => {
+  const resterendeVurderingsperioder = response?.resterendeVurderingsperioder?.map(v => new Period(v.fom, v.tom));
+  const sykdomsperioderSomIkkeErOppfylt = response.vurderingselementer
+    .filter(v => v.resultat !== VurderingDtoResultat.OPPFYLT)
+    .map(v => new Period(v.periode.fom, v.periode.tom));
+  return [...sykdomsperioderSomIkkeErOppfylt, ...resterendeVurderingsperioder];
+};
+
+const EtablertTilsynContainer = ({ data }: MainComponentProps) => {
   const { endpoints, httpErrorHandler, harAksjonspunktForBeredskap, harAksjonspunktForNattevåk } = data;
-  const [innleggelsesperioder, setInnleggelsesperioder] = React.useState<Period[]>([]);
-  const [innleggelserFeilet, setInnleggelserFeilet] = React.useState(false);
-  const controller = useMemo(() => new AbortController(), []);
-  const getTilsyn = () =>
+
+  const getTilsyn = (signal: AbortSignal) =>
     get<TilsynResponse>(endpoints.tilsyn, httpErrorHandler, {
-      signal: controller.signal,
+      signal: signal,
     });
-  const getSykdom = () =>
+  const getSykdom = (signal: AbortSignal) =>
     get<SykdomResponse>(endpoints.sykdom, httpErrorHandler, {
-      signal: controller.signal,
+      signal: signal,
     });
-  const getInnleggelser = () =>
+  const getInnleggelser = (signal: AbortSignal) =>
     get<InnleggelsesperiodeResponse>(endpoints.sykdomInnleggelse, httpErrorHandler, {
-      signal: controller.signal,
+      signal: signal,
     });
 
-  React.useEffect(() => {
-    let isMounted = true;
-    getTilsyn()
-      .then(tilsynResponse => {
-        if (isMounted) {
-          dispatch({ type: ActionType.OK, tilsynResponse });
-        }
-      })
-      .catch(() => {
-        dispatch({ type: ActionType.FAILED });
-      });
-    getSykdom()
-      .then(sykdomResponse => {
-        if (isMounted) {
-          dispatch({ type: ActionType.SYKDOM_OK, sykdomResponse });
-        }
-      })
-      .catch(() => {
-        dispatch({ type: ActionType.SYKDOM_FAILED });
-      });
-
-    getInnleggelser()
-      .then(innleggelserResponse => {
-        if (isMounted) {
-          setInnleggelsesperioder(innleggelserResponse.perioder.map(v => new Period(v.fom, v.tom)));
-        }
-      })
-      .catch(() => {
-        setInnleggelserFeilet(true);
-      });
-    return () => {
-      isMounted = false;
-      controller.abort();
-    };
-  }, []);
-
-  const bedredskapVurderinger = beredskap?.vurderinger || [];
-  const nattevåkVurderinger = nattevåk?.vurderinger || [];
-  const perioderSomOverstyrerTilsyn = [
-    ...bedredskapVurderinger.filter(v => v.resultat === 'OPPFYLT').map(v => new Period(v.periode.fom, v.periode.tom)),
-    ...nattevåkVurderinger.filter(v => v.resultat === 'OPPFYLT').map(v => new Period(v.periode.fom, v.periode.tom)),
-    ...innleggelsesperioder,
-  ];
+  const {
+    data: innleggelsesperioder = [],
+    isError: innleggelserFeilet,
+    isLoading: innleggelserLoading,
+  } = useQuery({
+    queryKey: ['innleggelsesperioder', endpoints.sykdomInnleggelse],
+    queryFn: ({ signal }) =>
+      getInnleggelser(signal).then(response => response.perioder.map(v => new Period(v.fom, v.tom))),
+  });
+
+  const {
+    data: tilsyn,
+    isError: tilsynHarFeilet,
+    isLoading: tilsynLoading,
+  } = useQuery({
+    queryKey: ['etablertTilsyn', endpoints.tilsyn],
+    queryFn: ({ signal }) => getTilsyn(signal),
+    select: transformEtablertTilsynResponse,
+  });
+
+  const {
+    data: sykdomsperioderSomIkkeErOppfylt = [],
+    isError: sykdomHarFeilet,
+    isLoading: sykdomIsLoading,
+  } = useQuery({
+    queryKey: ['sykdomsperioderIkkeOppfylt', endpoints.sykdom],
+    queryFn: ({ signal }) => getSykdom(signal),
+    select: transformSykdomResponse,
+  });
+
+  const { etablertTilsyn = [], smurtEtablertTilsynPerioder = [], beredskap, nattevåk } = tilsyn || {};
+  const isLoading = tilsynLoading || innleggelserLoading || sykdomIsLoading;
+
+  const perioderSomOverstyrerTilsyn = useMemo(() => {
+    const bedredskapVurderinger = beredskap?.vurderinger || [];
+    const nattevåkVurderinger = nattevåk?.vurderinger || [];
+    return [
+      ...bedredskapVurderinger
+        .filter(v => v.resultat === VurderingDtoResultat.OPPFYLT)
+        .map(v => new Period(v.periode.fom, v.periode.tom)),
+      ...nattevåkVurderinger
+        .filter(v => v.resultat === VurderingDtoResultat.OPPFYLT)
+        .map(v => new Period(v.periode.fom, v.periode.tom)),
+      ...innleggelsesperioder,
+    ];
+  }, [beredskap?.vurderinger, innleggelsesperioder, nattevåk?.vurderinger]);
 
   if (tilsynHarFeilet || sykdomHarFeilet || innleggelserFeilet) {
     return (
@@ -169,10 +181,10 @@ const EtablertTilsynContainer = ({ data }: MainComponentProps) => {
                 />
               </Tabs.Panel>
               <Tabs.Panel value={tabs[1]}>
-                <Beredskapsperiodeoversikt beredskapData={beredskap} />
+                {beredskap && <Beredskapsperiodeoversikt beredskapData={beredskap} />}
               </Tabs.Panel>
               <Tabs.Panel value={tabs[2]}>
-                <Nattevåksperiodeoversikt nattevåkData={nattevåk} />
+                {nattevåk && <Nattevåksperiodeoversikt nattevåkData={nattevåk} />}
               </Tabs.Panel>
             </div>
           </PageContainer>

packages/fakta-etablert-tilsyn/src/ui/components/beredskap/beredskapsperioderoversikt/Beredskapsperiodeoversikt.tsx

@@ -1,6 +1,6 @@
+import { NavigationWithDetailView } from '@navikt/ft-plattform-komponenter';
 import * as React from 'react';
 import { useEffect } from 'react';
-import { NavigationWithDetailView } from '@navikt/ft-plattform-komponenter';
 import BeredskapType from '../../../../types/BeredskapType';
 import Vurderingsperiode from '../../../../types/Vurderingsperiode';
 import Periodenavigasjon from '../../periodenavigasjon/Periodenavigasjon';
@@ -12,14 +12,14 @@ interface BeredskapsperiodeoversiktProps {
 }
 
 const Beredskapsperiodeoversikt = ({ beredskapData }: BeredskapsperiodeoversiktProps) => {
-  const [valgtPeriode, setValgtPeriode] = React.useState<Vurderingsperiode>(null);
+  const [valgtPeriode, setValgtPeriode] = React.useState<Vurderingsperiode | null>(null);
   const [editMode, setEditMode] = React.useState(false);
   const { beskrivelser } = beredskapData;
 
   const perioderTilVurdering = beredskapData.finnPerioderTilVurdering();
   const vurderteBeredskapsperioder = beredskapData.finnVurdertePerioder();
 
-  const velgPeriode = (periode: Vurderingsperiode) => {
+  const velgPeriode = (periode: Vurderingsperiode | null) => {
     setValgtPeriode(periode);
     setEditMode(false);
   };
@@ -43,15 +43,17 @@ const Beredskapsperiodeoversikt = ({ beredskapData }: BeredskapsperiodeoversiktP
           />
         )}
         showDetailSection={!!valgtPeriode}
-        detailSection={() => (
-          <BeredskapsperiodeoversiktController
-            valgtPeriode={valgtPeriode}
-            editMode={editMode}
-            onEditClick={() => setEditMode(true)}
-            onCancelClick={() => velgPeriode(null)}
-            beskrivelser={beskrivelser}
-          />
-        )}
+        detailSection={() =>
+          valgtPeriode && (
+            <BeredskapsperiodeoversiktController
+              valgtPeriode={valgtPeriode}
+              editMode={editMode}
+              onEditClick={() => setEditMode(true)}
+              onCancelClick={() => velgPeriode(null)}
+              beskrivelser={beskrivelser}
+            />
+          )
+        }
       />
     </>
   );