Refactor app-state

Author: anders-nom

src/components/App.tsx

@@ -1,11 +1,9 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React from 'react';
 import { AppContext } from '../../common/appContext';
 import { AppTopSection } from './top-section/AppTopSection';
 import { AppLeftSection } from './left-section/AppLeftSection';
 import { AppMainSection } from './main-section/AppMainSection';
-import { useAppState } from '../state/useAppState';
-import { CmsContent } from '../../common/cms-documents/content';
-import { CmsCategoryListItem } from '../../common/cms-documents/category';
+import { AppStateProvider } from '../state/useAppState';
 
 import style from './App.module.css';
 
@@ -14,49 +12,10 @@ type Props = {
 };
 
 export const App = ({ appContext }: Props) => {
-    const [selectedContent, _setSelectedContent] = useState<CmsContent | null>(null);
-    const [selectedCategory, setSelectedCategory] = useState<CmsCategoryListItem | null>(null);
-    const [contentSelectorOpen, setContentSelectorOpen] = useState<boolean>(false);
-
-    const { AppStateProvider } = useAppState();
-
     const { cmsName } = appContext;
 
-    const setSelectedContent = useCallback(
-        (content: CmsContent | null, toHistory: boolean = true) => {
-            _setSelectedContent(content);
-            if (toHistory) {
-                window.history.pushState(
-                    { ...window.history.state, content },
-                    '',
-                    `${appContext.basePath}/${content ? content.versionKey : ''}`
-                );
-            }
-        },
-        [appContext]
-    );
-
-    useEffect(() => {
-        const onPopState = (e: PopStateEvent) => {
-            setSelectedContent(e.state?.content || null, false);
-        };
-
-        window.addEventListener('popstate', onPopState);
-        return () => window.removeEventListener('popstate', onPopState);
-    }, [setSelectedContent]);
-
     return (
-        <AppStateProvider
-            value={{
-                appContext,
-                selectedContent,
-                setSelectedContent,
-                selectedCategory,
-                setSelectedCategory,
-                contentSelectorOpen,
-                setContentSelectorOpen,
-            }}
-        >
+        <AppStateProvider appContext={appContext}>
             <div className={style.root}>
                 <AppTopSection cmsName={cmsName} />
                 <AppLeftSection />

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

@@ -4,10 +4,11 @@ import { ContentSearchParams, ContentSearchResult } from '../../../../../common/
 import { useApiFetch } from '../../../../fetch/useApiFetch';
 import { classNames } from '../../../../utils/classNames';
 import { SearchSettings } from './search-settings/SearchSettings';
-import { getInitialSearchParams, initialSearchParams } from './params-initial-state';
+import { getInitialSearchParams } from './params-initial-state';
 import { useAppState } from '../../../../state/useAppState';
 
 import style from './SearchInput.module.css';
+import { initialSearchParams } from '../../../../state/useSearchState';
 
 type Props = {
     setSearchResult: (searchResult: ContentSearchResult | null) => void;

src/components/left-section/search/search-input/params-initial-state.ts

@@ -1,14 +1,9 @@
 import { ContentSearchParams } from '../../../../../common/contentSearch';
 import Cookies from 'js-cookie';
+import { initialSearchParams } from '../../../../state/useSearchState';
 
 const getCookieKey = (basePath: string) => `cms-archive-search-settings${basePath}`;
 
-export const initialSearchParams: ContentSearchParams = {
-    from: 0,
-    size: 50,
-    withChildCategories: true,
-} as const;
-
 export const getInitialSearchParams = (basePath: string): ContentSearchParams => {
     const cookieValue = Cookies.get(getCookieKey(basePath));
 

src/components/left-section/search/search-input/search-settings/SearchSettings.module.css

@@ -59,16 +59,6 @@
     align-items: center;
 }
 
-.withHelp {
-    display: flex;
-    gap: 0.5rem;
-    align-items: center;
-    :global(.navds-popover__content) {
-        font-size: var(--a-font-size-small);
-        line-height: var(--a-font-line-height-medium);
-    }
-}
-
 .categoriesSelector {
     ul {
         gap: 0.25rem;

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Button, HelpText, Label, Radio, RadioGroup, UNSAFE_Combobox } from '@navikt/ds-react';
+import { Button, Label, Radio, RadioGroup, UNSAFE_Combobox } from '@navikt/ds-react';
 import { ChevronDownIcon, XMarkIcon } from '@navikt/aksel-icons';
 import { ContentSearchParams } from '../../../../../../common/contentSearch';
 import { classNames } from '../../../../../utils/classNames';
@@ -70,15 +70,7 @@ export const SearchSettings = ({ searchParams, setSearchParams, reset }: Props)
                         onChange={(value) => updateSearchParams({ type: value })}
                     >
                         <Radio value={'titles'}>{'Tittel'}</Radio>
-                        <span className={style.withHelp}>
-                            <Radio value={'locations'}>{'URL'}</Radio>
-                            <HelpText wrapperClassName={style.help}>
-                                {'Prefix-søk på pathname. F.eks. vil '}
-                                <code>{'https://www.nav.no/no/person/arbeid'}</code>
-                                {' gi treff på alle sider med en path som starter med '}
-                                <code>{'/no/person/arbeid'}</code>
-                            </HelpText>
-                        </span>
+                        <Radio value={'locations'}>{'URL'}</Radio>
                         <Radio value={'all'}>{'Alt innhold'}</Radio>
                     </RadioGroup>
                     <RadioGroup

src/state/app-state/AppStateProvider.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+type Props = {
+    children: React.ReactNode;
+};
+
+export const AppStateProvider = ({ children }: Props) => {};

src/state/useAppState.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext } from 'react';
+import React, { createContext, useCallback, useContext, useEffect, useState } from 'react';
 import { AppContext, appErrorContext } from '../../common/appContext';
 import { CmsContent } from '../../common/cms-documents/content';
 import { CmsCategoryListItem } from '../../common/cms-documents/category';
@@ -13,7 +13,6 @@ type AppState = {
     setContentSelectorOpen: (isOpen: boolean) => void;
 };
 
-// eslint-disable-next-line react-refresh/only-export-components
 const AppStateContext = createContext<AppState>({
     appContext: appErrorContext,
     selectedContent: null,
@@ -25,24 +24,55 @@ const AppStateContext = createContext<AppState>({
 });
 
 export const useAppState = () => {
-    const {
-        appContext,
-        selectedContent,
-        setSelectedContent,
-        selectedCategory,
-        setSelectedCategory,
-        contentSelectorOpen,
-        setContentSelectorOpen,
-    } = useContext(AppStateContext);
-
-    return {
-        AppStateProvider: AppStateContext.Provider,
-        appContext,
-        selectedContent,
-        setSelectedContent,
-        selectedCategory,
-        setSelectedCategory,
-        contentSelectorOpen,
-        setContentSelectorOpen,
-    };
+    return useContext(AppStateContext);
+};
+
+type ProviderProps = {
+    appContext: AppContext;
+    children: React.ReactNode;
+};
+
+export const AppStateProvider = ({ appContext, children }: ProviderProps) => {
+    const [selectedContent, setSelectedContent] = useState<CmsContent | null>(null);
+    const [selectedCategory, setSelectedCategory] = useState<CmsCategoryListItem | null>(null);
+    const [contentSelectorOpen, setContentSelectorOpen] = useState<boolean>(false);
+
+    const setSelectedContentWithHistory = useCallback(
+        (content: CmsContent | null, toHistory: boolean = true) => {
+            setSelectedContent(content);
+            if (toHistory) {
+                window.history.pushState(
+                    { ...window.history.state, content },
+                    '',
+                    `${appContext.basePath}/${content ? content.versionKey : ''}`
+                );
+            }
+        },
+        [appContext]
+    );
+
+    useEffect(() => {
+        const onPopState = (e: PopStateEvent) => {
+            setSelectedContentWithHistory(e.state?.content || null, false);
+        };
+
+        window.addEventListener('popstate', onPopState);
+        return () => window.removeEventListener('popstate', onPopState);
+    }, [setSelectedContentWithHistory]);
+
+    return (
+        <AppStateContext.Provider
+            value={{
+                appContext,
+                selectedContent,
+                setSelectedContent: setSelectedContentWithHistory,
+                selectedCategory,
+                setSelectedCategory,
+                contentSelectorOpen,
+                setContentSelectorOpen,
+            }}
+        >
+            {children}
+        </AppStateContext.Provider>
+    );
 };

src/state/useSearchState.ts

@@ -0,0 +1,32 @@
+import React, { createContext, useContext, useState } from 'react';
+import { appErrorContext } from '../../common/appContext';
+import { ContentSearchParams, ContentSearchResult } from '../../common/contentSearch';
+
+type SearchState = {
+    searchResult: ContentSearchResult | null;
+    searchParams: ContentSearchParams;
+};
+
+export const initialSearchParams: ContentSearchParams = {
+    from: 0,
+    size: 50,
+    withChildCategories: true,
+} as const;
+
+const SearchStateContext = createContext<SearchState>({
+    searchResult: null,
+    searchParams: initialSearchParams,
+});
+
+export const useSearchState = () => {
+    const { searchParams, searchResult } = useContext(SearchStateContext);
+
+    return {
+        searchParams,
+        searchResult,
+    };
+};
+
+export const SearchProvider = ({ children }: { children: React.ReactNode }) => {
+    const [result, setResult] = useState();
+};