Skip to content

Commit 159882a

Browse files
Skriver om deler av medisinsk vilkår til å bruke tanstack query for henting av status
1 parent 5adbe2a commit 159882a

File tree

4 files changed

+60
-72
lines changed

4 files changed

+60
-72
lines changed

.storybook/preview.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import configureStore from '@k9-sak-web/sak-app/src/configureStore';
33
import '@navikt/ds-css';
44
import '@navikt/ft-plattform-komponenter/dist/style.css';
55
import { Preview } from '@storybook/react';
6-
import { getWorker, initialize, mswLoader } from 'msw-storybook-addon';
6+
import { initialize, mswLoader } from 'msw-storybook-addon';
77
import React from 'react';
88
import { Provider } from 'react-redux';
99
import { MemoryRouter } from 'react-router-dom';
@@ -33,7 +33,7 @@ const preview: Preview = {
3333
);
3434
},
3535
],
36-
loaders: [mswLoader, () => getWorker().start()],
36+
loaders: [mswLoader],
3737
};
3838

3939
export default preview;
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const { VITE_LOCAL_STORYBOOK } = import.meta.env;
2-
const mockUrlPrepend = VITE_LOCAL_STORYBOOK ? '' : '/k9-sak-web';
1+
const { VITE_LOCAL_STORYBOOK, DEV: IS_DEV } = import.meta.env;
2+
const mockUrlPrepend = VITE_LOCAL_STORYBOOK || IS_DEV ? '' : '/k9-sak-web';
33

44
export { mockUrlPrepend };

packages/fakta-medisinsk-vilkår/src/ui/components/medisinsk-vilkår/MedisinskVilkår.tsx

