Skip to content

Commit 6d4b15e

Browse files
anders-nomanders-nom
committed
Refactor context
1 parent 284f20a commit 6d4b15e

File tree

24 files changed

+188
-167
lines changed

24 files changed

+188
-167
lines changed

‎server/src/cms/CmsArchiveCategoriesService.ts

+21-23
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,6 @@ export class CmsArchiveCategoriesService {
3131
return false;
3232
}
3333

34-
console.log(`Found ${allCategories.length} categories for ${this.config.name}`);
35-
3634
this.populateCategoriesMap(allCategories);
3735

3836
console.log(
@@ -69,27 +67,6 @@ export class CmsArchiveCategoriesService {
6967
return keys;
7068
}
7169

72-
private populateCategoriesMap(categories: CmsCategoryListItem[]) {
73-
this.categoriesMap.clear();
74-
this.rootCategories.length = 0;
75-
76-
categories.forEach((category) => {
77-
this.categoriesMap.set(category.key, category);
78-
if (!category.superKey) {
79-
this.rootCategories.push(category);
80-
}
81-
});
82-
83-
this.categoriesMap.forEach((category) => {
84-
if (category.superKey) {
85-
category.path = this.resolveCategoryPath(category.superKey);
86-
}
87-
category.categories.sort((a, b) => a.name.localeCompare(b.name));
88-
});
89-
90-
this.rootCategories.sort((a, b) => a.title.localeCompare(b.title));
91-
}
92-
9370
public resolveCategoryPath(categoryKey: string, path: CmsCategoryPath = []): CmsCategoryPath {
9471
const category = this.categoriesMap.get(categoryKey);
9572
if (!category) {
@@ -111,6 +88,27 @@ export class CmsArchiveCategoriesService {
11188
return this.resolveCategoryPath(superKey, path);
11289
}
11390

91+
private populateCategoriesMap(categories: CmsCategoryListItem[]) {
92+
this.categoriesMap.clear();
93+
this.rootCategories.length = 0;
94+
95+
categories.forEach((category) => {
96+
this.categoriesMap.set(category.key, category);
97+
if (!category.superKey) {
98+
this.rootCategories.push(category);
99+
}
100+
});
101+
102+
this.categoriesMap.forEach((category) => {
103+
if (category.superKey) {
104+
category.path = this.resolveCategoryPath(category.superKey);
105+
}
106+
category.categories.sort((a, b) => a.name.localeCompare(b.name));
107+
});
108+
109+
this.rootCategories.sort((a, b) => a.title.localeCompare(b.title));
110+
}
111+
114112
private async getAllCategories(): Promise<CmsCategoryListItem[] | null> {
115113
return this.client
116114
.search<CmsCategoryDocument>({

‎src/components/App.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ import { AppContext } from '../../common/appContext';
33
import { AppTopSection } from './top-section/AppTopSection';
44
import { AppLeftSection } from './left-section/AppLeftSection';
55
import { AppMainSection } from './main-section/AppMainSection';
6-
import { AppStateProvider } from '../state/useAppState';
6+
import { AppStateProvider } from '../context/app-state/AppStateProvider';
7+
import { SearchStateProvider } from '../context/search-state/SearchStateProvider';
78

89
import style from './App.module.css';
910

@@ -18,7 +19,9 @@ export const App = ({ appContext }: Props) => {
1819
<AppStateProvider appContext={appContext}>
1920
<div className={style.root}>
2021
<AppTopSection cmsName={cmsName} />
21-
<AppLeftSection />
22+
<SearchStateProvider>
23+
<AppLeftSection />
24+
</SearchStateProvider>
2225
<AppMainSection />
2326
</div>
2427
</AppStateProvider>

‎src/components/left-section/AppLeftSection.tsx

+10-16
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,20 @@
1-
import React, { useEffect, useState } from 'react';
1+
import React from 'react';
22
import { CategoriesMenu } from './categories/CategoriesMenu';
33
import { ContentMenu } from './contents/ContentMenu';
4-
import { useAppState } from '../../state/useAppState';
54
import { classNames } from '../../utils/classNames';
65
import { SearchInput } from './search/search-input/SearchInput';
76
import { SearchResult } from './search/search-result/SearchResult';
8-
import { ContentSearchResult } from '../../../common/contentSearch';
97
import { Alert, BodyLong, Heading } from '@navikt/ds-react';
8+
import { useAppState } from '../../context/app-state/useAppState';
9+
import { useSearchState } from '../../context/search-state/useSearchState';
1010

1111
import style from './AppLeftSection.module.css';
1212

1313
export const AppLeftSection = () => {
14-
const [searchResult, setSearchResult] = useState<ContentSearchResult | null>(null);
15-
const [searchResultOpen, setSearchResultOpen] = useState(false);
16-
1714
const { selectedCategory, appContext, contentSelectorOpen } = useAppState();
1815
const { rootCategories } = appContext;
1916

20-
useEffect(() => {
21-
setSearchResultOpen(!!searchResult);
22-
}, [searchResult]);
17+
const { searchResultIsOpen } = useSearchState();
2318

2419
return (
2520
<div className={style.root}>
@@ -41,22 +36,21 @@ export const AppLeftSection = () => {
4136
</BodyLong>
4237
</Alert>
4338
) : (
44-
<SearchInput setSearchResult={setSearchResult} />
39+
<SearchInput />
4540
)}
4641
<div className={style.categoriesAndSearchResult}>
4742
<div
4843
className={classNames(
4944
style.categoriesMenu,
50-
searchResultOpen && style.hidden
45+
searchResultIsOpen && style.hidden
5146
)}
5247
>
5348
<CategoriesMenu rootCategories={rootCategories} />
5449
</div>
55-
<div className={classNames(style.searchResult, searchResultOpen && style.open)}>
56-
<SearchResult
57-
result={searchResult}
58-
close={() => setSearchResultOpen(false)}
59-
/>
50+
<div
51+
className={classNames(style.searchResult, searchResultIsOpen && style.open)}
52+
>
53+
<SearchResult />
6054
</div>
6155
</div>
6256
</div>

‎src/components/left-section/categories/category/Category.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,19 @@ import { CmsCategoryListItem } from '../../../../../common/cms-documents/categor
33
import { Tooltip } from '@navikt/ds-react';
44
import { TreeItem } from '@mui/x-tree-view';
55
import { CategoriesList } from '../CategoriesList';
6-
import { useAppState } from '../../../../state/useAppState';
76
import { ArrowForwardIcon, CircleSlashIcon } from '@navikt/aksel-icons';
87
import { useFetchCategories } from '../../../../fetch/useFetchCategories';
98
import { ContentLoader } from '../../../common/loader/ContentLoader';
109
import { TreeItemClasses } from '@mui/x-tree-view/TreeItem/treeItemClasses';
10+
import { useAppState } from '../../../../context/app-state/useAppState';
1111

1212
import style from './Category.module.css';
1313

1414
const classesOverride: Partial<TreeItemClasses> = {
1515
content: style.content,
1616
label: style.label,
1717
disabled: style.disabled,
18-
};
18+
} as const;
1919

2020
type Props = {
2121
category: CmsCategoryListItem;

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
22
import { CmsCategoryListItem } from '../../../../common/cms-documents/category';
33
import { Alert, Button, Heading, Pagination, TextField } from '@navikt/ds-react';
44
import { ArrowLeftIcon } from '@navikt/aksel-icons';
5-
import { useAppState } from '../../../state/useAppState';
5+
import { useAppState } from '../../../context/app-state/useAppState';
66
import { ContentLink } from './content-link/ContentLink';
77
import { useFetchCategoryContents } from '../../../fetch/useFetchCategoryContents';
88
import { ContentLoader } from '../../common/loader/ContentLoader';

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
22
import { CmsContentListItem } from '../../../../../common/cms-documents/content';
33
import { BodyShort, Link, Loader } from '@navikt/ds-react';
44
import { useApiFetch } from '../../../../fetch/useApiFetch';
5-
import { useAppState } from '../../../../state/useAppState';
5+
import { useAppState } from '../../../../context/app-state/useAppState';
66
import { classNames } from '../../../../utils/classNames';
77

88
import style from './ContentLink.module.css';

‎src/components/left-section/search/search-input/SearchInput.tsx

+5-17
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,26 @@
1-
import React, { useRef, useState } from 'react';
1+
import React, { useRef } from 'react';
22
import { Search } from '@navikt/ds-react';
3-
import { ContentSearchParams, ContentSearchResult } from '../../../../../common/contentSearch';
43
import { useApiFetch } from '../../../../fetch/useApiFetch';
54
import { classNames } from '../../../../utils/classNames';
65
import { SearchSettings } from './search-settings/SearchSettings';
7-
import { getInitialSearchParams } from './params-initial-state';
8-
import { useAppState } from '../../../../state/useAppState';
6+
import { useSearchState } from '../../../../context/search-state/useSearchState';
97

108
import style from './SearchInput.module.css';
11-
import { initialSearchParams } from '../../../../state/useSearchState';
129

1310
type Props = {
14-
setSearchResult: (searchResult: ContentSearchResult | null) => void;
1511
className?: string;
1612
};
1713

18-
export const SearchInput = ({ setSearchResult, className }: Props) => {
19-
const { appContext } = useAppState();
20-
const { basePath } = appContext;
14+
export const SearchInput = ({ className }: Props) => {
15+
const { setSearchResult, searchParams, setSearchParams } = useSearchState();
2116

2217
const inputRef = useRef<HTMLInputElement>(null);
23-
const [searchParams, setSearchParams] = useState<ContentSearchParams>(
24-
getInitialSearchParams(basePath)
25-
);
2618

2719
const { fetchSearch } = useApiFetch();
2820

2921
return (
3022
<div className={classNames(style.search, className)}>
31-
<SearchSettings
32-
searchParams={searchParams}
33-
setSearchParams={setSearchParams}
34-
reset={() => setSearchParams({ ...initialSearchParams, query: searchParams.query })}
35-
/>
23+
<SearchSettings />
3624
<form
3725
role={'search'}
3826
onSubmit={(e) => {

‎src/components/left-section/search/search-input/search-settings/SearchSettings.tsx

+6-18
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,27 @@
11
import React, { useState } from 'react';
22
import { Button, Label, Radio, RadioGroup, UNSAFE_Combobox } from '@navikt/ds-react';
33
import { ChevronDownIcon, XMarkIcon } from '@navikt/aksel-icons';
4-
import { ContentSearchParams } from '../../../../../../common/contentSearch';
54
import { classNames } from '../../../../../utils/classNames';
6-
import { useAppState } from '../../../../../state/useAppState';
75
import { CmsCategoryListItem } from '../../../../../../common/cms-documents/category';
8-
import { persistSearchParams } from '../params-initial-state';
6+
import { useAppState } from '../../../../../context/app-state/useAppState';
7+
import { useSearchState } from '../../../../../context/search-state/useSearchState';
98

109
import style from './SearchSettings.module.css';
1110

12-
type Props = {
13-
searchParams: ContentSearchParams;
14-
setSearchParams: (params: ContentSearchParams) => void;
15-
reset: () => void;
16-
};
17-
18-
export const SearchSettings = ({ searchParams, setSearchParams, reset }: Props) => {
11+
export const SearchSettings = () => {
1912
const [isOpen, setIsOpen] = useState(false);
2013

2114
const { appContext } = useAppState();
22-
const { rootCategories, basePath } = appContext;
15+
const { rootCategories } = appContext;
2316

17+
const { searchParams, updateSearchParams, resetSearchParams } = useSearchState();
2418
const { sort, categoryKeys, type, isCustom } = searchParams;
2519

2620
const { titlesToKeys, keysToTitles } = createKeysTitlesMaps(rootCategories);
2721
const categoryKeysSelected = new Set<string>(categoryKeys);
2822
const categoryTitlesSelected = [...categoryKeysSelected].map((key) => keysToTitles[key]);
2923
const categoryTitlesAll = Object.keys(titlesToKeys);
3024

31-
const updateSearchParams = (params: Partial<ContentSearchParams>) => {
32-
const newParams: ContentSearchParams = { ...searchParams, ...params, isCustom: true };
33-
persistSearchParams(newParams, basePath);
34-
setSearchParams(newParams);
35-
};
36-
3725
return (
3826
<div className={style.container}>
3927
<div className={style.topRow}>
@@ -44,7 +32,7 @@ export const SearchSettings = ({ searchParams, setSearchParams, reset }: Props)
4432
size={'xsmall'}
4533
variant={'tertiary'}
4634
className={style.toggle}
47-
onClick={reset}
35+
onClick={resetSearchParams}
4836
>
4937
{'Nullstill'}
5038
<XMarkIcon />

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

+12-12
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,36 @@
11
import React from 'react';
22
import { classNames } from '../../../../utils/classNames';
3-
import { ContentSearchResult } from '../../../../../common/contentSearch';
43
import { Button, Heading } from '@navikt/ds-react';
54
import { SearchResultHit } from './search-hit/SearchResultHit';
65
import { ContentLoader } from '../../../common/loader/ContentLoader';
6+
import { useSearchState } from '../../../../context/search-state/useSearchState';
77

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

10-
type Props = {
11-
result: ContentSearchResult | null;
12-
close: () => void;
13-
};
10+
export const SearchResult = () => {
11+
const { searchResult, setSearchResult } = useSearchState();
1412

15-
export const SearchResult = ({ result, close }: Props) => {
1613
return (
1714
<div className={classNames(style.result)}>
18-
{result?.status === 'loading' && (
15+
{searchResult?.status === 'loading' && (
1916
<ContentLoader size={'3xlarge'} text={'Laster søketreff...'} />
2017
)}
21-
{result && result.status !== 'loading' && (
18+
{searchResult && searchResult.status !== 'loading' && (
2219
<div className={style.header}>
2320
<Heading
2421
size={'small'}
2522
level={'2'}
26-
>{`Treff for "${result.params.query}" (${result.total})`}</Heading>
27-
<Button size={'xsmall'} variant={'tertiary'} onClick={close}>
23+
>{`Treff for "${searchResult.params.query}" (${searchResult.total})`}</Heading>
24+
<Button
25+
size={'xsmall'}
26+
variant={'tertiary'}
27+
onClick={() => setSearchResult(null)}
28+
>
2829
{'Lukk'}
2930
</Button>
3031
</div>
3132
)}
32-
33-
{result?.hits.map((hit) => <SearchResultHit hit={hit} key={hit.versionKey} />)}
33+
{searchResult?.hits.map((hit) => <SearchResultHit hit={hit} key={hit.versionKey} />)}
3434
</div>
3535
);
3636
};

‎src/components/main-section/AppMainSection.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useEffect } from 'react';
22
import { ContentView } from './content-view/ContentView';
3-
import { useAppState } from '../../state/useAppState';
3+
import { useAppState } from '../../context/app-state/useAppState';
44
import { Heading } from '@navikt/ds-react';
55
import { ArrowLeftIcon } from '@navikt/aksel-icons';
66
import { useApiFetch } from '../../fetch/useApiFetch';

‎src/components/main-section/content-view/files-view/FilesView.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import { CmsContent } from '../../../../../common/cms-documents/content';
33
import { Link } from '@navikt/ds-react';
4-
import { useAppState } from '../../../../state/useAppState';
4+
import { useAppState } from '../../../../context/app-state/useAppState';
55
import { classNames } from '../../../../utils/classNames';
66

77
import style from './FilesView.module.css';

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useRef } from 'react';
22
import { classNames } from '../../../../utils/classNames';
33
import { Button } from '@navikt/ds-react';
4-
import { useAppState } from '../../../../state/useAppState';
4+
import { useAppState } from '../../../../context/app-state/useAppState';
55
import { ExpandIcon } from '@navikt/aksel-icons';
66

77
import style from './HtmlView.module.css';

‎src/components/main-section/content-view/version-selector/VersionSelector.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React, { useState } from 'react';
22
import { Select } from '@navikt/ds-react';
33
import { CmsContent } from '../../../../../common/cms-documents/content';
4-
import { useAppState } from '../../../../state/useAppState';
54
import { useApiFetch } from '../../../../fetch/useApiFetch';
5+
import { useAppState } from '../../../../context/app-state/useAppState';
66

77
const TITLE_MAX_LENGTH = 100;
88

‎src/components/top-section/archive-selector/ArchiveSelector.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { Select } from '@navikt/ds-react';
3-
import { useAppState } from '../../../state/useAppState';
3+
import { useAppState } from '../../../context/app-state/useAppState';
44

55
import style from './ArchiveSelector.module.css';
66

0 commit comments

Comments
 (0)