Tweaker visning av søkeresultat

Author: anders-nom

common/contentSearch.ts

@@ -5,7 +5,7 @@ export type ContentSearchHit = Pick<
     'contentKey' | 'versionKey' | 'displayName' | 'path'
 > & { score: number };
 
-export type ContentSearchStatus = 'loading' | 'error' | 'success';
+export type ContentSearchStatus = 'loading' | 'error' | 'success' | 'empty';
 
 export type ContentSearchResult = {
     total: number;

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

@@ -1,6 +1,5 @@
 import React, { useRef } from 'react';
 import { Search } from '@navikt/ds-react';
-import { useApiFetch } from '../../../../fetch/useApiFetch';
 import { classNames } from '../../../../utils/classNames';
 import { SearchSettings } from './search-settings/SearchSettings';
 import { useSearchState } from '../../../../context/search-state/useSearchState';
@@ -12,12 +11,10 @@ type Props = {
 };
 
 export const SearchInput = ({ className }: Props) => {
-    const { setSearchResult, searchParams, setSearchParams } = useSearchState();
+    const { setSearchResult, searchParams, setSearchParams, runSearch } = useSearchState();
 
     const inputRef = useRef<HTMLInputElement>(null);
 
-    const { fetchSearch } = useApiFetch();
-
     return (
         <div className={classNames(style.search, className)}>
             <SearchSettings />
@@ -37,9 +34,7 @@ export const SearchInput = ({ className }: Props) => {
                         status: 'loading',
                     });
 
-                    fetchSearch(searchParams).then((result) => {
-                        setSearchResult(result);
-                    });
+                    runSearch(searchParams);
                 }}
             >
                 <Search

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

@@ -1,36 +1,47 @@
 import React from 'react';
 import { classNames } from '../../../../utils/classNames';
-import { Button, Heading } from '@navikt/ds-react';
+import { Alert, Button, Heading } from '@navikt/ds-react';
 import { SearchResultHit } from './search-hit/SearchResultHit';
 import { ContentLoader } from '../../../common/loader/ContentLoader';
 import { useSearchState } from '../../../../context/search-state/useSearchState';
 
 import style from './SearchResult.module.css';
 
 export const SearchResult = () => {
-    const { searchResult, setSearchResult } = useSearchState();
+    const { searchResult, setSearchResultIsOpen } = useSearchState();
+    const { hits, total, status, params } = searchResult;
 
     return (
         <div className={classNames(style.result)}>
-            {searchResult?.status === 'loading' && (
+            {status === 'loading' ? (
                 <ContentLoader size={'3xlarge'} text={'Laster søketreff...'} />
-            )}
-            {searchResult && searchResult.status !== 'loading' && (
-                <div className={style.header}>
-                    <Heading
-                        size={'small'}
-                        level={'2'}
-                    >{`Treff for "${searchResult.params.query}" (${searchResult.total})`}</Heading>
-                    <Button
-                        size={'xsmall'}
-                        variant={'tertiary'}
-                        onClick={() => setSearchResult(null)}
-                    >
-                        {'Lukk'}
-                    </Button>
-                </div>
-            )}
-            {searchResult?.hits.map((hit) => <SearchResultHit hit={hit} key={hit.versionKey} />)}
+            ) : status === 'error' ? (
+                <Alert variant={'error'}>
+                    {
+                        'Feil: søket kunne ikke utføres. Prøv igjen, eller kontakt brukerstøtte dersom problemet vedvarer.'
+                    }
+                </Alert>
+            ) : status === 'success' ? (
+                <>
+                    <div className={style.header}>
+                        <Heading
+                            size={'small'}
+                            level={'2'}
+                        >{`Treff for "${params.query}" (${total})`}</Heading>
+                        <Button
+                            size={'xsmall'}
+                            variant={'tertiary'}
+                            onClick={() => setSearchResultIsOpen(false)}
+                        >
+                            {'Lukk'}
+                        </Button>
+                    </div>
+                    {hits.map((hit) => (
+                        <SearchResultHit hit={hit} key={hit.versionKey} />
+                    ))}
+                    )
+                </>
+            ) : null}
         </div>
     );
 };