+54-54
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { ExclamationmarkTriangleFillIcon } from '@navikt/aksel-icons';
33
import { Tabs } from '@navikt/ds-react';
44
import { Box, ChildIcon, Infostripe, Margin, PageContainer } from '@navikt/ft-plattform-komponenter';
55
import classnames from 'classnames';
6-
import React, { useMemo } from 'react';
6+
import React, { useEffect, useMemo } from 'react';
77
import { useQuery } from 'react-query';
88
import FagsakYtelseType from '../../../constants/FagsakYtelseType';
99
import { DiagnosekodeResponse } from '../../../types/DiagnosekodeResponse';
@@ -79,15 +79,12 @@ const sykdomTittel = (fagsakYtelseType: FagsakYtelseType) => {
7979

8080
const MedisinskVilkår = (): JSX.Element => {
8181
const [state, dispatch] = React.useReducer(medisinskVilkårReducer, {
82-
isLoading: true,
83-
hasError: null,
8482
activeStep: null,
8583
markedStep: null,
86-
sykdomsstegStatus: null,
8784
nyeDokumenterSomIkkeErVurdert: [],
8885
});
8986

90-
const { isLoading, hasError, activeStep, markedStep, sykdomsstegStatus, nyeDokumenterSomIkkeErVurdert } = state;
87+
const { activeStep, markedStep, nyeDokumenterSomIkkeErVurdert } = state;
9188
const { endpoints, httpErrorHandler, visFortsettknapp, fagsakYtelseType } = React.useContext(ContainerContext);
9289

9390
const dokumentStegForSakstype = stegForSakstype(fagsakYtelseType).find(stepObj => stepObj.id === StepId.Dokument);
@@ -110,36 +107,40 @@ const MedisinskVilkår = (): JSX.Element => {
110107
.get<DiagnosekodeResponse>(endpoints.diagnosekoder, httpErrorHandler)
111108
.then((response: DiagnosekodeResponse) => response);
112109

110+
const hentStatus = () =>
111+
httpUtils.get<SykdomsstegStatusResponse>(endpoints.status, httpErrorHandler, {
112+
signal: controller.signal,
113+
});
114+
113115
const { isLoading: diagnosekoderLoading, data: diagnosekoderData } = useQuery(
114116
'diagnosekodeResponse',
115117
hentDiagnosekoder,
116118
{ enabled: !erFagsakOLPEllerPLS(fagsakYtelseType) },
117119
);
118120

121+
const {
122+
isLoading: statusLoading,
123+
data: sykdomstegStatus,
124+
error: hasError,
125+
refetch: refetchSykdomstegStatus,
126+
} = useQuery('status', hentStatus);
127+
119128
const diagnosekoder = endpoints.diagnosekoder ? diagnosekoderData?.diagnosekoder : [];
120129
const diagnosekoderTekst = diagnosekoder?.length > 0 ? `${diagnosekoder?.join(', ')}` : 'Kode mangler';
121130

122-
const hentSykdomsstegStatus = async () => {
123-
try {
124-
const status = await httpUtils.get<SykdomsstegStatusResponse>(endpoints.status, httpErrorHandler, {
125-
signal: controller.signal,
126-
});
127-
const nesteSteg = finnNesteStegFn(status);
131+
useEffect(() => {
132+
if (!statusLoading) {
133+
const nesteSteg = finnNesteStegFn(sykdomstegStatus);
128134
dispatch({
129135
type: ActionType.UPDATE_STATUS,
130-
sykdomsstegStatus: status,
131136
step: nesteSteg,
132137
});
133-
return status;
134-
} catch (error) {
135-
dispatch({
136-
type: ActionType.SHOW_ERROR,
137-
});
138-
throw new Error(error);
139138
}
140-
};
139+
}, [sykdomstegStatus, statusLoading]);
141140

142-
const hentNyeDokumenterSomIkkeErVurdertHvisNødvendig = (status): Promise<[SykdomsstegStatusResponse, Dokument[]]> =>
141+
const hentNyeDokumenterSomIkkeErVurdertHvisNødvendig = (
142+
status: SykdomsstegStatusResponse,
143+
): Promise<[SykdomsstegStatusResponse, Dokument[]]> =>
143144
new Promise((resolve, reject) => {
144145
if (status.nyttDokumentHarIkkekontrollertEksisterendeVurderinger) {
145146
httpUtils
@@ -155,11 +156,11 @@ const MedisinskVilkår = (): JSX.Element => {
155156
}
156157
});
157158

158-
React.useEffect(() => {
159-
hentSykdomsstegStatus()
160-
.then(hentNyeDokumenterSomIkkeErVurdertHvisNødvendig)
161-
.then(([sykdomsstegStatusResponse, nyeDokumenterSomIkkeErVurdertResponse]) => {
162-
const step = finnNesteStegFn(sykdomsstegStatusResponse, true);
159+
useEffect(() => {
160+
refetchSykdomstegStatus()
161+
.then(res => hentNyeDokumenterSomIkkeErVurdertHvisNødvendig(res.data))
162+
.then(([status, nyeDokumenterSomIkkeErVurdertResponse]) => {
163+
const step = finnNesteStegFn(status, true);
163164
if (step !== null) {
164165
dispatch({
165166
type: ActionType.MARK_AND_ACTIVATE_STEP,
@@ -181,12 +182,12 @@ const MedisinskVilkår = (): JSX.Element => {
181182
}, []);
182183

183184
const navigerTilNesteSteg = () => {
184-
const nesteSteg = finnNesteStegFn(sykdomsstegStatus);
185+
const nesteSteg = finnNesteStegFn(sykdomstegStatus);
185186
dispatch({ type: ActionType.NAVIGATE_TO_STEP, step: nesteSteg });
186187
};
187188

188189
const navigerTilSteg = (nesteSteg: Step, ikkeMarkerSteg?: boolean) => {
189-
if (sykdomsstegStatus.kanLøseAksjonspunkt || ikkeMarkerSteg) {
190+
if (sykdomstegStatus.kanLøseAksjonspunkt || ikkeMarkerSteg) {
190191
dispatch({ type: ActionType.ACTIVATE_STEP_AND_CLEAR_MARKING, step: nesteSteg });
191192
} else {
192193
dispatch({ type: ActionType.NAVIGATE_TO_STEP, step: nesteSteg });
@@ -195,27 +196,26 @@ const MedisinskVilkår = (): JSX.Element => {
195196

196197
const afterEndringerUtifraNyeDokumenterRegistrert = () => {
197198
dispatch({ type: ActionType.ENDRINGER_UTIFRA_NYE_DOKUMENTER_REGISTRERT });
198-
hentSykdomsstegStatus().then(
199-
({
199+
refetchSykdomstegStatus().then(({ data }) => {
200+
const {
200201
kanLøseAksjonspunkt,
201202
manglerVurderingAvKontinuerligTilsynOgPleie,
202203
manglerVurderingAvToOmsorgspersoner,
203204
manglerVurderingAvLangvarigSykdom,
204-
}) => {
205-
if (kanLøseAksjonspunkt) {
206-
navigerTilSteg(toOmsorgspersonerSteg, true);
207-
} else if (!manglerVurderingAvKontinuerligTilsynOgPleie && manglerVurderingAvToOmsorgspersoner) {
208-
navigerTilSteg(toOmsorgspersonerSteg);
209-
} else if (manglerVurderingAvLangvarigSykdom) {
210-
navigerTilSteg(langvarigSykdomSteg);
211-
}
212-
},
213-
);
205+
} = data;
206+
if (kanLøseAksjonspunkt) {
207+
navigerTilSteg(toOmsorgspersonerSteg, true);
208+
} else if (!manglerVurderingAvKontinuerligTilsynOgPleie && manglerVurderingAvToOmsorgspersoner) {
209+
navigerTilSteg(toOmsorgspersonerSteg);
210+
} else if (manglerVurderingAvLangvarigSykdom) {
211+
navigerTilSteg(langvarigSykdomSteg);
212+
}
213+
});
214214
};
215215

216-
const kanLøseAksjonspunkt = sykdomsstegStatus?.kanLøseAksjonspunkt;
217-
const harDataSomIkkeHarBlittTattMedIBehandling = sykdomsstegStatus?.harDataSomIkkeHarBlittTattMedIBehandling;
218-
const manglerVurderingAvNyeDokumenter = sykdomsstegStatus?.nyttDokumentHarIkkekontrollertEksisterendeVurderinger;
216+
const kanLøseAksjonspunkt = sykdomstegStatus?.kanLøseAksjonspunkt;
217+
const harDataSomIkkeHarBlittTattMedIBehandling = sykdomstegStatus?.harDataSomIkkeHarBlittTattMedIBehandling;
218+
const manglerVurderingAvNyeDokumenter = sykdomstegStatus?.nyttDokumentHarIkkekontrollertEksisterendeVurderinger;
219219

220220
const steps: Step[] = stegForSakstype(fagsakYtelseType);
221221

@@ -235,7 +235,7 @@ const MedisinskVilkår = (): JSX.Element => {
235235
return {};
236236
}, [activeStep]);
237237
return (
238-
<PageContainer isLoading={isLoading} hasError={hasError}>
238+
<PageContainer isLoading={statusLoading} hasError={hasError}>
239239
<Infostripe
240240
element={
241241
!erFagsakOLPEllerPLS(fagsakYtelseType) ? (
@@ -314,8 +314,8 @@ const MedisinskVilkår = (): JSX.Element => {
314314
<StruktureringAvDokumentasjon
315315
navigerTilNesteSteg={navigerTilNesteSteg}
316316
hentSykdomsstegStatus={() =>
317-
hentSykdomsstegStatus()
318-
.then(hentNyeDokumenterSomIkkeErVurdertHvisNødvendig)
317+
refetchSykdomstegStatus()
318+
.then(res => hentNyeDokumenterSomIkkeErVurdertHvisNødvendig(res.data))
319319
.then(([status, dokumenter]) => {
320320
dispatch({
321321
type: ActionType.UPDATE_NYE_DOKUMENTER_SOM_IKKE_ER_VURDERT,
@@ -324,42 +324,42 @@ const MedisinskVilkår = (): JSX.Element => {
324324
return [status, dokumenter];
325325
})
326326
}
327-
sykdomsstegStatus={sykdomsstegStatus}
327+
sykdomsstegStatus={sykdomstegStatus}
328328
/>
329329
)}
330330
{activeStep === tilsynOgPleieSteg && (
331331
<VurderingContext.Provider value={contextValue}>
332332
<VilkårsvurderingAvTilsynOgPleie
333333
navigerTilNesteSteg={navigerTilSteg}
334-
hentSykdomsstegStatus={hentSykdomsstegStatus}
335-
sykdomsstegStatus={sykdomsstegStatus}
334+
hentSykdomsstegStatus={() => refetchSykdomstegStatus().then(({ data }) => data)}
335+
sykdomsstegStatus={sykdomstegStatus}
336336
/>
337337
</VurderingContext.Provider>
338338
)}
339339
{activeStep === langvarigSykdomSteg && (
340340
<VurderingContext.Provider value={contextValue}>
341341
<VilkårsvurderingLangvarigSykdom
342342
navigerTilNesteSteg={navigerTilSteg}
343-
hentSykdomsstegStatus={hentSykdomsstegStatus}
344-
sykdomsstegStatus={sykdomsstegStatus}
343+
hentSykdomsstegStatus={() => refetchSykdomstegStatus().then(({ data }) => data)}
344+
sykdomsstegStatus={sykdomstegStatus}
345345
/>
346346
</VurderingContext.Provider>
347347
)}
348348
{activeStep === livetsSluttfaseSteg && (
349349
<VurderingContext.Provider value={contextValue}>
350350
<VilkarsvurderingAvLivetsSluttfase
351351
navigerTilNesteSteg={navigerTilSteg}
352-
hentSykdomsstegStatus={hentSykdomsstegStatus}
353-
sykdomsstegStatus={sykdomsstegStatus}
352+
hentSykdomsstegStatus={() => refetchSykdomstegStatus().then(({ data }) => data)}
353+
sykdomsstegStatus={sykdomstegStatus}
354354
/>
355355
</VurderingContext.Provider>
356356
)}
357357
{activeStep === toOmsorgspersonerSteg && (
358358
<VurderingContext.Provider value={contextValue}>
359359
<VilkårsvurderingAvToOmsorgspersoner
360360
navigerTilNesteSteg={navigerTilSteg}
361-
hentSykdomsstegStatus={hentSykdomsstegStatus}
362-
sykdomsstegStatus={sykdomsstegStatus}
361+
hentSykdomsstegStatus={() => refetchSykdomstegStatus().then(({ data }) => data)}
362+
sykdomsstegStatus={sykdomstegStatus}
363363
/>
364364
</VurderingContext.Provider>
365365
)}

packages/fakta-medisinsk-vilkår/src/ui/components/medisinsk-vilkår/reducer.ts

+2-14
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,11 @@
1-
import ActionType from './actionTypes';
1+
import Dokument from '../../../types/Dokument';
22
import Step, { dokumentSteg } from '../../../types/Step';
33
import SykdomsstegStatusResponse from '../../../types/SykdomsstegStatusResponse';
4-
import Dokument from '../../../types/Dokument';
4+
import ActionType from './actionTypes';
55

66
interface State {
7-
isLoading: boolean;
8-
hasError: boolean;
97
activeStep: Step;
108
markedStep: Step;
11-
sykdomsstegStatus: SykdomsstegStatusResponse;
129
nyeDokumenterSomIkkeErVurdert: Dokument[];
1310
}
1411

@@ -27,7 +24,6 @@ const medisinskVilkårReducer = (state: State, action: Action): State => {
2724
nyeDokumenterSomIkkeErVurdert: action.nyeDokumenterSomIkkeErVurdert || [],
2825
activeStep: action.step || dokumentSteg,
2926
markedStep: action.step,
30-
isLoading: false,
3127
};
3228
}
3329
case ActionType.ACTIVATE_STEP: {
@@ -48,7 +44,6 @@ const medisinskVilkårReducer = (state: State, action: Action): State => {
4844
...state,
4945
nyeDokumenterSomIkkeErVurdert: action.nyeDokumenterSomIkkeErVurdert || [],
5046
activeStep: dokumentSteg,
51-
isLoading: false,
5247
};
5348
}
5449
case ActionType.NAVIGATE_TO_STEP: {
@@ -61,16 +56,9 @@ const medisinskVilkårReducer = (state: State, action: Action): State => {
6156
case ActionType.UPDATE_STATUS: {
6257
return {
6358
...state,
64-
sykdomsstegStatus: action.sykdomsstegStatus,
6559
markedStep: action.step,
6660
};
6761
}
68-
case ActionType.SHOW_ERROR: {
69-
return {
70-
...state,
71-
hasError: true,
72-
};
73-
}
7462
case ActionType.ENDRINGER_UTIFRA_NYE_DOKUMENTER_REGISTRERT: {
7563
return {
7664
...state,

0 commit comments

Comments
 (0)