fix: catch error and display message for parsing errors

thepolicylab-projectportals · Nov 27, 2023 · 1c4ded7 · 1c4ded7
1 parent 37e171f
commit 1c4ded7
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 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
@@ -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
@@ -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>