|
1 |
| -import classNames from 'classnames'; |
2 | 1 | import React from 'react';
|
3 |
| -import { v4 as uuidv4 } from 'uuid'; |
4 | 2 |
|
5 |
| -import intlHelper from 'app/utils/intlUtils'; |
| 3 | +import classNames from 'classnames'; |
| 4 | +import { FormattedMessage } from 'react-intl'; |
6 | 5 |
|
7 |
| -import { |
8 |
| - IPSBSoknadKvitteringBeredskapNattevak, |
9 |
| - IPSBSoknadKvitteringBosteder, |
10 |
| - IPSBSoknadKvitteringLovbestemtFerie, |
11 |
| - IPSBSoknadKvitteringUtenlandsopphold, |
12 |
| -} from '../../models/types/PSBSoknadKvittering'; |
| 6 | +import { IPSBSoknadKvitteringBeredskapNattevak } from '../../models/types/PSBSoknadKvittering'; |
13 | 7 | import { periodToFormattedString } from '../../utils';
|
| 8 | +import { |
| 9 | + ISoknadKvitteringBosteder, |
| 10 | + ISoknadKvitteringLovbestemtFerie, |
| 11 | + ISoknadKvitteringUtenlandsopphold, |
| 12 | +} from 'app/models/types/KvitteringTyper'; |
| 13 | + |
14 | 14 | import './visningAvPerioderSoknadKvittering.less';
|
15 | 15 |
|
16 |
| -interface IOwnProps { |
17 |
| - intl: any; |
| 16 | +interface Props { |
18 | 17 | perioder:
|
19 |
| - | IPSBSoknadKvitteringUtenlandsopphold |
20 |
| - | IPSBSoknadKvitteringBosteder |
| 18 | + | ISoknadKvitteringUtenlandsopphold |
| 19 | + | ISoknadKvitteringBosteder |
21 | 20 | | IPSBSoknadKvitteringBeredskapNattevak
|
22 |
| - | IPSBSoknadKvitteringLovbestemtFerie; |
| 21 | + | ISoknadKvitteringLovbestemtFerie; |
23 | 22 | tittel: string[];
|
24 | 23 | properties?: string[];
|
25 | 24 | lessClassForAdjustment?: string;
|
26 | 25 | }
|
27 | 26 |
|
28 |
| -const VisningAvPerioderSoknadKvittering: React.FunctionComponent<IOwnProps> = ({ |
29 |
| - intl, |
| 27 | +const VisningAvPerioderSoknadKvittering: React.FC<Props> = ({ |
30 | 28 | tittel,
|
31 | 29 | properties,
|
32 | 30 | perioder,
|
33 | 31 | lessClassForAdjustment,
|
34 | 32 | }) => (
|
35 | 33 | <div>
|
36 | 34 | <div className={classNames('visningAvPerioderSoknadKvitteringContainer', !!lessClassForAdjustment)}>
|
37 |
| - {tittel.map((t) => ( |
38 |
| - <h4 key={uuidv4()}>{intlHelper(intl, t)}</h4> |
| 35 | + {tittel.map((t, index) => ( |
| 36 | + <h4 key={index}> |
| 37 | + <FormattedMessage id={t} /> |
| 38 | + </h4> |
39 | 39 | ))}
|
40 | 40 | </div>
|
41 |
| - {Object.keys(perioder) |
42 |
| - .sort((a, b) => { |
43 |
| - const fomA = a.split('/')?.[0]; |
44 |
| - const fomB = b.split('/')?.[0]; |
| 41 | + |
| 42 | + {Object.entries(perioder) |
| 43 | + .sort(([periodeA], [periodeB]) => { |
| 44 | + const fomA = periodeA.split('/')?.[0]; |
| 45 | + const fomB = periodeB.split('/')?.[0]; |
45 | 46 | return new Date(fomA).getTime() - new Date(fomB).getTime();
|
46 | 47 | })
|
47 |
| - .map((periode) => ( |
| 48 | + .map(([periode, props]) => ( |
48 | 49 | <div
|
49 | 50 | key={periode}
|
50 | 51 | className={classNames('visningAvPerioderSoknadKvitteringContainer', !!lessClassForAdjustment)}
|
51 | 52 | >
|
52 | 53 | <p>{periodToFormattedString(periode)}</p>
|
53 | 54 |
|
54 |
| - {properties && properties.map((prop) => <p key={uuidv4()}>{perioder[periode]![prop]}</p>)} |
| 55 | + {properties && properties.map((prop) => <p key={prop}>{props[prop]}</p>)} |
55 | 56 | </div>
|
56 | 57 | ))}
|
57 | 58 | </div>
|
|
0 commit comments