docs: update algolia (#8625)

Update algolia to fix issues with highlighting and snippets
medusajs · Aug 19, 2024 · 800d034 · 800d034
1 parent c479fe8
commit 800d034
Show file tree

Hide file tree

Showing 5 changed files with 273 additions and 168 deletions.
diff --git a/www/apps/api-reference/package.json b/www/apps/api-reference/package.json
@@ -25,6 +25,7 @@
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "@types/react-transition-group": "^4.4.6",
+    "algoliasearch": "4",
     "autoprefixer": "10.4.14",
     "clsx": "^2.0.0",
     "docs-ui": "*",
@@ -41,7 +42,7 @@
     "prism-react-renderer": "2.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-instantsearch": "^7.0.1",
+    "react-instantsearch": "^7.12.4",
     "react-intersection-observer": "^9.5.3",
     "react-tooltip": "^5.19.0",
     "react-transition-group": "^4.4.5",

diff --git a/www/packages/docs-ui/package.json b/www/packages/docs-ui/package.json
@@ -66,13 +66,13 @@
     "@react-hook/resize-observer": "^1.2.6",
     "@segment/analytics-next": "^1.55.0",
     "@uidotdev/usehooks": "^2.4.1",
-    "algoliasearch": "^4.20.0",
+    "algoliasearch": "^5.0.0",
     "framer-motion": "^11.3.21",
     "mermaid": "^10.9.0",
     "npm-to-yarn": "^2.1.0",
     "prism-react-renderer": "2.3.1",
     "react-google-recaptcha": "^3.1.0",
-    "react-instantsearch": "^7.0.3",
+    "react-instantsearch": "^7.12.4",
     "react-markdown": "^8.0.7",
     "react-medium-image-zoom": "^5.1.10",
     "react-tooltip": "^5.21.3",

diff --git a/www/packages/docs-ui/src/components/Search/index.tsx b/www/packages/docs-ui/src/components/Search/index.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import React, { useEffect, useMemo, useRef, useState } from "react"
+import React, { useEffect, useRef, useState } from "react"
 import { InstantSearch, SearchBox } from "react-instantsearch"
 import clsx from "clsx"
 import { SearchEmptyQueryBoundary } from "./EmptyQueryBoundary"
@@ -30,19 +30,6 @@ export const Search = ({
   const { isOpen, setIsOpen, defaultFilters, searchClient, modalRef } =
     useSearch()
   const [filters, setFilters] = useState<string[]>(defaultFilters)
-  const formattedFilters: string = useMemo(() => {
-    let formatted = ""
-    filters.forEach((filter) => {
-      const split = filter.split("_")
-      split.forEach((f) => {
-        if (formatted.length) {
-          formatted += " OR "
-        }
-        formatted += `_tags:${f}`
-      })
-    })
-    return formatted
-  }, [filters])
   const searchBoxRef = useRef<HTMLFormElement>(null)
 
   const focusSearchInput = () =>
@@ -140,19 +127,7 @@ export const Search = ({
           >
             <SearchHitsWrapper
               configureProps={{
-                filters: formattedFilters,
-                attributesToSnippet: [
-                  "content",
-                  "hierarchy.lvl1",
-                  "hierarchy.lvl2",
-                  "hierarchy.lvl3",
-                ],
-                attributesToHighlight: [
-                  "content",
-                  "hierarchy.lvl1",
-                  "hierarchy.lvl2",
-                  "hierarchy.lvl3",
-                ],
+                tagRefinements: filters,
               }}
               indices={algolia.indices}
               checkInternalPattern={checkInternalPattern}

diff --git a/www/packages/docs-ui/src/providers/Search/index.tsx b/www/packages/docs-ui/src/providers/Search/index.tsx
@@ -10,7 +10,10 @@ import React, {
 } from "react"
 import { BadgeProps, Modal, Search, SearchProps } from "@/components"
 import { checkArraySameElms } from "../../utils"
-import algoliasearch, { SearchClient } from "algoliasearch/lite"
+import {
+  liteClient as algoliasearch,
+  LiteClient as SearchClient,
+} from "algoliasearch/lite"
 import clsx from "clsx"
 import { CSSTransition, SwitchTransition } from "react-transition-group"
 
@@ -72,8 +75,15 @@ export const SearchProvider = ({
     const algoliaClient = algoliasearch(algolia.appId, algolia.apiKey)
     return {
       ...algoliaClient,
-      async search(requests) {
-        if (requests.every(({ params }) => !params?.query)) {
+      async search(searchParams) {
+        const requests =
+          "requests" in searchParams ? searchParams.requests : searchParams
+        const noQueries = requests.every(
+          (item) =>
+            ("facetQuery" in item && !item.facetQuery) ||
+            ("query" in item && !item.query)
+        )
+        if (noQueries) {
           return Promise.resolve({
             results: requests.map(() => ({
               hits: [],
@@ -89,7 +99,7 @@ export const SearchProvider = ({
           })
         }
 
-        return algoliaClient.search(requests)
+        return algoliaClient.search(searchParams)
       },
     }
   }, [algolia.appId, algolia.apiKey])