Pirker på ting

Author: anders-nom

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

@@ -11,7 +11,7 @@ type Props = {
 };
 
 export const SearchInput = ({ className }: Props) => {
-    const { setSearchResult, searchParams, updateSearchParams, runSearch } = useSearchState();
+    const { searchParams, updateSearchParams, runSearch } = useSearchState();
 
     const inputRef = useRef<HTMLInputElement>(null);
 
@@ -27,13 +27,6 @@ export const SearchInput = ({ className }: Props) => {
                         return;
                     }
 
-                    setSearchResult({
-                        hits: [],
-                        params: searchParams,
-                        total: 0,
-                        status: 'loading',
-                    });
-
                     runSearch(searchParams);
                 }}
             >

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

@@ -36,7 +36,7 @@
     flex-direction: column;
     gap: 0.5rem;
 
-    background-color: var(--a-gray-200);
+    background-color: var(--a-blue-50);
     border-radius: var(--a-border-radius-medium);
     margin-bottom: 0.5rem;
     padding: 0 0.5rem;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { classNames } from '../../../../utils/classNames';
 import { Alert, Button, Heading } from '@navikt/ds-react';
 import { SearchResultHit } from './search-hit/SearchResultHit';
@@ -9,6 +9,7 @@ import { Paginator } from '../../../common/paginator/Paginator';
 import style from './SearchResult.module.css';
 
 export const SearchResult = () => {
+    const ref = useRef<HTMLDivElement>(null);
     const { searchResult, setSearchResultIsOpen, searchParams, runSearch } = useSearchState();
 
     const { hits, total, status, params } = searchResult;
@@ -17,11 +18,14 @@ export const SearchResult = () => {
     const numPages = Math.ceil(total / size);
     const currentPage = Math.floor(from / size) + 1;
 
-    const onPageChange = (page: number) => runSearch({ ...searchParams, from: size * (page - 1) });
+    const onPageChange = (page: number) => {
+        runSearch({ ...searchParams, from: size * (page - 1) });
+        ref.current?.scrollTo({ top: 0 });
+    };
 
     return (
         <>
-            <div className={classNames(style.result)}>
+            <div className={classNames(style.result)} ref={ref}>
                 {status === 'loading' ? (
                     <ContentLoader size={'3xlarge'} text={'Laster søketreff...'} />
                 ) : status === 'error' ? (

src/context/search-state/SearchStateProvider.tsx

@@ -34,7 +34,14 @@ export const SearchStateProvider = ({ children }: Props) => {
         setSearchSettingsIsOpen(false);
     };
 
-    const runSearch = (params: ContentSearchParams) =>
+    const runSearch = (params: ContentSearchParams) => {
+        setSearchResult({
+            hits: [],
+            params,
+            total: 0,
+            status: 'loading',
+        });
+
         fetchSearch(params).then((result) => {
             setSearchResult(
                 result || {
@@ -45,6 +52,7 @@ export const SearchStateProvider = ({ children }: Props) => {
                 }
             );
         });
+    };
 
     useEffect(() => {
         setSearchResultIsOpen(searchResult.status !== 'empty');