From 7c6e4fa660d54a9283f23a19c7466dda4edcf93f Mon Sep 17 00:00:00 2001 From: "Abrha K. Abrha" <116550783+abrhanav@users.noreply.github.com> Date: Fri, 27 Sep 2024 09:23:55 +0200 Subject: [PATCH] =?UTF-8?q?[TPO-67]=20Dato=20velger=20for=20oppf=C3=B8lgin?= =?UTF-8?q?g=20tab=20(#2303)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [TPO-67] Dato velger for oppfølging tab * [TPO-67] Dato velger for oppfølging tab --- .../oppfolging/OppfolgingContainer.tsx | 49 +- .../oppfolging/OppfolgingDatoKomponent.tsx | 184 -- .../OppfolgingDetaljerKomponent.tsx | 8 +- .../infotabs/oppfolging/OppfolgingFilter.tsx | 70 + .../oppfolging/OppfolgingVisningKomponent.tsx | 43 - .../OppfolgingContainer.test.tsx.snap | 2081 +++++++++++++++-- .../infotabs/oversikt/OppfolgingOversikt.tsx | 2 +- .../filter/EgendefinertDatoInputs.tsx | 2 +- .../__snapshots__/Ytelser.test.tsx.snap | 200 -- src/redux/oppfolging/actions.ts | 6 +- src/redux/oppfolging/reducer.ts | 5 +- src/redux/oppfolging/types.ts | 20 +- src/rest/resources/oppfolgingResource.tsx | 34 +- src/rest/resources/utbetalingerResource.tsx | 2 +- 14 files changed, 2056 insertions(+), 650 deletions(-) delete mode 100644 src/app/personside/infotabs/oppfolging/OppfolgingDatoKomponent.tsx create mode 100644 src/app/personside/infotabs/oppfolging/OppfolgingFilter.tsx delete mode 100644 src/app/personside/infotabs/oppfolging/OppfolgingVisningKomponent.tsx diff --git a/src/app/personside/infotabs/oppfolging/OppfolgingContainer.tsx b/src/app/personside/infotabs/oppfolging/OppfolgingContainer.tsx index 39ce0d18e..5514e741b 100644 --- a/src/app/personside/infotabs/oppfolging/OppfolgingContainer.tsx +++ b/src/app/personside/infotabs/oppfolging/OppfolgingContainer.tsx @@ -1,19 +1,46 @@ import * as React from 'react'; -import OppfolgingVisning from './OppfolgingVisningKomponent'; -import { BigCenteredLazySpinner } from '../../../../components/BigCenteredLazySpinner'; import oppfolgingResource from '../../../../rest/resources/oppfolgingResource'; -import AlertStripe from 'nav-frontend-alertstriper'; +import { useAppState } from '../../../../utils/customHooks'; +import OppfolgingFilter from './OppfolgingFilter'; +import VisOppfolgingDetaljer from './OppfolgingDetaljerKomponent'; +import SykefraversoppfolgingEkspanderbartPanel from './SykefraversoppfolgingEkspanderbartPanel'; +import OppfolgingYtelserEkspanderbartPanel from './OppfolgingYtelserEkspanderbartPanel'; +import styled from 'styled-components'; +import theme from '../../../../styles/personOversiktTheme'; +import { DetaljertOppfolging } from '../../../../models/oppfolging'; -function OppfolgingContainer() { - const oppfolging = oppfolgingResource.useFetch(); +const OppfolgingStyle = styled.div` + > *:not(:last-child) { + margin-bottom: ${theme.margin.layout}; + } + padding: ${theme.margin.layout}; +`; - if (oppfolging.isLoading) { - return BigCenteredLazySpinner; - } else if (oppfolging.isError) { - return Kunne ikke laste inn informasjon om brukers oppfølging; - } else { - return ; +const DetaljertInfoWrapper = styled.div` + display: flex; + flex-direction: row; + > *:last-child { + margin-left: ${theme.margin.layout}; + flex-basis: 75%; } +`; + +function OppfolgingContainer() { + const periode = useAppState((appState) => appState.oppfolging.periode); + const fraTilDato = periode.egendefinertPeriode; + const oppfolgingResponse = oppfolgingResource.useFetch(fraTilDato.fra, fraTilDato.til); + const oppfolging = oppfolgingResponse.data as DetaljertOppfolging; + + return ( + + + + + + + + + ); } export default OppfolgingContainer; diff --git a/src/app/personside/infotabs/oppfolging/OppfolgingDatoKomponent.tsx b/src/app/personside/infotabs/oppfolging/OppfolgingDatoKomponent.tsx deleted file mode 100644 index 35f4ef460..000000000 --- a/src/app/personside/infotabs/oppfolging/OppfolgingDatoKomponent.tsx +++ /dev/null @@ -1,184 +0,0 @@ -import * as React from 'react'; -import styled from 'styled-components'; -import { Undertittel } from 'nav-frontend-typografi'; -import theme, { pxToRem } from '../../../../styles/personOversiktTheme'; -import { Knapp } from 'nav-frontend-knapper'; -import { settValgtPeriode } from '../../../../redux/oppfolging/actions'; -import { useDispatch } from 'react-redux'; -import { loggEvent } from '../../../../utils/logger/frontendLogger'; -import { useRef } from 'react'; -import { guid } from 'nav-frontend-js-utils'; -import { SkjemaelementFeilmelding } from 'nav-frontend-skjema'; -import Panel from 'nav-frontend-paneler'; -import { Datepicker, isISODateString } from 'nav-datovelger'; -import { ISO_DATE_STRING_FORMAT, INPUT_DATE_STRING_FORMAT } from 'nav-datovelger/lib/utils/dateFormatUtils'; -import { DatepickerLimitations } from 'nav-datovelger/lib/types'; -import dayjs, { Dayjs } from 'dayjs'; -import { useAppState } from '../../../../utils/customHooks'; -import oppfolgingResource from '../../../../rest/resources/oppfolgingResource'; - -const DatoVelgerWrapper = styled.div` - position: relative; - z-index: 50; - > * { - margin-bottom: 1rem; - } -`; - -const StyledPanel = styled(Panel)` - padding: ${pxToRem(15)}; -`; - -const TittelWrapper = styled.div` - &:focus { - outline: none; - } - margin-bottom: ${theme.margin.layout}; -`; - -const tidligsteDato: Dayjs = dayjs().subtract(10, 'years').startOf('day'); -const senesteDato: Dayjs = dayjs().add(1, 'year').endOf('day'); - -const isoTidligsteDato = tidligsteDato.format(ISO_DATE_STRING_FORMAT); -const isoSenesteDato = senesteDato.format(ISO_DATE_STRING_FORMAT); - -const periodeValidering = [ - { - // eslint-disable-next-line @typescript-eslint/no-unused-vars - erUgyldig(fra: Dayjs, til: Dayjs) { - return !fra.isValid(); - }, - feilmelding: 'Du må velge gyldig fra-dato. Gyldig datoformat er dd.mm.åååå' - }, - { - erUgyldig(fra: Dayjs, til: Dayjs) { - return !til.isValid(); - }, - feilmelding: 'Du må velge gyldig til-dato. Gyldig datoformat er dd.mm.åååå' - }, - { - erUgyldig(fra: Dayjs, til: Dayjs) { - return fra.isAfter(til); - }, - feilmelding: 'Fra-dato kan ikke være senere enn til-dato' - }, - { - erUgyldig(fra: Dayjs, til: Dayjs) { - return til.isAfter(senesteDato); - }, - feilmelding: `Du kan ikke velge dato etter ${senesteDato.format(INPUT_DATE_STRING_FORMAT)}` - }, - { - // eslint-disable-next-line @typescript-eslint/no-unused-vars - erUgyldig(fra: Dayjs, til: Dayjs) { - return fra.isBefore(tidligsteDato); - }, - feilmelding: `Du kan ikke velge en dato før ${tidligsteDato.format(INPUT_DATE_STRING_FORMAT)}` - } -]; - -function getDatoFeilmelding(fra: string, til: string) { - const fraDato = dayjs(fra, ISO_DATE_STRING_FORMAT); - const tilDato = dayjs(til, ISO_DATE_STRING_FORMAT); - const feilmelding: string | undefined = periodeValidering.find((validering) => - validering.erUgyldig(fraDato, tilDato) - )?.feilmelding; - if (feilmelding) { - return {feilmelding}; - } - return null; -} - -function DatoInputs() { - const update = oppfolgingResource.useFetch(); - - const valgtPeriode = useAppState((appState) => appState.oppfolging.valgtPeriode); - const fra = valgtPeriode.fra; - const til = valgtPeriode.til; - - const dispatch = useDispatch(); - - const periodeFeilmelding = getDatoFeilmelding(fra, til); - const avgrensninger: DatepickerLimitations = { - minDate: isoTidligsteDato, - maxDate: isoSenesteDato - }; - - const onClickHandler = () => { - if (update.isLoading || periodeFeilmelding !== null) { - return; - } - loggEvent('SøkNyPeriode', 'Oppfølging'); - update.refetch(); - }; - - return ( - - - dispatch(settValgtPeriode({ fra: dato }))} - inputProps={{ - name: 'Fra dato', - 'aria-invalid': fra !== '' && isISODateString(fra) === false - }} - showYearSelector={true} - limitations={avgrensninger} - dayPickerProps={{ - onMonthChange(dato: Date) { - dispatch( - settValgtPeriode({ - fra: dayjs(dato).format(ISO_DATE_STRING_FORMAT) - }) - ); - } - }} - /> - - dispatch(settValgtPeriode({ til: dato }))} - inputProps={{ - name: 'Til dato', - 'aria-invalid': til !== '' && isISODateString(til) === false - }} - showYearSelector={true} - limitations={avgrensninger} - dayPickerProps={{ - onMonthChange(dato: Date) { - dispatch( - settValgtPeriode({ - til: dayjs(dato).format(ISO_DATE_STRING_FORMAT) - }) - ); - } - }} - /> - {periodeFeilmelding} - - Søk - - - ); -} - -function OppfolgingDatoPanel() { - const headerId = useRef(guid()); - - return ( - -
- - Oppfølging og ytelser vises for perioden: - - -
- - ); -} - -export default OppfolgingDatoPanel; diff --git a/src/app/personside/infotabs/oppfolging/OppfolgingDetaljerKomponent.tsx b/src/app/personside/infotabs/oppfolging/OppfolgingDetaljerKomponent.tsx index 162d9f180..f6b78214e 100644 --- a/src/app/personside/infotabs/oppfolging/OppfolgingDetaljerKomponent.tsx +++ b/src/app/personside/infotabs/oppfolging/OppfolgingDetaljerKomponent.tsx @@ -9,7 +9,7 @@ import { useRef } from 'react'; import { guid } from 'nav-frontend-js-utils'; import Panel from 'nav-frontend-paneler'; import { getErUnderOppfolging, getOppfolgingEnhet, getVeileder } from './oppfolging-utils'; -import { AlertStripeAdvarsel } from 'nav-frontend-alertstriper'; +import AlertStripe, { AlertStripeAdvarsel } from 'nav-frontend-alertstriper'; const StyledPanel = styled(Panel)` padding: ${pxToRem(15)}; @@ -20,6 +20,7 @@ const StyledPanel = styled(Panel)` interface Props { detaljertOppfolging: DetaljertOppfolging; + isError?: boolean; } function VisOppfolgingDetaljer(props: Props) { @@ -30,7 +31,9 @@ function VisOppfolgingDetaljer(props: Props) { detaljer.oppfolging === null ? ( Kunne ikke hente ut all oppfølgings-informasjon ) : null; - + const errorLoadingData = props.isError ? ( + Kunne ikke laste inn informasjon om brukers oppfølging + ) : null; const descriptionListProps = { 'Er under oppfølging': getErUnderOppfolging(detaljer.oppfolging), Oppfølgingsenhet: getOppfolgingEnhet(detaljer.oppfolging), @@ -46,6 +49,7 @@ function VisOppfolgingDetaljer(props: Props) {
Arbeidsoppfølging + {errorLoadingData} {ikkeFullstendigData}
diff --git a/src/app/personside/infotabs/oppfolging/OppfolgingFilter.tsx b/src/app/personside/infotabs/oppfolging/OppfolgingFilter.tsx new file mode 100644 index 000000000..600879397 --- /dev/null +++ b/src/app/personside/infotabs/oppfolging/OppfolgingFilter.tsx @@ -0,0 +1,70 @@ +import * as React from 'react'; +import styled from 'styled-components'; +import { Undertittel } from 'nav-frontend-typografi'; +import theme, { pxToRem } from '../../../../styles/personOversiktTheme'; +import { settValgtPeriode } from '../../../../redux/oppfolging/actions'; +import { useDispatch } from 'react-redux'; +import { useCallback, useRef } from 'react'; +import { guid } from 'nav-frontend-js-utils'; +import Panel from 'nav-frontend-paneler'; +import { useAppState } from '../../../../utils/customHooks'; +import FiltreringPeriode from '../utbetalinger/filter/FilterPeriode'; +import { PeriodeOptions } from '../../../../redux/utbetalinger/types'; + +const StyledPanel = styled(Panel)` + padding: ${pxToRem(15)}; +`; + +const TittelWrapper = styled.div` + &:focus { + outline: none; + } + margin-bottom: ${theme.margin.layout}; +`; + +const InputPanel = styled.form` + display: flex; + flex-direction: column; + margin-top: 1.5rem; + > *:first-child { + margin-bottom: 0.5rem; + } + > * { + margin-top: 0.5rem; + } + .skjemaelement--horisontal { + margin-bottom: 0.4rem; + } +`; + +function OppfolgingFilter() { + const headerId = useRef(guid()); + const dispatch = useDispatch(); + const periode = useAppState((appState) => appState.oppfolging.periode); + const updateFilter = useCallback( + (change: PeriodeOptions) => { + dispatch(settValgtPeriode(change)); + }, + [dispatch] + ); + + return ( + +
+ + Oppfølging og ytelser vises for perioden: + + + { + updateFilter(change); + }} + /> + +
+ + ); +} + +export default OppfolgingFilter; diff --git a/src/app/personside/infotabs/oppfolging/OppfolgingVisningKomponent.tsx b/src/app/personside/infotabs/oppfolging/OppfolgingVisningKomponent.tsx deleted file mode 100644 index c981fe662..000000000 --- a/src/app/personside/infotabs/oppfolging/OppfolgingVisningKomponent.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import * as React from 'react'; -import { DetaljertOppfolging } from '../../../../models/oppfolging'; -import styled from 'styled-components'; -import theme from '../../../../styles/personOversiktTheme'; -import OppfolgingDatoPanel from './OppfolgingDatoKomponent'; -import VisOppfolgingDetaljer from './OppfolgingDetaljerKomponent'; -import SykefraversoppfolgingEkspanderbartPanel from './SykefraversoppfolgingEkspanderbartPanel'; -import OppfolgingYtelserEkspanderbartPanel from './OppfolgingYtelserEkspanderbartPanel'; - -interface VisningProps { - detaljertOppfolging: DetaljertOppfolging; -} - -const OppfolgingStyle = styled.div` - > *:not(:last-child) { - margin-bottom: ${theme.margin.layout}; - } - padding: ${theme.margin.layout}; -`; - -const DetaljertInfoWrapper = styled.div` - display: flex; - flex-direction: row; - > *:last-child { - margin-left: ${theme.margin.layout}; - flex-basis: 75%; - } -`; - -function OppfolgingVisning(props: VisningProps) { - return ( - - - - - - - - - ); -} - -export default OppfolgingVisning; diff --git a/src/app/personside/infotabs/oppfolging/__snapshots__/OppfolgingContainer.test.tsx.snap b/src/app/personside/infotabs/oppfolging/__snapshots__/OppfolgingContainer.test.tsx.snap index 49a24f4bb..c24e09695 100644 --- a/src/app/personside/infotabs/oppfolging/__snapshots__/OppfolgingContainer.test.tsx.snap +++ b/src/app/personside/infotabs/oppfolging/__snapshots__/OppfolgingContainer.test.tsx.snap @@ -1,13 +1,45 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[`Viser oppfølgingcontainer med alt innhold 1`] = ` -.c4 { - position: relative; - z-index: 50; +.c8 { + margin-top: 0.5rem; + margin-bottom: 0.5rem; } -.c4 >* { - margin-bottom: 1rem; +.c5 { + display: flex; + flex-direction: column; + margin-top: 1.5rem; +} + +.c5 >*:first-child { + margin-bottom: 0.5rem; +} + +.c5 >* { + margin-top: 0.5rem; +} + +.c5 .skjemaelement--horisontal { + margin-bottom: 0.4rem; +} + +.c7 { + margin-bottom: 0.5rem; +} + +.c6 { + border: none; + margin: 0; + padding: 0; +} + +.c6 >*:first-child { + margin-bottom: 0.8rem; +} + +.c6 >*:last-child { + margin-bottom: 0; } .c2 { @@ -22,54 +54,72 @@ exports[`Viser oppfølgingcontainer med alt innhold 1`] = ` outline: none; } -.c6 { +.c4 { + display: flex; + flex-direction: column; + margin-top: 1.5rem; +} + +.c4 >*:first-child { + margin-bottom: 0.5rem; +} + +.c4 >* { + margin-top: 0.5rem; +} + +.c4 .skjemaelement--horisontal { + margin-bottom: 0.4rem; +} + +.c10 { display: flex; flex-wrap: wrap; } -.c6 dt { +.c10 dt { color: #645f5a; } -.c6 >div { +.c10 >div { margin: 0.5625rem 0; padding-right: 0.7rem; width: 13rem; overflow-wrap: break-word; } -.c5 { +.c9 { padding: 0.9375rem; } -.c5 >*:first-child { +.c9 >*:first-child { margin-bottom: 1rem; } -.c8 { +.c12 { display: flex; flex-wrap: wrap; width: 100%; } -.c8 >*:first-child { +.c12 >*:first-child { flex-basis: 10em; flex-shrink: 0; } -.c8 >* { +.c12 >* { white-space: nowrap; } -.c8 >*:not(:last-child) { +.c12 >*:not(:last-child) { margin-right: 2rem; } -.c7 { +.c11 { padding: 0rem; } -.c7 .ekspanderbartPanel__hode { +.c11 .ekspanderbartPanel__hode { position: sticky; top: 0; border-bottom: solid 0.0625rem #b7b1a9; @@ -116,179 +166,1872 @@ exports[`Viser oppfølgingcontainer med alt innhold 1`] = ` Oppfølging og ytelser vises for perioden: -
- -
-
+ + Velg periode +
- -
+
+
+
+ + +
-
-
- -
+
+
+ + +
+
+
+
+ + +
+
+
- - +
+
+
+
- + Til + +
- - Kalenderikon - - + + + + Åpne datovelger + + + + +
+
+
+
+ -
- -
+ +

, ifData: (data: DetaljertOppfolging) => }); diff --git a/src/app/personside/infotabs/utbetalinger/filter/EgendefinertDatoInputs.tsx b/src/app/personside/infotabs/utbetalinger/filter/EgendefinertDatoInputs.tsx index 1737ba3c1..e4b9b8b2b 100644 --- a/src/app/personside/infotabs/utbetalinger/filter/EgendefinertDatoInputs.tsx +++ b/src/app/personside/infotabs/utbetalinger/filter/EgendefinertDatoInputs.tsx @@ -72,7 +72,7 @@ function EgendefinertDatoInputs(props: EgendefinertDatoInputsProps) { return periodeValidering.find((validering) => validering.erUgyldig(fraDato, tilDato))?.feilmelding; }; - const fromDate = dayjs().subtract(50, 'year').startOf('year').toDate(); + const fromDate = dayjs().subtract(10, 'year').startOf('year').toDate(); const toDate = dayjs().toDate(); return ( diff --git a/src/app/personside/infotabs/ytelser/__snapshots__/Ytelser.test.tsx.snap b/src/app/personside/infotabs/ytelser/__snapshots__/Ytelser.test.tsx.snap index 9af8aa786..eccf756b5 100644 --- a/src/app/personside/infotabs/ytelser/__snapshots__/Ytelser.test.tsx.snap +++ b/src/app/personside/infotabs/ytelser/__snapshots__/Ytelser.test.tsx.snap @@ -769,206 +769,6 @@ exports[`Om Ytelser matcher snapshot 1`] = ` > 1960 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ): SetValgtPeriode { +export function settValgtPeriode(change: PeriodeOptions): SetValgtPeriode { return { type: OppfolgingActionTypes.SetValgtPeriode, periodeEndring: change diff --git a/src/redux/oppfolging/reducer.ts b/src/redux/oppfolging/reducer.ts index b1b674318..4c3f081ac 100644 --- a/src/redux/oppfolging/reducer.ts +++ b/src/redux/oppfolging/reducer.ts @@ -5,10 +5,7 @@ export function oppfolgingReducer(state: OppfolgingState = initialState, action: case OppfolgingActionTypes.SetValgtPeriode: return { ...state, - valgtPeriode: { - ...state.valgtPeriode, - ...action.periodeEndring - } + periode: action.periodeEndring }; case OppfolgingActionTypes.SetSykefraverEkspandert: return { diff --git a/src/redux/oppfolging/types.ts b/src/redux/oppfolging/types.ts index e5fbcceba..a12347e81 100644 --- a/src/redux/oppfolging/types.ts +++ b/src/redux/oppfolging/types.ts @@ -1,20 +1,20 @@ import dayjs from 'dayjs'; - -export interface VisOppfolgingFraTilDato { - fra: string; - til: string; -} +import { PeriodeOptions, PeriodeValg } from '../utbetalinger/types'; +import { ISO_DATE_STRING_FORMAT } from 'nav-datovelger/lib/utils/dateFormatUtils'; export interface OppfolgingState { - valgtPeriode: VisOppfolgingFraTilDato; + periode: PeriodeOptions; sykefraverEkspandert: boolean; ytelserEkspandert: boolean; } export const initialState: OppfolgingState = { - valgtPeriode: { - fra: dayjs().subtract(2, 'month').format('YYYY-MM-DD'), - til: dayjs().add(1, 'month').format('YYYY-MM-DD') + periode: { + radioValg: PeriodeValg.EGENDEFINERT, + egendefinertPeriode: { + fra: dayjs().subtract(2, 'year').format(ISO_DATE_STRING_FORMAT), + til: dayjs().format(ISO_DATE_STRING_FORMAT) + } }, sykefraverEkspandert: false, ytelserEkspandert: false @@ -28,7 +28,7 @@ export enum OppfolgingActionTypes { export interface SetValgtPeriode { type: OppfolgingActionTypes.SetValgtPeriode; - periodeEndring: Partial; + periodeEndring: PeriodeOptions; } export interface SetSykefraverEkspandertAction { diff --git a/src/rest/resources/oppfolgingResource.tsx b/src/rest/resources/oppfolgingResource.tsx index 761f68dc2..f3154db6c 100644 --- a/src/rest/resources/oppfolgingResource.tsx +++ b/src/rest/resources/oppfolgingResource.tsx @@ -4,39 +4,31 @@ import { CenteredLazySpinner } from '../../components/LazySpinner'; import AlertStripe from 'nav-frontend-alertstriper'; import * as React from 'react'; import { apiBaseUri } from '../../api/config'; -import { VisOppfolgingFraTilDato } from '../../redux/oppfolging/types'; -import { useAppState } from '../../utils/customHooks'; +import { useFodselsnummer } from '../../utils/customHooks'; import { useQuery, UseQueryResult } from '@tanstack/react-query'; import { FetchError, post } from '../../api/api'; - -function queryKey(fnr: string): [string, string] { - return ['oppfolging', fnr]; -} - -function urlUtenFnrIPath(periode: VisOppfolgingFraTilDato): string { - const queryParams = `?startDato=${periode.fra}&sluttDato=${periode.til}`; - return `${apiBaseUri}/v2/oppfolging/ytelserogkontrakter${queryParams}`; -} +import { getUtbetalingerForSiste30DagerDatoer } from '../../app/personside/infotabs/utbetalinger/utils/utbetalinger-utils'; +import dayjs from 'dayjs'; const defaults: DefaultConfig = { ifPending: , ifError: Kunne ikke laste inn informasjon om brukers oppfølging }; -function useReduxData(): [string, VisOppfolgingFraTilDato] { - return useAppState((appState) => [appState.gjeldendeBruker.fødselsnummer, appState.oppfolging.valgtPeriode]); -} - const resource = { - useFetch(): UseQueryResult { - const [fnr, periode] = useReduxData(); + useFetch(fom: string, tom: string): UseQueryResult { + const fnr = useFodselsnummer(); + const queryParams = `?startDato=${fom}&sluttDato=${tom}`; return useQuery({ - queryKey: queryKey(fnr), - queryFn: () => post(urlUtenFnrIPath(periode), { fnr }) + queryKey: ['oppfolging', fnr, fom, tom], + queryFn: () => post(`${apiBaseUri}/v2/oppfolging/ytelserogkontrakter${queryParams}`, { fnr }) }); }, - useRenderer(renderer: RendererOrConfig) { - const response = this.useFetch(); + useOversiktRenderer(renderer: RendererOrConfig) { + const periode = getUtbetalingerForSiste30DagerDatoer(); + const fom = dayjs(periode.fra).format('YYYY-MM-DD'); + const tom = dayjs(periode.til).format('YYYY-MM-DD'); + const response = this.useFetch(fom, tom); return useRest(response, applyDefaults(defaults, renderer)); } }; diff --git a/src/rest/resources/utbetalingerResource.tsx b/src/rest/resources/utbetalingerResource.tsx index 2a76ffbf1..d76dd11e0 100644 --- a/src/rest/resources/utbetalingerResource.tsx +++ b/src/rest/resources/utbetalingerResource.tsx @@ -16,7 +16,7 @@ function urlV2(fom: string, tom: string): string { const defaults: DefaultConfig = { ifPending: , - ifError: Kunne ikke laste inn informasjon om brukers oppfølging + ifError: Kunne ikke laste inn informasjon om brukers utbetalinger }; const resource = {