From 21199ba4a3283054cbcba04f165aaae07c1ce520 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Anders=20Br=C3=A5then=20Nomerstad?= Date: Tue, 20 Feb 2024 12:26:26 +0100 Subject: [PATCH 1/2] Logger bruk av piltast-navigering til amplitude --- .../keyboard-navigation/kb-navigation.ts | 32 +++++++++++-------- 1 file changed, 18 insertions(+), 14 deletions(-) diff --git a/src/utils/keyboard-navigation/kb-navigation.ts b/src/utils/keyboard-navigation/kb-navigation.ts index 826ea7434..07df1b174 100644 --- a/src/utils/keyboard-navigation/kb-navigation.ts +++ b/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, From ec5fefd3453bfc34f74f7cb8fea5aeb5ed75ab8a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Anders=20Br=C3=A5then=20Nomerstad?= Date: Tue, 20 Feb 2024 12:49:06 +0100 Subject: [PATCH 2/2] =?UTF-8?q?Fikser=20piltastnavigering=20i=20s=C3=B8ket?= =?UTF-8?q?=20ved=20gjentatte=20s=C3=B8k=20med=20likt=20antall=20treff?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../header/header-regular/common/sok/Sok.tsx | 21 ++++++++++++------- .../desktop/sok-dropdown/SokDropdown.tsx | 9 +++++--- 2 files changed, 20 insertions(+), 10 deletions(-) diff --git a/src/komponenter/header/header-regular/common/sok/Sok.tsx b/src/komponenter/header/header-regular/common/sok/Sok.tsx index 96a509fa9..8086657ce 100644 --- a/src/komponenter/header/header-regular/common/sok/Sok.tsx +++ b/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(false); const [result, setResult] = useState(); const [error, setError] = useState(); - 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) => { diff --git a/src/komponenter/header/header-regular/desktop/sok-dropdown/SokDropdown.tsx b/src/komponenter/header/header-regular/desktop/sok-dropdown/SokDropdown.tsx index 31d0c0934..1d615aa33 100644 --- a/src/komponenter/header/header-regular/desktop/sok-dropdown/SokDropdown.tsx +++ b/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(''); - const [numResults, setNumResults] = useState(0); - useKbNavSub(configForNodeGroup[KbNavGroup.Sok], kbNavMainState, isOpen, numResults); + const [searchHits, setSearchHits] = useState([]); + + 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} />