Sync URL search params with search term

Author: reakaleek

src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiButton.tsx

@@ -14,7 +14,8 @@ import {
 } from '@elastic/eui'
 import { css } from '@emotion/react'
 import * as React from 'react'
-import { useEffect, Suspense, lazy } from 'react'
+import { useEffect, Suspense, lazy, useState } from 'react'
+import { useSyncSearchParams } from "./useSyncURLSearchParams";
 
 // Lazy load the modal component
 const SearchOrAskAiModal = lazy(() =>
@@ -25,9 +26,12 @@ const SearchOrAskAiModal = lazy(() =>
 
 export const SearchOrAskAiButton = () => {
     const searchTerm = useSearchTerm()
-    const { clearSearchTerm } = useSearchActions()
+    const { clearSearchTerm } =
+        useSearchActions()
     const isModalOpen = useModalIsOpen()
     const { openModal, closeModal, toggleModal } = useModalActions()
+    
+    useSyncSearchParams();
 
     const positionCss = css`
         position: absolute;
@@ -61,7 +65,6 @@ export const SearchOrAskAiButton = () => {
             window.removeEventListener('keydown', handleKeydown)
         }
     }, [])
-
     return (
         <>
             <EuiButton

src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/SearchOrAskAiModal.tsx

@@ -17,7 +17,6 @@ export const SearchOrAskAiModal = () => {
     const searchTerm = useSearchTerm()
     const askAiTerm = useAskAiTerm()
     const { setSearchTerm, submitAskAiTerm } = useSearchActions()
-
     return (
         <div
             css={css`

src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/useSyncURLSearchParams.ts

@@ -0,0 +1,41 @@
+import { useEffect, useState } from "react";
+import { useSearchActions, useSearchTerm } from "./search.store";
+import { useModalActions } from "./modal.store";
+
+export const useSyncSearchParams = () => {
+    const searchTerm = useSearchTerm()
+    const { setSearchTerm, submitAskAiTerm } = useSearchActions()
+    const { openModal } = useModalActions()
+
+    const searchQueryParamKey = 'q'
+    const [isInitialized, setIsInitialized] = useState(false)
+    useEffect(() => {
+        const params = new URLSearchParams(window.location.search)
+        const urlQuery = params.get(searchQueryParamKey)
+        if (urlQuery) {
+            setSearchTerm(urlQuery)
+            submitAskAiTerm(urlQuery)
+        }
+        setIsInitialized(true)
+    }, [])
+
+    useEffect(() => {
+        if (!isInitialized) {
+            return
+        }
+        const url = new URL(window.location)
+        if (searchTerm) {
+            url.searchParams.set(searchQueryParamKey, searchTerm)
+        } else {
+            url.searchParams.delete(searchQueryParamKey)
+        }
+        window.history.replaceState({}, '', url)
+    }, [searchTerm, isInitialized])
+
+    useEffect(() => {
+        const url = new URL(window.location)
+        if (url.searchParams.has(searchQueryParamKey)) {
+            openModal()
+        }
+    }, [])
+};