diff --git a/src/app/personside/infotabs/utbetalinger/filter/EgendefinertDatoInputs.tsx b/src/app/personside/infotabs/utbetalinger/filter/EgendefinertDatoInputs.tsx index ea73aa0d9..d72095e64 100644 --- a/src/app/personside/infotabs/utbetalinger/filter/EgendefinertDatoInputs.tsx +++ b/src/app/personside/infotabs/utbetalinger/filter/EgendefinertDatoInputs.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; -import {useState} from 'react'; -import {FraTilDato} from '../../../../../redux/utbetalinger/types'; -import {SkjemaelementFeilmelding} from 'nav-frontend-skjema'; -import dayjs, {Dayjs} from 'dayjs'; -import {DatePicker, HStack, useRangeDatepicker} from "@navikt/ds-react"; -import styled from "styled-components"; -import {DateRange} from "react-day-picker"; -import {ISO_DATE_STRING_FORMAT} from "nav-datovelger/lib/utils/dateFormatUtils"; +import { useState } from 'react'; +import { FraTilDato } from '../../../../../redux/utbetalinger/types'; +import { SkjemaelementFeilmelding } from 'nav-frontend-skjema'; +import dayjs, { Dayjs } from 'dayjs'; +import { DatePicker, HStack, useRangeDatepicker } from '@navikt/ds-react'; +import styled from 'styled-components'; +import { DateRange } from 'react-day-picker'; +import { ISO_DATE_STRING_FORMAT } from 'nav-datovelger/lib/utils/dateFormatUtils'; interface EgendefinertDatoInputsProps { periode?: FraTilDato; @@ -37,52 +37,49 @@ function EgendefinertDatoInputs(props: EgendefinertDatoInputsProps) { return fra.isAfter(til); }, feilmelding: 'Fra-dato kan ikke være senere enn til-dato' - }, + } ]; - const fra = props.periode?.fra ?? ""; - const til = props.periode?.til ?? ""; + const fra = props.periode?.fra ?? ''; + const til = props.periode?.til ?? ''; const [periodeFeilmelding, setPeriodeFeilmelding] = useState(); const onRangeDatoChange = (val?: DateRange) => { - const fraDato = val?.from ? dayjs(val.from).format(ISO_DATE_STRING_FORMAT) : fra - const tilDato = val?.to ? dayjs(val.to).format(ISO_DATE_STRING_FORMAT) : til + const fraDato = val?.from ? dayjs(val.from).format(ISO_DATE_STRING_FORMAT) : fra; + const tilDato = val?.to ? dayjs(val.to).format(ISO_DATE_STRING_FORMAT) : til; const newPeriode: FraTilDato = { fra: fraDato, til: tilDato }; - const error = getDatoFeilmelding(fraDato, tilDato) - if(error){ - setPeriodeFeilmelding(error) + const error = getDatoFeilmelding(fraDato, tilDato); + if (error) { + setPeriodeFeilmelding(error); } else { - setPeriodeFeilmelding(undefined) + setPeriodeFeilmelding(undefined); props.updateFraTilDato(newPeriode); } - } + }; - const { datepickerProps, toInputProps, fromInputProps } = - useRangeDatepicker({ onRangeChange: onRangeDatoChange }); + const { datepickerProps, toInputProps, fromInputProps } = useRangeDatepicker({ onRangeChange: onRangeDatoChange }); const getDatoFeilmelding = (fra: string, til: string) => { const fraDato = dayjs(fra); const tilDato = dayjs(til); - return periodeValidering.find((validering) => - validering.erUgyldig(fraDato, tilDato) - )?.feilmelding; - } + return periodeValidering.find((validering) => validering.erUgyldig(fraDato, tilDato))?.feilmelding; + }; return ( <> - + - - + + - { periodeFeilmelding && {periodeFeilmelding}} + {periodeFeilmelding && {periodeFeilmelding}} ); } diff --git a/src/app/personside/infotabs/utbetalinger/filter/FilterPeriode.tsx b/src/app/personside/infotabs/utbetalinger/filter/FilterPeriode.tsx index a51a00d90..2349df984 100644 --- a/src/app/personside/infotabs/utbetalinger/filter/FilterPeriode.tsx +++ b/src/app/personside/infotabs/utbetalinger/filter/FilterPeriode.tsx @@ -1,13 +1,12 @@ import * as React from 'react'; import { Radio } from 'nav-frontend-skjema'; import { Element } from 'nav-frontend-typografi'; -import {FraTilDato, PeriodeOptions, PeriodeValg} from '../../../../../redux/utbetalinger/types'; +import { FraTilDato, PeriodeOptions, PeriodeValg } from '../../../../../redux/utbetalinger/types'; import styled from 'styled-components'; import EgendefinertDatoInputs from './EgendefinertDatoInputs'; -import {useState} from "react"; -import dayjs, {Dayjs} from "dayjs"; -import {ISO_DATE_STRING_FORMAT} from "nav-datovelger/lib/utils/dateFormatUtils"; - +import { useState } from 'react'; +import dayjs, { Dayjs } from 'dayjs'; +import { ISO_DATE_STRING_FORMAT } from 'nav-datovelger/lib/utils/dateFormatUtils'; const InputPanel = styled.form` display: flex; @@ -49,31 +48,37 @@ function FiltreringPeriode(props: FiltreringPeriodeProps) { const [periode, setPeriode] = useState(); const onPeriodChange = (periodeValg: PeriodeValg) => { - setRadioValg(periodeValg) - const fraTilDato = getFraDateFromPeriod(periodeValg) - setPeriode(fraTilDato) - props.updatePeriod({...props.periode, radioValg: periodeValg}) - } + setRadioValg(periodeValg); + const fraTilDato = getFraDateFromPeriod(periodeValg); + setPeriode(fraTilDato); + props.updatePeriod({ ...props.periode, radioValg: periodeValg }); + }; const onFraTilDatoChange = (val: FraTilDato) => { - setPeriode(val) - props.updatePeriod({...props.periode, egendefinertPeriode: val}) - } + setPeriode(val); + props.updatePeriod({ ...props.periode, egendefinertPeriode: val }); + }; - const getFraDateFromPeriod = (periodeValg: PeriodeValg): FraTilDato => { + const getFraDateFromPeriod = (periodeValg: PeriodeValg): FraTilDato => { switch (periodeValg) { case PeriodeValg.INNEVERENDE_AR: - return { fra: toIsoDateString(dayjs().startOf('year')), til: toIsoDateString(dayjs().endOf('year'))}; + return { fra: toIsoDateString(dayjs().startOf('year')), til: toIsoDateString(dayjs().endOf('year')) }; case PeriodeValg.I_FJOR: - return { fra: toIsoDateString(dayjs().subtract(1, 'year').startOf('year')), til: toIsoDateString(dayjs().subtract(1, 'year').endOf('year'))}; + return { + fra: toIsoDateString(dayjs().subtract(1, 'year').startOf('year')), + til: toIsoDateString(dayjs().subtract(1, 'year').endOf('year')) + }; case PeriodeValg.EGENDEFINERT: case PeriodeValg.SISTE_30_DAGER: default: - return { fra: toIsoDateString(dayjs().subtract(30, 'day').startOf('day')), til: toIsoDateString(dayjs().endOf('day'))}; + return { + fra: toIsoDateString(dayjs().subtract(30, 'day').startOf('day')), + til: toIsoDateString(dayjs().endOf('day')) + }; } - } + }; - const toIsoDateString = (date: Dayjs) => date.format(ISO_DATE_STRING_FORMAT) + const toIsoDateString = (date: Dayjs) => date.format(ISO_DATE_STRING_FORMAT); const radios = Object.keys(PeriodeValg).map((key) => { const label = PeriodeValg[key]; @@ -83,8 +88,7 @@ function FiltreringPeriode(props: FiltreringPeriodeProps) { - onPeriodChange(PeriodeValg[key])} + onChange={() => onPeriodChange(PeriodeValg[key])} name="FiltreringsvalgGruppe" /> diff --git a/src/app/personside/infotabs/utbetalinger/filter/UtbetalingFilter.tsx b/src/app/personside/infotabs/utbetalinger/filter/UtbetalingFilter.tsx index 139b99c42..2a02cce88 100644 --- a/src/app/personside/infotabs/utbetalinger/filter/UtbetalingFilter.tsx +++ b/src/app/personside/infotabs/utbetalinger/filter/UtbetalingFilter.tsx @@ -10,14 +10,14 @@ import Ekspanderbartpanel from 'nav-frontend-ekspanderbartpanel'; import { AppState } from '../../../../../redux/reducers'; import { useDispatch, useSelector } from 'react-redux'; import { oppdaterFilter } from '../../../../../redux/utbetalinger/actions'; -import {PeriodeValg, UtbetalingFilterState} from '../../../../../redux/utbetalinger/types'; +import { PeriodeValg, UtbetalingFilterState } from '../../../../../redux/utbetalinger/types'; import styled from 'styled-components'; import theme, { pxToRem } from '../../../../../styles/personOversiktTheme'; import Panel from 'nav-frontend-paneler'; import dayjs from 'dayjs'; import MediaQueryAwareRenderer from '../../../../../components/MediaQueryAwareRenderer'; import utbetalingerResource from '../../../../../rest/resources/utbetalingerResource'; -import FiltreringPeriode from "./FilterPeriode"; +import FiltreringPeriode from './FilterPeriode'; const FiltreringsPanel = styled(Panel)` padding: ${pxToRem(15)}; @@ -107,11 +107,15 @@ function UtbetalingFiltrering() { ); const hentUtbetalingerPanel = ( - { - updateFilter({ - ...filter, - periode: change - })}}/> + { + updateFilter({ + ...filter, + periode: change + }); + }} + /> Hent utbetalinger diff --git a/src/app/personside/infotabs/utbetalinger/utils/utbetalinger-utils.ts b/src/app/personside/infotabs/utbetalinger/utils/utbetalinger-utils.ts index e322389bf..f0a3bdda5 100644 --- a/src/app/personside/infotabs/utbetalinger/utils/utbetalinger-utils.ts +++ b/src/app/personside/infotabs/utbetalinger/utils/utbetalinger-utils.ts @@ -3,7 +3,7 @@ import { formaterDato } from '../../../../../utils/string-utils'; import { Periode } from '../../../../../models/tid'; import dayjs from 'dayjs'; import { loggError } from '../../../../../utils/logger/frontendLogger'; -import {UtbetalingFilterState, PeriodeValg, PeriodeOptions} from '../../../../../redux/utbetalinger/types'; +import { PeriodeValg, PeriodeOptions } from '../../../../../redux/utbetalinger/types'; import { datoVerbose } from '../../../../../utils/date-utils'; import { ISO_DATE_STRING_FORMAT } from 'nav-datovelger/lib/utils/dateFormatUtils'; diff --git a/src/app/personside/infotabs/ytelser/Ytelser.tsx b/src/app/personside/infotabs/ytelser/Ytelser.tsx index 4cf033c1d..92e13b1aa 100644 --- a/src/app/personside/infotabs/ytelser/Ytelser.tsx +++ b/src/app/personside/infotabs/ytelser/Ytelser.tsx @@ -6,12 +6,7 @@ import ValgtYtelse from './ValgtYtelse'; import useBrukersYtelser from './useBrukersYtelser'; import { useInfotabsDyplenker } from '../dyplenker'; import { useKeepQueryParams } from '../../../../utils/hooks/useKeepQueryParams'; -import YtelserFiltrering from "./YtelserFilter"; -import {useDispatch, useSelector} from "react-redux"; -import {AppState} from "../../../../redux/reducers"; -import {useCallback} from "react"; -import {YtelserState} from "../../../../redux/ytelser/ytelserReducer"; -import {oppdaterFilter} from "../../../../redux/utbetalinger/actions"; +import YtelserFiltrering from './YtelserFilter'; const ytelserMediaTreshold = '45rem'; diff --git a/src/app/personside/infotabs/ytelser/YtelserFilter.tsx b/src/app/personside/infotabs/ytelser/YtelserFilter.tsx index c54fe1776..b59ae6e26 100644 --- a/src/app/personside/infotabs/ytelser/YtelserFilter.tsx +++ b/src/app/personside/infotabs/ytelser/YtelserFilter.tsx @@ -4,18 +4,17 @@ import { Knapp } from 'nav-frontend-knapper'; import { useDispatch, useSelector } from 'react-redux'; import styled from 'styled-components'; import dayjs from 'dayjs'; -import utbetalingerResource from "../../../../rest/resources/utbetalingerResource"; -import {AppState} from "../../../../redux/reducers"; -import {PeriodeValg, UtbetalingFilterState} from "../../../../redux/utbetalinger/types"; -import {oppdaterFilter} from "../../../../redux/utbetalinger/actions"; -import FiltreringPeriode from "../utbetalinger/filter/FilterPeriode"; -import Panel from "nav-frontend-paneler"; -import {pxToRem} from "../../../../styles/personOversiktTheme"; -import {YtelserState} from "../../../../redux/ytelser/ytelserReducer"; -import foreldrepengerResource from "../../../../rest/resources/foreldrepengerResource"; -import pleiepengerResource from "../../../../rest/resources/pleiepengerResource"; -import sykepengerResource from "../../../../rest/resources/sykepengerResource"; -import tiltakspengerResource from "../../../../rest/resources/tiltakspengerResource"; +import { AppState } from '../../../../redux/reducers'; +import { PeriodeValg } from '../../../../redux/utbetalinger/types'; +import { oppdaterFilter } from '../../../../redux/utbetalinger/actions'; +import FiltreringPeriode from '../utbetalinger/filter/FilterPeriode'; +import Panel from 'nav-frontend-paneler'; +import { pxToRem } from '../../../../styles/personOversiktTheme'; +import { YtelserState } from '../../../../redux/ytelser/ytelserReducer'; +import foreldrepengerResource from '../../../../rest/resources/foreldrepengerResource'; +import pleiepengerResource from '../../../../rest/resources/pleiepengerResource'; +import sykepengerResource from '../../../../rest/resources/sykepengerResource'; +import tiltakspengerResource from '../../../../rest/resources/tiltakspengerResource'; const InputPanel = styled.form` display: flex; @@ -71,16 +70,21 @@ function YtelserFiltrering() { tiltakspenger.refetch(); }, [foreldrepenger, pleiepenger, sykepenger, tiltakspenger, filter]); - const visSpinner = foreldrepenger.isLoading || pleiepenger.isLoading || sykepenger.isLoading || tiltakspenger.isLoading; + const visSpinner = + foreldrepenger.isLoading || pleiepenger.isLoading || sykepenger.isLoading || tiltakspenger.isLoading; return ( - { - updateFilter({ - ...filter, - periode: change - })}}/> + { + updateFilter({ + ...filter, + periode: change + }); + }} + /> Hent ytelser diff --git a/src/redux/ytelser/ytelserReducer.ts b/src/redux/ytelser/ytelserReducer.ts index cd6cab62a..190c4b9bb 100644 --- a/src/redux/ytelser/ytelserReducer.ts +++ b/src/redux/ytelser/ytelserReducer.ts @@ -2,9 +2,9 @@ import { Action } from 'redux'; import { Pleiepengerettighet } from '../../models/ytelse/pleiepenger'; import { Foreldrepengerettighet } from '../../models/ytelse/foreldrepenger'; import { Sykepenger } from '../../models/ytelse/sykepenger'; -import {PeriodeOptions, PeriodeValg} from "../utbetalinger/types"; -import dayjs from "dayjs"; -import {ISO_DATE_STRING_FORMAT} from "nav-datovelger/lib/utils/dateFormatUtils"; +import { PeriodeOptions, PeriodeValg } from '../utbetalinger/types'; +import dayjs from 'dayjs'; +import { ISO_DATE_STRING_FORMAT } from 'nav-datovelger/lib/utils/dateFormatUtils'; type Ytelse = Pleiepengerettighet | Foreldrepengerettighet | Sykepenger; diff --git a/src/rest/resources/foreldrepengerResource.tsx b/src/rest/resources/foreldrepengerResource.tsx index a5be62c13..bbd0779f9 100644 --- a/src/rest/resources/foreldrepengerResource.tsx +++ b/src/rest/resources/foreldrepengerResource.tsx @@ -1,10 +1,8 @@ import { apiBaseUri } from '../../api/config'; -import { useFodselsnummer } from '../../utils/customHooks'; -import { ForeldrepengerResponse } from '../../models/ytelse/foreldrepenger'; import { useQuery, UseQueryResult } from '@tanstack/react-query'; import { FetchError, post } from '../../api/api'; -import {SykepengerResponse} from "../../models/ytelse/sykepenger"; -import {useReduxData} from "./tiltakspengerResource"; +import { SykepengerResponse } from '../../models/ytelse/sykepenger'; +import { useReduxData } from './tiltakspengerResource'; function queryKey(fnr: string): [string, string] { return ['foreldrepenger', fnr]; @@ -19,11 +17,12 @@ const resource = { return useQuery({ queryKey: queryKey(fnr), - queryFn: () => post(urlV2(), { - fnr, - fom: periode.fra, - tom: periode.til - }) + queryFn: () => + post(urlV2(), { + fnr, + fom: periode.fra, + tom: periode.til + }) }); } }; diff --git a/src/rest/resources/pleiepengerResource.tsx b/src/rest/resources/pleiepengerResource.tsx index 18cab782c..84b728611 100644 --- a/src/rest/resources/pleiepengerResource.tsx +++ b/src/rest/resources/pleiepengerResource.tsx @@ -1,10 +1,8 @@ import { apiBaseUri } from '../../api/config'; -import { useFodselsnummer } from '../../utils/customHooks'; -import { PleiepengerResponse } from '../../models/ytelse/pleiepenger'; import { useQuery, UseQueryResult } from '@tanstack/react-query'; import { FetchError, post } from '../../api/api'; -import {useReduxData} from "./tiltakspengerResource"; -import {SykepengerResponse} from "../../models/ytelse/sykepenger"; +import { useReduxData } from './tiltakspengerResource'; +import { SykepengerResponse } from '../../models/ytelse/sykepenger'; function queryKey(fnr: string): [string, string] { return ['pleiepenger', fnr]; @@ -20,11 +18,12 @@ const resource = { return useQuery({ queryKey: queryKey(fnr), - queryFn: () => post(urlV2(), { - fnr, - fom: periode.fra, - tom: periode.til - }) + queryFn: () => + post(urlV2(), { + fnr, + fom: periode.fra, + tom: periode.til + }) }); } }; diff --git a/src/rest/resources/sykepengerResource.tsx b/src/rest/resources/sykepengerResource.tsx index 91f293228..937420806 100644 --- a/src/rest/resources/sykepengerResource.tsx +++ b/src/rest/resources/sykepengerResource.tsx @@ -1,9 +1,8 @@ import { SykepengerResponse } from '../../models/ytelse/sykepenger'; import { apiBaseUri } from '../../api/config'; -import { useFodselsnummer } from '../../utils/customHooks'; import { useQuery, UseQueryResult } from '@tanstack/react-query'; import { FetchError, post } from '../../api/api'; -import {useReduxData} from "./tiltakspengerResource"; +import { useReduxData } from './tiltakspengerResource'; function queryKey(fnr: string): [string, string] { return ['sykepenger', fnr]; @@ -18,11 +17,12 @@ const resource = { return useQuery({ queryKey: queryKey(fnr), - queryFn: () => post(urlV2(), { - fnr, - fom: periode.fra, - tom: periode.til - }) + queryFn: () => + post(urlV2(), { + fnr, + fom: periode.fra, + tom: periode.til + }) }); } }; diff --git a/src/rest/resources/tiltakspengerResource.tsx b/src/rest/resources/tiltakspengerResource.tsx index 11945fdf4..eb086a111 100644 --- a/src/rest/resources/tiltakspengerResource.tsx +++ b/src/rest/resources/tiltakspengerResource.tsx @@ -1,15 +1,16 @@ import { TiltakspengerResource } from '../../models/ytelse/tiltakspenger'; import { apiBaseUri } from '../../api/config'; -import {useAppState, useFodselsnummer} from '../../utils/customHooks'; +import { useAppState } from '../../utils/customHooks'; import { useQuery, UseQueryResult } from '@tanstack/react-query'; import { FetchError, post } from '../../api/api'; import dayjs from 'dayjs'; import useFeatureToggle from '../../components/featureToggle/useFeatureToggle'; import { FeatureToggles } from '../../components/featureToggle/toggleIDs'; import { - getFraDateFromFilter, getTilDateFromFilter, + getFraDateFromFilter, + getTilDateFromFilter, getUtbetalingerForSiste30DagerDatoer -} from "../../app/personside/infotabs/utbetalinger/utils/utbetalinger-utils"; +} from '../../app/personside/infotabs/utbetalinger/utils/utbetalinger-utils'; interface Periode { fra: T; @@ -28,9 +29,9 @@ export function useReduxData(limit30Dager: boolean): [string, Periode] { const periode = limit30Dager ? getUtbetalingerForSiste30DagerDatoer() : { - fra: getFraDateFromFilter(filterPeriode), - til: getTilDateFromFilter(filterPeriode) - }; + fra: getFraDateFromFilter(filterPeriode), + til: getTilDateFromFilter(filterPeriode) + }; const datoer: Periode = { fra: dayjs(periode.fra).format('YYYY-MM-DD'), til: dayjs(periode.til).format('YYYY-MM-DD')