src/context/search-state/SearchStateContext.ts

@@ -2,14 +2,15 @@ import { createContext } from 'react';
 import { ContentSearchParams, ContentSearchResult } from '../../../common/contentSearch';
 
 export type SearchState = {
-    searchResult: ContentSearchResult | null;
-    setSearchResult: (result: ContentSearchResult | null) => void;
+    searchResult: ContentSearchResult;
+    setSearchResult: (result: ContentSearchResult) => void;
     searchResultIsOpen: boolean;
     setSearchResultIsOpen: (isOpen: boolean) => void;
     searchParams: ContentSearchParams;
     setSearchParams: (params: ContentSearchParams) => void;
     updateSearchParams: (params: Partial<ContentSearchParams>) => void;
     resetSearchSettings: () => void;
+    runSearch: (params: ContentSearchParams) => void;
 };
 
 export const initialSearchParams: ContentSearchParams = {
@@ -18,13 +19,21 @@ export const initialSearchParams: ContentSearchParams = {
     withChildCategories: true,
 } as const;
 
+export const emptySearchResult: ContentSearchResult = {
+    total: 0,
+    hits: [],
+    status: 'empty',
+    params: initialSearchParams,
+} as const;
+
 export const SearchStateContext = createContext<SearchState>({
-    searchResult: null,
+    searchResult: emptySearchResult,
     setSearchResult: () => ({}),
     searchResultIsOpen: false,
     setSearchResultIsOpen: () => ({}),
     searchParams: initialSearchParams,
     setSearchParams: () => ({}),
     updateSearchParams: () => ({}),
     resetSearchSettings: () => ({}),
+    runSearch: () => ({}),
 });

src/context/search-state/SearchStateProvider.tsx

@@ -1,15 +1,21 @@
 import React, { useEffect, useState } from 'react';
-import { initialSearchParams, SearchState, SearchStateContext } from './SearchStateContext';
-import { ContentSearchParams } from '../../../common/contentSearch';
+import { emptySearchResult, initialSearchParams, SearchStateContext } from './SearchStateContext';
+import { ContentSearchParams, ContentSearchResult } from '../../../common/contentSearch';
 import { getInitialSearchParams, persistSearchParams } from './search-settings-cookies';
 import { useAppState } from '../app-state/useAppState';
+import { useApiFetch } from '../../fetch/useApiFetch';
 
-export const SearchStateProvider = ({ children }: { children: React.ReactNode }) => {
+type Props = {
+    children: React.ReactNode;
+};
+
+export const SearchStateProvider = ({ children }: Props) => {
     const { appContext } = useAppState();
     const { basePath } = appContext;
+    const { fetchSearch } = useApiFetch();
 
-    const [searchResult, setSearchResult] = useState<SearchState['searchResult']>(null);
-    const [searchParams, setSearchParams] = useState<SearchState['searchParams']>(
+    const [searchResult, setSearchResult] = useState<ContentSearchResult>(emptySearchResult);
+    const [searchParams, setSearchParams] = useState<ContentSearchParams>(
         getInitialSearchParams(basePath)
     );
     const [searchResultIsOpen, setSearchResultIsOpen] = useState(false);
@@ -23,8 +29,20 @@ export const SearchStateProvider = ({ children }: { children: React.ReactNode })
     const resetSearchSettings = () =>
         setSearchParams({ ...initialSearchParams, query: searchParams.query });
 
+    const runSearch = (params: ContentSearchParams) =>
+        fetchSearch(params).then((result) => {
+            setSearchResult(
+                result || {
+                    total: 0,
+                    hits: [],
+                    status: 'error',
+                    params: params,
+                }
+            );
+        });
+
     useEffect(() => {
-        setSearchResultIsOpen(!!searchResult);
+        setSearchResultIsOpen(searchResult.status !== 'empty');
     }, [searchResult]);
 
     return (
@@ -38,6 +56,7 @@ export const SearchStateProvider = ({ children }: { children: React.ReactNode })
                 setSearchResultIsOpen,
                 updateSearchParams,
                 resetSearchSettings,
+                runSearch,
             }}
         >
             {children}