Skip to content

Commit bba8d12

Browse files
JeremiahUyJeremiahUy
committed
UPDATE: query and conditional rendering logic
1 parent 772ee97 commit bba8d12

File tree

3 files changed

+65
-83
lines changed

3 files changed

+65
-83
lines changed

‎apps/frontend/src/components/PvkDokument/PvoTabs.tsx

+4-23
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,13 @@
1-
import { Label, Tabs } from '@navikt/ds-react'
1+
import { Tabs } from '@navikt/ds-react'
22
import { useEffect, useState } from 'react'
33
import { NavigateFunction, useNavigate, useParams } from 'react-router-dom'
4-
import { EPVO, IPvkDokumentListItem } from '../../constants'
4+
import { EPVO } from '../../constants'
55
import PvoSistRedigertView from '../PvoTilbakemelding/PvoSistRedigertView'
66
import { PvoTilbakemeldingsList } from './PvoTilbakemeldingsList'
77

88
type TSection = 'siste' | 'alle'
99

10-
interface IProps {
11-
allPvkDocumentListItem: IPvkDokumentListItem[]
12-
isLoading: false
13-
}
14-
15-
const PvoTabs = ({ allPvkDocumentListItem, isLoading }: IProps) => {
10+
const PvoTabs = () => {
1611
const navigate: NavigateFunction = useNavigate()
1712
const params: Readonly<
1813
Partial<{
@@ -41,21 +36,7 @@ const PvoTabs = ({ allPvkDocumentListItem, isLoading }: IProps) => {
4136
<PvoSistRedigertView />
4237
</Tabs.Panel>
4338
<Tabs.Panel value='alle'>
44-
<div className='w-full justify-center my-4'>
45-
<div className='flex justify-center content-center w-full'>
46-
<div className='flex justify-start align-middle w-full'>
47-
<Label size='medium'>
48-
{/* {kravene.totalElements ? kravene.totalElements : 0} */}
49-
{allPvkDocumentListItem.length} PVK dokumenter
50-
</Label>
51-
</div>
52-
</div>
53-
</div>
54-
55-
<PvoTilbakemeldingsList
56-
allPvkDocumentListItem={allPvkDocumentListItem}
57-
isLoading={isLoading}
58-
/>
39+
<PvoTilbakemeldingsList />
5940
</Tabs.Panel>
6041
</Tabs>
6142
)

‎apps/frontend/src/components/PvkDokument/PvoTilbakemeldingsList.tsx

+55-32
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,61 @@
1-
import { List, Skeleton } from '@navikt/ds-react'
1+
import { Label, List, Skeleton } from '@navikt/ds-react'
22
import moment from 'moment'
3+
import { useEffect, useState } from 'react'
4+
import { getAllPvkDokumentListItem } from '../../api/PvkDokumentApi'
35
import { EPVO, IPvkDokumentListItem } from '../../constants'
46
import PvoStatusView from '../PvoTilbakemelding/common/PvoStatusView'
57
import { ListLayout } from '../common/ListLayout'
68

7-
interface IProps {
8-
allPvkDocumentListItem: IPvkDokumentListItem[]
9-
isLoading: boolean
10-
}
9+
export const PvoTilbakemeldingsList = () => {
10+
const [allPvkDocumentListItem, setAllPvkDocumentListItem] = useState<IPvkDokumentListItem[]>([])
11+
const [isLoading, setIsLoading] = useState(false)
12+
useEffect(() => {
13+
;(async () => {
14+
setIsLoading(true)
15+
await getAllPvkDokumentListItem().then((response) => {
16+
setAllPvkDocumentListItem(response)
17+
setIsLoading(false)
18+
})
19+
})()
20+
}, [])
1121

12-
export const PvoTilbakemeldingsList = ({ allPvkDocumentListItem, isLoading }: IProps) => (
13-
<div>
14-
{isLoading && <Skeleton variant='rectangle' />}
15-
{!isLoading && (
16-
<List className='mb-2.5 flex flex-col gap-2'>
17-
{allPvkDocumentListItem &&
18-
allPvkDocumentListItem.map((pvkDokument: IPvkDokumentListItem) => (
19-
<ListLayout
20-
key={pvkDokument.id}
21-
id={pvkDokument.id}
22-
url={`/pvkdokument/${pvkDokument.id}${EPVO.tilbakemelding}/1`}
23-
documentNumber={`E${pvkDokument.etterlevelseNummer}`}
24-
title={pvkDokument.title}
25-
status={<PvoStatusView status={pvkDokument.status} />}
26-
upperRightField='PVK dokument ble'
27-
changeStamp={
28-
pvkDokument.changeStamp.lastModifiedDate !== undefined &&
29-
pvkDokument.changeStamp.lastModifiedDate !== ''
30-
? `sist endret: ${moment(pvkDokument.changeStamp.lastModifiedDate).format('ll')}`
31-
: ''
32-
}
33-
/>
34-
))}
35-
</List>
36-
)}
37-
</div>
38-
)
22+
return (
23+
<div>
24+
{isLoading && <Skeleton variant='rectangle' />}
25+
{!isLoading && (
26+
<div>
27+
<div className='w-full justify-center my-4'>
28+
<div className='flex justify-center content-center w-full'>
29+
<div className='flex justify-start align-middle w-full'>
30+
<Label size='medium'>
31+
{/* {kravene.totalElements ? kravene.totalElements : 0} */}
32+
{allPvkDocumentListItem.length} PVK dokumenter
33+
</Label>
34+
</div>
35+
</div>
36+
</div>
37+
<List className='mb-2.5 flex flex-col gap-2'>
38+
{allPvkDocumentListItem &&
39+
allPvkDocumentListItem.map((pvkDokument: IPvkDokumentListItem) => (
40+
<ListLayout
41+
key={pvkDokument.id}
42+
id={pvkDokument.id}
43+
url={`/pvkdokument/${pvkDokument.id}${EPVO.tilbakemelding}/1`}
44+
documentNumber={`E${pvkDokument.etterlevelseNummer}`}
45+
title={pvkDokument.title}
46+
status={<PvoStatusView status={pvkDokument.status} />}
47+
upperRightField='PVK dokument ble'
48+
changeStamp={
49+
pvkDokument.changeStamp.lastModifiedDate !== undefined &&
50+
pvkDokument.changeStamp.lastModifiedDate !== ''
51+
? `sist endret: ${moment(pvkDokument.changeStamp.lastModifiedDate).format('ll')}`
52+
: ''
53+
}
54+
/>
55+
))}
56+
</List>
57+
</div>
58+
)}
59+
</div>
60+
)
61+
}

‎apps/frontend/src/pages/PvoOversiktPage.tsx

+6-28
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,20 @@
1-
import { Loader } from '@navikt/ds-react'
2-
import { useEffect, useState } from 'react'
3-
import { getAllPvkDokumentListItem } from '../api/PvkDokumentApi'
41
import PvoTabs from '../components/PvkDokument/PvoTabs'
52
import { ListPageHeader } from '../components/scaffold/ListPageHeader'
63
import { PageLayout } from '../components/scaffold/Page'
7-
import { EPVO, IPvkDokumentListItem } from '../constants'
4+
import { EPVO } from '../constants'
85

96
export const PvoOversiktPage = () => {
10-
const [allPvkDocumentListItem, setAllPvkDocumentListItem] = useState<IPvkDokumentListItem[]>([])
11-
const [isLoading, setIsLoading] = useState(false)
12-
useEffect(() => {
13-
;(async () => {
14-
setIsLoading(true)
15-
await getAllPvkDokumentListItem().then((response) => {
16-
setAllPvkDocumentListItem(response)
17-
setIsLoading(false)
18-
})
19-
})()
20-
}, [])
21-
227
return (
238
<PageLayout pageTitle={EPVO.overskrift} currentPage={EPVO.overskrift}>
249
<div className='pb-52 w-full'>
2510
<ListPageHeader headingText={EPVO.overskrift} />
26-
{isLoading && (
27-
<div className='flex w-full justify-center items-center mt-5'>
28-
<Loader size='3xlarge' className='flex justify-self-center' />
29-
</div>
30-
)}
31-
{!isLoading && allPvkDocumentListItem.length !== 0 && (
32-
<div className='flex justify-center w-full'>
33-
<div className='w-full'>
34-
<div className='pt-6'>
35-
<PvoTabs allPvkDocumentListItem={allPvkDocumentListItem} isLoading={isLoading} />
36-
</div>
11+
<div className='flex justify-center w-full'>
12+
<div className='w-full'>
13+
<div className='pt-6'>
14+
<PvoTabs />
3715
</div>
3816
</div>
39-
)}
17+
</div>
4018
</div>
4119
</PageLayout>
4220
)

0 commit comments

Comments
 (0)