Persisterer søke-parametre med cookies

Author: anders-nom

package-lock.json

@@ -24,15 +24,17 @@
     "@navikt/ds-css": "5.17.4",
     "@navikt/ds-react": "5.17.4",
     "csp-header": "5.2.1",
+    "js-cookie": "3.0.5",
     "lodash.debounce": "4.0.8",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-xml-viewer": "2.0.1",
     "swr": "2.2.4"
   },
   "devDependencies": {
-    "@types/node": "20.11.9",
+    "@types/js-cookie": "3.0.6",
     "@types/lodash": "4.14.202",
+    "@types/node": "20.11.9",
     "@types/react": "18.2.48",
     "@types/react-dom": "18.2.18",
     "@typescript-eslint/eslint-plugin": "6.19.1",

package.json

@@ -3,7 +3,7 @@ import { CategoriesMenu } from './categories/CategoriesMenu';
 import { ContentMenu } from './contents/ContentMenu';
 import { useAppState } from '../../state/useAppState';
 import { classNames } from '../../utils/classNames';
-import { SearchInput } from './search/SearchInput';
+import { SearchInput } from './search/search-input/SearchInput';
 import { SearchResult } from './search/search-result/SearchResult';
 import { ContentSearchResult } from '../../../common/contentSearch';
 import { Alert, BodyLong, Heading } from '@navikt/ds-react';

src/components/left-section/AppLeftSection.tsx

@@ -1,9 +1,11 @@
 import React, { useRef, useState } from 'react';
 import { Search } from '@navikt/ds-react';
-import { ContentSearchParams, ContentSearchResult } from '../../../../common/contentSearch';
-import { useApiFetch } from '../../../fetch/useApiFetch';
-import { classNames } from '../../../utils/classNames';
+import { ContentSearchParams, ContentSearchResult } from '../../../../../common/contentSearch';
+import { useApiFetch } from '../../../../fetch/useApiFetch';
+import { classNames } from '../../../../utils/classNames';
 import { SearchSettings } from './search-settings/SearchSettings';
+import { getInitialSearchParams, persistSearchParams } from './params-initial-state';
+import { useAppState } from '../../../../state/useAppState';
 
 import style from './SearchInput.module.css';
 
@@ -13,17 +15,18 @@ type Props = {
 };
 
 export const SearchInput = ({ setSearchResult, className }: Props) => {
+    const { appContext } = useAppState();
+    const { basePath } = appContext;
+
     const inputRef = useRef<HTMLInputElement>(null);
-    const [searchParams, setSearchParams] = useState<ContentSearchParams>({
-        from: 0,
-        size: 50,
-        sort: 'score',
-        type: 'titles',
-        withChildCategories: true,
-    });
+    const [searchParams, setSearchParams] = useState<ContentSearchParams>(
+        getInitialSearchParams(basePath)
+    );
 
     const setSearchParamsPartial = (params: Partial<ContentSearchParams>) => {
-        setSearchParams({ ...searchParams, ...params });
+        const newParams = { ...searchParams, ...params };
+        persistSearchParams(newParams, basePath);
+        setSearchParams(newParams);
     };
 
     const { fetchSearch } = useApiFetch();

src/components/left-section/search/SearchInput.module.css src/components/left-section/search/search-input/SearchInput.module.css

@@ -0,0 +1,35 @@
+import { ContentSearchParams } from '../../../../../common/contentSearch';
+import Cookies from 'js-cookie';
+
+const getCookieKey = (basePath: string) => `cms-archive-search-settings${basePath}`;
+
+const initialParamsRequired: ContentSearchParams = {
+    from: 0,
+    size: 50,
+    withChildCategories: true,
+} as const;
+
+export const getInitialSearchParams = (basePath: string): ContentSearchParams => {
+    const cookieValue = Cookies.get(getCookieKey(basePath));
+
+    if (cookieValue) {
+        try {
+            const parsed = JSON.parse(cookieValue);
+
+            return {
+                ...parsed,
+                ...initialParamsRequired,
+            };
+        } catch (e) {
+            console.error(`Failed to parse search params from cookie - ${e}`);
+        }
+    }
+
+    return initialParamsRequired;
+};
+
+export const persistSearchParams = (params: ContentSearchParams, basePath: string) => {
+    Cookies.set(getCookieKey(basePath), JSON.stringify(params), {
+        expires: 365,
+    });
+};

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

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
 import { Button, HelpText, Label, Radio, RadioGroup, UNSAFE_Combobox } from '@navikt/ds-react';
 import { ChevronDownIcon } from '@navikt/aksel-icons';
-import { ContentSearchParams } from '../../../../../common/contentSearch';
-import { classNames } from '../../../../utils/classNames';
-import { useAppState } from '../../../../state/useAppState';
-import { CmsCategoryListItem } from '../../../../../common/cms-documents/category';
+import { ContentSearchParams } from '../../../../../../common/contentSearch';
+import { classNames } from '../../../../../utils/classNames';
+import { useAppState } from '../../../../../state/useAppState';
+import { CmsCategoryListItem } from '../../../../../../common/cms-documents/category';
 
 import style from './SearchSettings.module.css';
 
@@ -43,7 +43,7 @@ export const SearchSettings = ({ searchParams, setSearchParams }: Props) => {
                 <RadioGroup
                     size={'small'}
                     legend={'Søk etter...'}
-                    value={type}
+                    value={type || 'titles'}
                     onChange={(value) => setSearchParams({ type: value })}
                 >
                     <Radio value={'titles'}>{'Tittel'}</Radio>
@@ -61,7 +61,7 @@ export const SearchSettings = ({ searchParams, setSearchParams }: Props) => {
                 <RadioGroup
                     size={'small'}
                     legend={'Sortering'}
-                    value={sort}
+                    value={sort || 'score'}
                     onChange={(value) => setSearchParams({ sort: value })}
                 >
                     <Radio value={'score'}>{'Beste treff'}</Radio>