From 1c4ded7476f507c4a0821b009bff6fd4fde8b28e Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Mon, 27 Nov 2023 15:30:31 -0500
Subject: [PATCH 1/2] fix: catch error and display message for parsing errors

---
 .../src/components/SiteSearch.stories.tsx     |  2 +-
 .../src/components/SiteSearch.tsx             | 24 +++++++++++++------
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/packages/gatsby-theme-project-portal/src/components/SiteSearch.stories.tsx b/packages/gatsby-theme-project-portal/src/components/SiteSearch.stories.tsx
index d47e3c317..531044e2a 100644
--- a/packages/gatsby-theme-project-portal/src/components/SiteSearch.stories.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/SiteSearch.stories.tsx
@@ -104,7 +104,7 @@ const invalidSearches = async ({ canvasElement }) => {
 
   await userEvent.clear(searchInput)
 
-  await userEvent.type(searchInput, "____", {
+  await userEvent.type(searchInput, "--", {
     delay: 100,
   })
 }
diff --git a/packages/gatsby-theme-project-portal/src/components/SiteSearch.tsx b/packages/gatsby-theme-project-portal/src/components/SiteSearch.tsx
index 902b5b48a..c63cfcc23 100644
--- a/packages/gatsby-theme-project-portal/src/components/SiteSearch.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/SiteSearch.tsx
@@ -15,17 +15,26 @@ export const SiteSearch: FunctionComponent<SearchProps> = ({
 }: SearchProps) => {
   const [searchQuery, setSearchQuery] = useState([])
   const [queryResults, setQueryResults] = useState([])
+  const [errorMessage, setErrorMessage] = useState("")
 
   useEffect(() => {
     if (searchQuery.length > 0) {
-      let searchResults = index.search(searchQuery)
-      let results = []
-      searchResults.forEach(function (result) {
-        results.push(db[result.ref])
-      })
-      setQueryResults(searchResults)
+      // catch the error, and display an error message to help user
+      try {
+        let searchResults = index.search(searchQuery)
+        setQueryResults(searchResults)
+        setErrorMessage("")
+      } catch (error) {
+        if (error instanceof lunr.QueryParseError) {
+          setErrorMessage(error.message)
+          return
+        } else {
+          throw error
+        }
+      }
     } else {
       setQueryResults([])
+      setErrorMessage("")
     }
   }, [searchQuery])
 
@@ -39,7 +48,8 @@ export const SiteSearch: FunctionComponent<SearchProps> = ({
           placeholder={"Type to search pages..."}
           onChange={(e) => setSearchQuery(e.target.value)}
         />
-        <div className=" pt-2">
+        <p className="px-4 text-red text-tag font-bold">{errorMessage}</p>
+        <div className="pt-2">
           Number of found pages:
           {queryResults.length}
         </div>

From afacd93648b434a481eecc846f5dd905e333fa5f Mon Sep 17 00:00:00 2001
From: Heather Yu <35639529+hetd54@users.noreply.github.com>
Date: Mon, 4 Dec 2023 09:29:45 -0500
Subject: [PATCH 2/2] refactor: conditionally render error p tag

---
 .../gatsby-theme-project-portal/src/components/SiteSearch.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/gatsby-theme-project-portal/src/components/SiteSearch.tsx b/packages/gatsby-theme-project-portal/src/components/SiteSearch.tsx
index c63cfcc23..a596babb3 100644
--- a/packages/gatsby-theme-project-portal/src/components/SiteSearch.tsx
+++ b/packages/gatsby-theme-project-portal/src/components/SiteSearch.tsx
@@ -48,7 +48,9 @@ export const SiteSearch: FunctionComponent<SearchProps> = ({
           placeholder={"Type to search pages..."}
           onChange={(e) => setSearchQuery(e.target.value)}
         />
-        <p className="px-4 text-red text-tag font-bold">{errorMessage}</p>
+        {errorMessage && (
+          <p className="px-4 text-red text-tag font-bold">{errorMessage}</p>
+        )}
         <div className="pt-2">
           Number of found pages:
           {queryResults.length}