Shuffling around where the search_update event is fired so it happens in more places (#1679)

- Changed HeroSearch to use the SearchField component instead of SearchInput, so we get the event capture stuff
- Updated SearchInput to not require setPage (for use on the homepage)
- Moved facet events out of the SearchPage and into SearchDisplay so they get called on other pages that use it
- Also trigger the facet events on more things - should also now get sorting changes, choosing between categories, and clearing facets

Author: jkachel

frontends/mit-learn/src/page-components/SearchDisplay/SearchDisplay.tsx

@@ -51,6 +51,7 @@ import type { TabConfig } from "./ResourceCategoryTabs"
 import { ResourceCard } from "../ResourceCard/ResourceCard"
 import { useSearchParams } from "@mitodl/course-search-utils/react-router"
 import { useUserMe } from "api/hooks/user"
+import { usePostHog } from "posthog-js/react"
 
 const StyledResourceTabs = styled(ResourceCategoryTabs.TabList)`
   margin-top: 0 px;
@@ -532,11 +533,11 @@ const SearchDisplay: React.FC<SearchDisplayProps> = ({
   constantSearchParams,
   hasFacets,
   requestParams,
-  setParamValue,
-  clearAllFacets,
-  toggleParamValue,
+  setParamValue: actuallySetParamValue,
+  clearAllFacets: actuallyClearAllFacets,
+  toggleParamValue: actuallyToggleParamValue,
   showProfessionalToggle,
-  setSearchParams,
+  setSearchParams: actuallySetSearchParams,
   resultsHeadingEl,
   filterHeadingEl,
 }) => {
@@ -588,10 +589,45 @@ const SearchDisplay: React.FC<SearchDisplayProps> = ({
 
   const [mobileDrawerOpen, setMobileDrawerOpen] = React.useState(false)
 
+  const posthog = usePostHog()
+  const { POSTHOG } = APP_SETTINGS
+
   const toggleMobileDrawer = (newOpen: boolean) => () => {
     setMobileDrawerOpen(newOpen)
   }
 
+  const captureSearchEvent = () => {
+    if (!(!POSTHOG?.api_key || POSTHOG.api_key.length < 1)) {
+      posthog.capture("search_update")
+    }
+  }
+
+  const setParamValue = (value: string, prev: string | string[]) => {
+    captureSearchEvent()
+    actuallySetParamValue(value, prev)
+  }
+
+  const clearAllFacets = () => {
+    captureSearchEvent()
+    actuallyClearAllFacets()
+  }
+
+  const setSearchParams = (
+    value: URLSearchParams | ((prev: URLSearchParams) => URLSearchParams),
+  ) => {
+    captureSearchEvent()
+    actuallySetSearchParams(value)
+  }
+
+  const toggleParamValue = (
+    name: string,
+    rawValue: string,
+    checked: boolean,
+  ) => {
+    captureSearchEvent()
+    actuallyToggleParamValue(name, rawValue, checked)
+  }
+
   const searchModeDropdown = (
     <SimpleSelect
       size="small"

frontends/mit-learn/src/page-components/SearchField/SearchField.tsx

@@ -5,7 +5,7 @@ import { usePostHog } from "posthog-js/react"
 
 type SearchFieldProps = SearchInputProps & {
   onSubmit: (event: SearchSubmissionEvent) => void
-  setPage: (page: number) => void
+  setPage?: (page: number) => void
 }
 
 const { POSTHOG } = APP_SETTINGS
@@ -26,7 +26,7 @@ const SearchField: React.FC<SearchFieldProps> = ({
     { isEnter } = {},
   ) => {
     onSubmit(event)
-    setPage(1)
+    setPage && setPage(1)
     if (POSTHOG?.api_key) {
       posthog.capture("search_update", { isEnter: isEnter })
     }

frontends/mit-learn/src/pages/HomePage/HeroSearch.tsx

@@ -5,7 +5,6 @@ import {
   styled,
   ChipLink,
   Link,
-  SearchInput,
   SearchInputProps,
 } from "ol-components"
 import type { ChipLinkProps } from "ol-components"
@@ -27,6 +26,7 @@ import {
   RiVerifiedBadgeLine,
 } from "@remixicon/react"
 import _ from "lodash"
+import { SearchField } from "@/page-components/SearchField/SearchField"
 
 type SearchChip = {
   label: string
@@ -236,7 +236,7 @@ const HeroSearch: React.FC = () => {
           </BoldLink>
         </Typography>
         <ControlsContainer>
-          <SearchInput
+          <SearchField
             size="hero"
             fullWidth
             value={searchText}

frontends/mit-learn/src/pages/SearchPage/SearchPage.tsx

@@ -15,7 +15,6 @@ import type { LearningResourceOfferor } from "api"
 import { useOfferorsList } from "api/hooks/learningResources"
 import { capitalize } from "ol-utilities"
 import MetaTags from "@/page-components/MetaTags/MetaTags"
-import { usePostHog } from "posthog-js/react"
 
 const cssGradient = `
   linear-gradient(
@@ -171,8 +170,6 @@ const useFacetManifest = (resourceCategory: string | null) => {
 const SearchPage: React.FC = () => {
   const [searchParams, setSearchParams] = useSearchParams()
   const facetManifest = useFacetManifest(searchParams.get("resource_category"))
-  const posthog = usePostHog()
-  const { POSTHOG } = APP_SETTINGS
 
   const setPage = useCallback(
     (newPage: number) => {
@@ -189,11 +186,8 @@ const SearchPage: React.FC = () => {
     [setSearchParams],
   )
   const onFacetsChange = useCallback(() => {
-    if (!(!POSTHOG?.api_key || POSTHOG.api_key.length < 1)) {
-      posthog.capture("search_update")
-    }
     setPage(1)
-  }, [setPage, posthog, POSTHOG])
+  }, [setPage])
 
   const {
     params,