Skip to content

Commit 636cf85

Browse files
anders-nomanders-nom
committed
Paginering for søkeresultater
1 parent 365e4f2 commit 636cf85

File tree

8 files changed

+133
-106
lines changed

8 files changed

+133
-106
lines changed

‎src/components/left-section/AppLeftSection.module.css

+8-6
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
11
@value transitionDuration: 250ms;
22

33
.root {
4+
position: relative;
45
grid-area: left;
56
border-left: solid 4px var(--a-gray-600);
67
}
78

89
.root,
910
.categoriesAndSearch {
10-
position: relative;
11+
/*position: relative;*/
1112

1213
display: flex;
1314
flex-direction: column;
14-
height: 100%;
15-
width: 100%;
15+
/*height: 100%;*/
16+
/*width: 100%;*/
1617

1718
overflow: hidden;
1819
}
@@ -23,9 +24,7 @@
2324
height: 100%;
2425
}
2526

26-
.searchResult,
27-
.categoriesMenu,
28-
.contentMenu {
27+
.categoriesMenu {
2928
overflow-y: scroll;
3029
scrollbar-width: thin;
3130
height: 100%;
@@ -49,8 +48,11 @@
4948
right: 100%;
5049
top: 0;
5150

51+
display: flex;
52+
flex-direction: column;
5253
width: 100%;
5354
height: 100%;
55+
overflow-y: hidden;
5456

5557
transition-property: right, visibility, opacity;
5658
transition-timing-function: ease-in;

‎src/components/left-section/contents/ContentMenu.module.css

+15-16
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,25 @@
1-
.wrapper {
1+
.outer {
22
display: flex;
33
flex-direction: column;
4-
align-items: flex-start;
54
padding: 0 0.5rem;
65
background-color: var(--a-white);
7-
min-height: 100%;
6+
height: 100%;
7+
overflow-y: hidden;
88
}
99

1010
.topRow {
1111
display: flex;
1212
justify-content: space-between;
13-
width: 100%;
14-
padding: 0.25rem 0;
13+
padding: 0.5rem 0;
14+
}
15+
16+
.mainRow {
17+
display: flex;
18+
flex-direction: column;
19+
padding: 0 0.5rem 0.5rem 0.5rem;
20+
height: 100%;
21+
overflow-y: scroll;
22+
scrollbar-width: thin;
1523
}
1624

1725
.search {
@@ -40,20 +48,11 @@
4048
width: 100%;
4149
}
4250

43-
.bottomSection {
44-
display: flex;
45-
flex-direction: column;
46-
padding: 1rem 0;
47-
width: 100%;
51+
.maxContentAlert {
4852
margin-top: auto;
49-
align-self: center;
50-
51-
& > :not(:last-child) {
52-
margin-bottom: 0.5rem;
53-
}
5453
}
5554

5655
.paginator {
57-
margin-top: 1rem;
56+
padding: 0.5rem 0 1rem 0;
5857
align-self: center;
5958
}

‎src/components/left-section/contents/ContentMenu.tsx

+48-47
Original file line numberDiff line numberDiff line change
@@ -36,13 +36,15 @@ export const ContentMenu = ({ parentCategory }: Props) => {
3636
const currentCount = result?.total ?? contentCount;
3737
const numPages = Math.ceil(Math.min(currentCount, MAX_CONTENTS) / CONTENTS_PER_PAGE);
3838

39+
const headerText = `${parentTitle} (${currentCount !== contentCount ? `${currentCount} / ` : ''}${contentCount})`;
40+
3941
useEffect(() => {
4042
setPageNumber(1);
4143
setQuery('');
4244
}, [parentKey]);
4345

4446
return (
45-
<div className={style.wrapper}>
47+
<div className={style.outer}>
4648
<div className={style.topRow}>
4749
<Button
4850
onClick={() => setContentSelectorOpen(false)}
@@ -62,56 +64,55 @@ export const ContentMenu = ({ parentCategory }: Props) => {
6264
onChange={(e) => setQuery(e.target.value)}
6365
/>
6466
</div>
65-
<CategoriesPath path={path} size={'small'} className={style.path} />
66-
<Heading level={'2'} size={'xsmall'} className={style.title}>
67-
{parentTitle}
68-
</Heading>
69-
{query && !isLoading && hits.length === 0 && (
70-
<Alert
71-
variant={'info'}
72-
className={style.notFound}
73-
size={'small'}
74-
inline={true}
75-
>{`Ingen treff for "${query}" i denne kategorien`}</Alert>
76-
)}
77-
<div className={style.contentList}>
78-
{isLoading ? (
79-
<ContentLoader
80-
size={'xlarge'}
81-
text={'Laster innhold...'}
82-
direction={'column'}
83-
/>
84-
) : hits ? (
85-
<>
86-
{hits.map((content) => (
87-
<ContentLink content={content} key={content.contentKey} />
88-
))}
89-
</>
90-
) : (
91-
<Alert variant={'error'} inline={true}>
92-
{'Feil: Kunne ikke laste innhold for denne kategorien'}
93-
</Alert>
67+
<div className={style.mainRow}>
68+
<CategoriesPath path={path} size={'small'} className={style.path} />
69+
<Heading level={'2'} size={'xsmall'} className={style.title}>
70+
{headerText}
71+
</Heading>
72+
{query && !isLoading && hits.length === 0 && (
73+
<Alert
74+
variant={'info'}
75+
className={style.notFound}
76+
size={'small'}
77+
inline={true}
78+
>{`Ingen treff for "${query}" i denne kategorien`}</Alert>
9479
)}
95-
</div>
96-
<div className={style.bottomSection}>
97-
{numPages > 1 && (
98-
<>
99-
<Pagination
100-
page={pageNumber}
101-
onPageChange={setPageNumber}
102-
count={numPages}
103-
size={'xsmall'}
104-
className={style.paginator}
80+
<div className={style.contentList}>
81+
{isLoading ? (
82+
<ContentLoader
83+
size={'xlarge'}
84+
text={'Laster innhold...'}
85+
direction={'column'}
10586
/>
106-
{currentCount > MAX_CONTENTS && (
107-
<Alert
108-
variant={'warning'}
109-
size={'small'}
110-
>{`Kan ikke vise flere enn ${MAX_CONTENTS} elementer (fant ${currentCount}). Bruk søkefeltet for å redusere antall elementer.`}</Alert>
111-
)}
112-
</>
87+
) : hits ? (
88+
<>
89+
{hits.map((content) => (
90+
<ContentLink content={content} key={content.contentKey} />
91+
))}
92+
</>
93+
) : (
94+
<Alert variant={'error'} inline={true}>
95+
{'Feil: Kunne ikke laste innhold for denne kategorien'}
96+
</Alert>
97+
)}
98+
</div>
99+
{currentCount > MAX_CONTENTS && (
100+
<Alert
101+
variant={'warning'}
102+
size={'small'}
103+
className={style.maxContentAlert}
104+
>{`Kan ikke vise flere enn ${MAX_CONTENTS} elementer (fant ${currentCount}). Bruk søkefeltet for å redusere antall elementer.`}</Alert>
113105
)}
114106
</div>
107+
{numPages > 1 && (
108+
<Pagination
109+
page={pageNumber}
110+
onPageChange={setPageNumber}
111+
count={numPages}
112+
size={'xsmall'}
113+
className={style.paginator}
114+
/>
115+
)}
115116
</div>
116117
);
117118
};

‎src/components/left-section/contents/content-link/ContentLink.module.css

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
padding: 0.125rem 0;
55
text-underline-offset: 0.1875rem;
66
text-decoration: none;
7+
word-break: break-word;
78

89
&:hover,
910
&:focus {

‎src/components/left-section/search/search-result/SearchResult.module.css

+8-1
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,17 @@
33
height: 100%;
44
padding: 0 0.5rem;
55
background-color: var(--a-white);
6+
overflow-y: scroll;
7+
scrollbar-width: thin;
68
}
79

810
.header {
911
display: flex;
1012
justify-content: space-between;
1113
margin-bottom: 0.25rem;
12-
}
14+
}
15+
16+
.paginator {
17+
padding: 0.5rem 0 1rem 0;
18+
align-self: center;
19+
}

‎src/components/left-section/search/search-result/SearchResult.tsx

+49-34
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,62 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
22
import { classNames } from '../../../../utils/classNames';
3-
import { Alert, Button, Heading } from '@navikt/ds-react';
3+
import { Alert, Button, Heading, Pagination } from '@navikt/ds-react';
44
import { SearchResultHit } from './search-hit/SearchResultHit';
55
import { ContentLoader } from '../../../common/loader/ContentLoader';
66
import { useSearchState } from '../../../../context/search-state/useSearchState';
77

88
import style from './SearchResult.module.css';
99

1010
export const SearchResult = () => {
11-
const { searchResult, setSearchResultIsOpen } = useSearchState();
11+
const { searchResult, setSearchResultIsOpen, searchParams, runSearch } = useSearchState();
12+
1213
const { hits, total, status, params } = searchResult;
14+
const { size, from } = params;
15+
16+
const numPages = Math.ceil(total / size);
17+
const currentPage = Math.floor(from / size) + 1;
1318

1419
return (
15-
<div className={classNames(style.result)}>
16-
{status === 'loading' ? (
17-
<ContentLoader size={'3xlarge'} text={'Laster søketreff...'} />
18-
) : status === 'error' ? (
19-
<Alert variant={'error'}>
20-
{
21-
'Feil: søket kunne ikke utføres. Prøv igjen, eller kontakt brukerstøtte dersom problemet vedvarer.'
22-
}
23-
</Alert>
24-
) : status === 'success' ? (
25-
<>
26-
<div className={style.header}>
27-
<Heading
28-
size={'small'}
29-
level={'2'}
30-
>{`Treff for "${params.query}" (${total})`}</Heading>
31-
<Button
32-
size={'xsmall'}
33-
variant={'tertiary'}
34-
onClick={() => setSearchResultIsOpen(false)}
35-
>
36-
{'Lukk'}
37-
</Button>
38-
</div>
39-
{hits.map((hit) => (
40-
<SearchResultHit hit={hit} key={hit.versionKey} />
41-
))}
42-
)
43-
</>
44-
) : null}
45-
</div>
20+
<>
21+
<div className={classNames(style.result)}>
22+
{status === 'loading' ? (
23+
<ContentLoader size={'3xlarge'} text={'Laster søketreff...'} />
24+
) : status === 'error' ? (
25+
<Alert variant={'error'}>
26+
{
27+
'Feil: søket kunne ikke utføres. Prøv igjen, eller kontakt brukerstøtte dersom problemet vedvarer.'
28+
}
29+
</Alert>
30+
) : status === 'success' ? (
31+
<>
32+
<div className={style.header}>
33+
<Heading
34+
size={'small'}
35+
level={'2'}
36+
>{`Treff for "${params.query}" (${total}):`}</Heading>
37+
<Button
38+
size={'xsmall'}
39+
variant={'tertiary'}
40+
onClick={() => setSearchResultIsOpen(false)}
41+
>
42+
{'Lukk'}
43+
</Button>
44+
</div>
45+
{hits.map((hit) => (
46+
<SearchResultHit hit={hit} key={hit.versionKey} />
47+
))}
48+
</>
49+
) : null}
50+
</div>
51+
{numPages > 1 && (
52+
<Pagination
53+
page={currentPage}
54+
onPageChange={(page) => runSearch({ ...searchParams, from: size * (page - 1) })}
55+
count={numPages}
56+
size={'xsmall'}
57+
className={style.paginator}
58+
/>
59+
)}
60+
</>
4661
);
4762
};

‎src/components/main-section/content-view/html-view/HtmlView.module.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.wrapper {
1+
.mainRow {
22
position: relative;
33
height: 100%;
44
width: 100%;

‎src/fetch/useFetchCategoryContents.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import useSWRImmutable from 'swr/immutable';
22
import { useApiFetch } from './useApiFetch';
3+
import { ContentSearchParams } from '../../common/contentSearch';
34

45
type FetchCategoryContentsParams = {
56
categoryKey: string;
@@ -16,11 +17,12 @@ export const useFetchCategoryContents = ({
1617
}: FetchCategoryContentsParams) => {
1718
const { fetchSearch } = useApiFetch();
1819

19-
const params = {
20+
const params: ContentSearchParams = {
2021
from,
2122
size,
2223
query,
2324
categoryKeys: [categoryKey],
25+
type: 'all',
2426
};
2527

2628
const { isLoading, data, error } = useSWRImmutable(params, fetchSearch);

0 commit comments

Comments
 (0)