feat(@dpc-sdp/ripple-tide-search): get URL from urlManager

dpc-sdp · Aug 7, 2023 · 9f534cc · 9f534cc
1 parent 4a58eb4
commit 9f534cc
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 28 deletions.
diff --git a/packages/ripple-tide-search/components/TideSearchPage.vue b/packages/ripple-tide-search/components/TideSearchPage.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
-import { getEventDataFromState, useRuntimeConfig, useTideSite } from '#imports'
+import { useRuntimeConfig, useTideSite } from '#imports'
 import useSearchUI from './../composables/useSearchUI'
 import {
   AppSearchFilterConfigItem,
@@ -80,6 +80,7 @@ const apiConnectorOptions = {
 }
 
 const {
+  urlManager,
   updateSearchTerm,
   doSearch,
   goToPage,
@@ -99,12 +100,20 @@ const filtersExpanded = ref(false)
 const toggleFiltersLabel = 'Refine search'
 const submitFiltersLabel = 'Apply search filters'
 
+const baseEvent = () => ({
+  name: props.pageTitle,
+  index: searchState.value.current,
+  label: searchState.value.searchTerm,
+  value: searchState.value.totalResults,
+  options: urlManager.value?.stateToUrl(searchState.value)
+})
+
 const emitSearchEvent = (event) => {
   emitRplEvent(
     'submit',
     {
       ...event,
-      ...getEventDataFromState({ props, searchState, filterFormValues }),
+      ...baseEvent(),
       action: 'search'
     },
     { global: true }
@@ -134,7 +143,7 @@ const toggleFilters = () => {
   emitRplEvent(
     'toggleFilters',
     {
-      ...getEventDataFromState({ props, searchState, filterFormValues }),
+      ...baseEvent(),
       action: filtersExpanded.value ? 'open' : 'close',
       text: toggleFiltersLabel
     },
@@ -161,7 +170,7 @@ const handlePagination = (event) => {
     'paginate',
     {
       ...event,
-      ...getEventDataFromState({ props, searchState, filterFormValues })
+      ...baseEvent()
     },
     { global: true }
   )
@@ -174,7 +183,7 @@ watch(
       emitRplEvent(
         'results',
         {
-          ...getEventDataFromState({ props, searchState, filterFormValues }),
+          ...baseEvent(),
           action: 'view'
         },
         { global: true }

diff --git a/packages/ripple-tide-search/composables/useSearchUI.ts b/packages/ripple-tide-search/composables/useSearchUI.ts
@@ -45,6 +45,7 @@ export default async (
   })
   const searchDriver = getSearchDriver(apiConnectorOptions, config)
   const searchState = ref(searchDriver.getState())
+  const urlManager = ref(searchDriver.URLManager)
 
   const staticFacetOptions = ref(null)
   staticSearchDriver.setSearchTerm('')
@@ -125,6 +126,7 @@ export default async (
   }
 
   return {
+    urlManager,
     updateSearchTerm,
     doSearch,
     goToPage,

diff --git a/packages/ripple-tide-search/utils/search.ts b/packages/ripple-tide-search/utils/search.ts
@@ -41,26 +41,3 @@ export const truncateText = (text, stop = 150, clamp) => {
   }
   return ''
 }
-
-/**
- * @description Helper to get relevant event data from state, specifically to send off to the analytics package
- */
-export const getEventDataFromState = ({
-  props,
-  searchState,
-  filterFormValues
-}): rplEventPayload => {
-  const filters = filterFormValues.value
-    ? Object.entries(filterFormValues.value).filter((o) =>
-        Array.isArray(o[1]) ? o[1].length : o[1]
-      )
-    : {}
-
-  return {
-    name: props.pageTitle,
-    index: searchState.value.current,
-    label: searchState.value.searchTerm,
-    value: searchState.value.totalResults,
-    options: new URLSearchParams(filters).toString()
-  }
-}