From 9f534cc58b1e7405791a05c6e395e22e69eeaaae Mon Sep 17 00:00:00 2001
From: David Featherston <david.featherstone@dpc.vic.gov.au>
Date: Mon, 7 Aug 2023 15:23:45 +1000
Subject: [PATCH] feat(@dpc-sdp/ripple-tide-search): get URL from urlManager

---
 .../components/TideSearchPage.vue             | 19 +++++++++++----
 .../composables/useSearchUI.ts                |  2 ++
 packages/ripple-tide-search/utils/search.ts   | 23 -------------------
 3 files changed, 16 insertions(+), 28 deletions(-)

diff --git a/packages/ripple-tide-search/components/TideSearchPage.vue b/packages/ripple-tide-search/components/TideSearchPage.vue
index a6ecfd1c03..ace4f9ddca 100644
--- 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
index e55a8583c3..ec6de930bd 100644
--- 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
index dbe098200d..8880f24291 100644
--- 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()
-  }
-}