diff --git a/frontend/src/pages/learningCenter/LearningCenterToolbar.tsx b/frontend/src/pages/learningCenter/LearningCenterToolbar.tsx index e02028eae7..97a5707432 100644 --- a/frontend/src/pages/learningCenter/LearningCenterToolbar.tsx +++ b/frontend/src/pages/learningCenter/LearningCenterToolbar.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import * as _ from 'lodash'; import { useHistory } from 'react-router'; import { Button, @@ -24,6 +25,7 @@ import { } from '@patternfly/react-icons'; import { removeQueryArgument, setQueryArgument } from '../../utilities/router'; import { useQueryParams } from '../../utilities/useQueryParams'; +import { fireTrackingEvent } from '../../utilities/segmentIOUtils'; import { SEARCH_FILTER_KEY, DOC_SORT_KEY, @@ -53,6 +55,16 @@ type LearningCenterToolbarProps = { onToggleFiltersCollapsed: () => void; }; +// add 1 second debounce to fire the search event +// to avoid firing event with every single character input +const fireSearchedEvent = _.debounce((val: string) => { + if (val) { + fireTrackingEvent('Resource Searched', { + term: val, + }); + } +}, 1000); + const LearningCenterToolbar: React.FC = ({ count, totalCount, @@ -89,6 +101,10 @@ const LearningCenterToolbar: React.FC = ({ setSearchInputText(searchQuery); }, [searchQuery]); + React.useEffect(() => { + fireSearchedEvent(searchInputText); + }, [searchInputText]); + const onSortTypeSelect = React.useCallback( (e) => { setIsSortTypeDropdownOpen(false);