Merge pull request #1529 from navikt/fix-kb-nav

Fikser piltastnavigering for søk, og logger bruk av piltastnavigering til amplitude

Author: anders-nom

Diff for: src/komponenter/header/header-regular/common/sok/Sok.tsx

@@ -8,7 +8,7 @@ import cls from 'classnames';
 import { Locale } from 'store/reducers/language-duck';
 import { SokInput } from './sok-innhold/SokInput';
 import Spinner from '../spinner/Spinner';
-import { Sokeresultat } from './utils';
+import { Sokeresultat, Soketreff } from './utils';
 import SokResultater from './sok-innhold/SokResultater';
 import { Environment } from 'store/reducers/environment-duck';
 import Cookies from 'js-cookie';
@@ -18,11 +18,13 @@ interface Props {
     id: string;
     isOpen: boolean;
     dropdownTransitionMs?: number;
-    numResultsCallback?: (numResults: number) => void;
+    searchHitsCallback?: (result: Soketreff[]) => void;
     searchInput: string;
     setSearchInput: (searchInput: string) => void;
 }
 
+const MAX_HITS_TO_DISPLAY = 5;
+
 const stateSelector = (state: AppState) => ({
     environment: state.environment,
     language: state.language.language,
@@ -37,8 +39,7 @@ const Sok = (props: Props) => {
     const [loading, setLoading] = useState<boolean>(false);
     const [result, setResult] = useState<Sokeresultat | undefined>();
     const [error, setError] = useState<string | undefined>();
-    const { searchInput, setSearchInput } = props;
-    const numberOfResults = 5;
+    const { searchInput, setSearchInput, searchHitsCallback } = props;
     const klassenavn = cls('sok-input', {
         engelsk: language === Locale.ENGELSK,
     });
@@ -50,8 +51,14 @@ const Sok = (props: Props) => {
     }, [props.isOpen]);
 
     useEffect(() => {
-        if (result && props.numResultsCallback) {
-            props.numResultsCallback(Math.min(result.hits.length, numberOfResults));
+        if (!searchHitsCallback) {
+            return;
+        }
+
+        if (result?.hits) {
+            searchHitsCallback(result.hits.slice(0, MAX_HITS_TO_DISPLAY));
+        } else {
+            searchHitsCallback([]);
         }
     }, [result]);
 
@@ -122,7 +129,7 @@ const Sok = (props: Props) => {
                             <SokResultater
                                 writtenInput={searchInput}
                                 result={result}
-                                numberOfResults={numberOfResults}
+                                numberOfResults={MAX_HITS_TO_DISPLAY}
                                 language={language}
                                 fetchError={error}
                             />

Diff for: src/komponenter/header/header-regular/desktop/sok-dropdown/SokDropdown.tsx

@@ -10,6 +10,8 @@ import { useKbNavSub } from 'utils/keyboard-navigation/useKbNavSub';
 import { configForNodeGroup } from 'utils/keyboard-navigation/kb-navigation-setup';
 import { KbNavGroup } from 'utils/keyboard-navigation/kb-navigation';
 import { SokKnapp } from 'komponenter/header/header-regular/desktop/sok-dropdown/sok-knapp/SokKnapp';
+import { Soketreff } from '../../common/sok/utils';
+
 import 'komponenter/header/header-regular/desktop/sok-dropdown/SokDropdown.scss';
 
 export const sokDropdownClassname = 'desktop-sok-dropdown';
@@ -27,8 +29,9 @@ type Props = {
 export const SokKnappDesktop = ({ kbNavMainState }: Props) => {
     const { isOpen } = useSelector(stateSelector);
     const [searchInput, setSearchInput] = useState<string>('');
-    const [numResults, setNumResults] = useState(0);
-    useKbNavSub(configForNodeGroup[KbNavGroup.Sok], kbNavMainState, isOpen, numResults);
+    const [searchHits, setSearchHits] = useState<Soketreff[]>([]);
+
+    useKbNavSub(configForNodeGroup[KbNavGroup.Sok], kbNavMainState, isOpen, searchHits);
 
     useEffect(() => {
         const dropdownElement = document.getElementById(sokDropdownClassname) as HTMLElement;
@@ -52,7 +55,7 @@ export const SokKnappDesktop = ({ kbNavMainState }: Props) => {
                     isOpen={isOpen}
                     id={desktopSokInputId}
                     dropdownTransitionMs={dropdownTransitionMs}
-                    numResultsCallback={setNumResults}
+                    searchHitsCallback={setSearchHits}
                     searchInput={searchInput}
                     setSearchInput={setSearchInput}
                 />

Diff for: src/utils/keyboard-navigation/kb-navigation.ts

@@ -1,4 +1,5 @@
 import { buildGraphAndGetRootNode } from './kb-graph-builder';
+import { logAmplitudeEvent } from '../analytics/amplitude';
 
 export enum KbNavGroup {
     HeaderMenylinje = 'desktop-header-menylinje',
@@ -118,6 +119,7 @@ export const selectNode = (node: KbNavNode, callback: NodeSetterCallback = () =>
     if (!element) {
         return;
     }
+    logAmplitudeEvent('piltast-navigasjon', { linkId: node.id, linkGroup: node.group });
     callback(node);
     if (focus) {
         element.focus();
@@ -155,20 +157,22 @@ const arrowkeysHandler = (currentNode: KbNavNode, setCurrentNode: NodeSetterCall
     event.preventDefault();
 };
 
-const focusHandler = (
-    currentNode: KbNavNode,
-    nodeMap: KbNavNodeMap,
-    setCurrentNode: NodeSetterCallback,
-    kbNavHandler: (e: KeyboardEvent) => void
-) => (event: FocusEvent) => {
-    const id = (event.target as HTMLElement).id;
-    const focusedNode = nodeMap[id];
-    if (focusedNode) {
-        selectNode(focusedNode, setCurrentNode, false);
-    } else {
-        document.removeEventListener('keydown', kbNavHandler);
-    }
-};
+const focusHandler =
+    (
+        currentNode: KbNavNode,
+        nodeMap: KbNavNodeMap,
+        setCurrentNode: NodeSetterCallback,
+        kbNavHandler: (e: KeyboardEvent) => void
+    ) =>
+    (event: FocusEvent) => {
+        const id = (event.target as HTMLElement).id;
+        const focusedNode = nodeMap[id];
+        if (focusedNode) {
+            selectNode(focusedNode, setCurrentNode, false);
+        } else {
+            document.removeEventListener('keydown', kbNavHandler);
+        }
+    };
 
 export const createKbNavGraph = (
     group: KbNavGroup,