Extract analytics effects into hook

Define a hook to extract the search analytics code, and remove the
Analytics stuff from the SearchManager to keep it cleaner

app/src/components/pages/collectionPage/collectionPage.tsx

@@ -40,6 +40,7 @@ import { useSubcollectionRedirect } from "@/src/hooks/useSubcollectionRedirect";
 import { CollectionSearchParamsType } from "@/collections/[uuid]/page";
 import useBreakpoints from "@/src/hooks/useBreakpoints";
 import { trackSearchResults } from "@/src/utils/ga4Utils";
+import useSearchAnalytics from "@/src/hooks/useSearchAnalytics";
 
 type CollectionPageProps = {
   searchResults: SearchResultsType;
@@ -117,15 +118,8 @@ const CollectionPage = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchResults]);
 
-  const analyticsData = collectionSearchManager.analyticsData;
-  useEffect(() => {
-    trackSearchResults(
-      analyticsData.searchResultsLayout,
-      analyticsData.filterNames,
-      analyticsData.searchType,
-      analyticsData.searchTerm
-    );
-  }, [JSON.stringify(analyticsData)]);
+  useSearchAnalytics(collectionSearchManager);
+
   return (
     <Box id="collectionsPageContent">
       <MobileSearchBanner />

app/src/components/pages/collectionsPage/collectionsPage.tsx

@@ -25,6 +25,7 @@ import { headerBreakpoints } from "@/src/utils/breakpoints";
 import DCSearchBar from "../../search/dcSearchBar";
 import ViewingOptionsMenu from "../../viewingOptionsMenu/viewingOptionsMenu";
 import { trackSearchResults } from "@/src/utils/ga4Utils";
+import useSearchAnalytics from "@/src/hooks/useSearchAnalytics";
 
 export function CollectionsPage({ data, collectionsSearchParams }) {
   const { push } = useRouter();
@@ -92,15 +93,8 @@ export function CollectionsPage({ data, collectionsSearchParams }) {
     isFirstLoad.current = true;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [collections]);
-  const analyticsData = collectionsSearchManager.analyticsData;
-  useEffect(() => {
-    trackSearchResults(
-      analyticsData.searchResultsLayout,
-      analyticsData.filterNames,
-      analyticsData.searchType,
-      analyticsData.searchTerm
-    );
-  }, [JSON.stringify(analyticsData)]);
+
+  useSearchAnalytics(collectionsSearchManager);
 
   return (
     <>

app/src/components/pages/searchPage/searchPage.tsx

@@ -25,6 +25,7 @@ import { SearchResultsType } from "@/src/types/SearchResultsType";
 import { useSubcollectionRedirect } from "@/src/hooks/useSubcollectionRedirect";
 import useBreakpoints from "@/src/hooks/useBreakpoints";
 import { trackSearchResults } from "@/src/utils/ga4Utils";
+import useSearchAnalytics from "@/src/hooks/useSearchAnalytics";
 
 const SearchPage = ({
   searchResults,
@@ -92,16 +93,7 @@ const SearchPage = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchResults, searchManager.viewMode]);
 
-  const analyticsData = searchManager.analyticsData;
-  useEffect(() => {
-    trackSearchResults(
-      analyticsData.searchResultsLayout,
-      analyticsData.filterNames,
-      analyticsData.searchType,
-      analyticsData.searchTerm
-    );
-  }, [JSON.stringify(analyticsData)]);
-
+  useSearchAnalytics(searchManager);
   useSubcollectionRedirect();
 
   return (

app/src/hooks/useSearchAnalytics.ts

@@ -0,0 +1,29 @@
+import { useEffect } from "react";
+import {
+  GeneralSearchManager,
+  SearchManager,
+} from "../utils/searchManager/searchManager";
+import { trackSearchResults } from "../utils/ga4Utils";
+
+const useSearchAnalytics = (searchManager: SearchManager) => {
+  const filters = searchManager.filters;
+  const filterNames = filters.map((f) => f.filter);
+  const data = {
+    searchTerm: searchManager.keywords ?? undefined,
+    filterNames: searchManager.filters.map((f) => f.filter),
+    searchResultsLayout: searchManager.viewMode,
+    searchType:
+      searchManager.filters.find((f) => f.filter === "rights")?.value ??
+      undefined,
+  };
+  useEffect(() => {
+    trackSearchResults(
+      data.searchResultsLayout,
+      data.filterNames,
+      data.searchType,
+      data.searchTerm
+    );
+  }, [JSON.stringify(data)]);
+};
+
+export default useSearchAnalytics;

app/src/utils/searchManager/searchManager.tsx

@@ -14,13 +14,6 @@ import {
 import { capitalize } from "../utils";
 import { MutableRefObject } from "react";
 
-type AnalyticsData = {
-  searchTerm?: string;
-  searchType?: string;
-  filterNames: string[];
-  searchResultsLayout: "grid" | "list";
-};
-
 export interface SearchManager {
   handleSearchSubmit(enforceSort?: string): string;
   handleKeywordChange(value: string): void;
@@ -37,7 +30,6 @@ export interface SearchManager {
   get filters(): Filter[];
   get availableFilters(): AvailableFilter[];
   get lastFilterRef(): MutableRefObject<string | null>;
-  get analyticsData(): AnalyticsData;
   setLastFilter(value: string | null): void;
 }
 
@@ -110,21 +102,6 @@ abstract class BaseSearchManager implements SearchManager {
     return this.currentAvailableFilters;
   }
 
-  get analyticsData(): AnalyticsData {
-    const filters = this.filters;
-    const filterNames = filters.map((f) => f.filter);
-    let data: AnalyticsData = {
-      searchTerm: this.keywords ?? undefined,
-      filterNames: filterNames,
-      searchResultsLayout: this.viewMode,
-    };
-    const searchType = filters.find((f) => f.filter === "rights")?.value;
-    if (searchType) {
-      data.searchType = searchType;
-    }
-    return data;
-  }
-
   handleKeywordChange(value: string) {
     this.currentKeywords = value;
   }