diff --git a/.changeset/weak-zebras-cover.md b/.changeset/weak-zebras-cover.md new file mode 100644 index 0000000000..f3290683e2 --- /dev/null +++ b/.changeset/weak-zebras-cover.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-search-react': patch +--- + +Minor refactor of search bar analytics capture diff --git a/plugins/search-react/src/components/SearchTracker/SearchTracker.tsx b/plugins/search-react/src/components/SearchTracker/SearchTracker.tsx index b19af6eef8..6cdfd205fc 100644 --- a/plugins/search-react/src/components/SearchTracker/SearchTracker.tsx +++ b/plugins/search-react/src/components/SearchTracker/SearchTracker.tsx @@ -19,23 +19,22 @@ import { useAnalytics } from '@backstage/core-plugin-api'; import { useSearch } from '../../context'; import usePrevious from 'react-use/lib/usePrevious'; +function useFallingEdge(next: boolean) { + const prev = usePrevious(next); + return prev && !next; +} + /** * Capture search event on term change. */ export const TrackSearch = ({ children }: { children: React.ReactChild }) => { - const useHasChanged = (value: any) => { - const previousVal = usePrevious(value); - return previousVal !== value; - }; - const analytics = useAnalytics(); const { term, result } = useSearch(); const numberOfResults = result.value?.numberOfResults ?? undefined; // Stops the analtyics event from firing before the new search engine response is returned - const hasStartedLoading = useHasChanged(result.loading); - const hasFinishedLoading = hasStartedLoading && !result.loading; + const hasFinishedLoading = useFallingEdge(result.loading); useEffect(() => { if (term && hasFinishedLoading) {