chore: use new searchbox (#761)

Co-authored-by: Michele Riva <michele.riva@oramasearch.com>
oramasearch · Aug 17, 2024 · 86fd704 · 86fd704
1 parent 32ec101
commit 86fd704
Show file tree

Hide file tree

Showing 3 changed files with 301 additions and 52 deletions.
diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -30,6 +30,7 @@
     "@jop-software/astro-cookieconsent": "^3.0.0",
     "@orama/crawly": "^0.0.6",
     "@orama/orama": "^2.0.21",
+    "@orama/react-components": "^0.0.14",
     "@orama/searchbox": "1.0.0-rc48",
     "@oramacloud/client": "^1.3.11",
     "astro": "^4.11.3",

diff --git a/packages/docs/src/components/Search.jsx b/packages/docs/src/components/Search.jsx
@@ -1,24 +1,43 @@
 import { useEffect, useState } from 'react'
-import { OramaClient } from '@oramacloud/client'
-import { SearchBox, SearchButton } from '@orama/searchbox'
-import '@orama/searchbox/dist/index.css'
-
-export const client = new OramaClient({
-  api_key: 'NKiqTJnwnKsQCdxN7RyOBJgeoW5hJ594',
-  endpoint: 'https://cloud.orama.run/v1/indexes/orama-docs-bzo330'
-})
-
-setTimeout(() => {
-  try {
-    client.alias(posthog.get_distinct_id());
-  } catch (error) {
-    console.log(`Error setting alias: ${error}`);
-  }
-}, 500);
+import { OramaSearchBox, OramaSearchButton } from '@orama/react-components'
+
+function useCmdK(callback) {
+  const [isCmdKPressed, setIsCmdKPressed] = useState(false)
+
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
+        event.preventDefault()
+        setIsCmdKPressed(true)
+        if (callback && typeof callback === 'function') {
+          callback()
+        }
+      }
+    };
+
+    const handleKeyUp = (event) => {
+      if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
+        setIsCmdKPressed(false);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown)
+    window.addEventListener('keyup', handleKeyUp)
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown)
+      window.removeEventListener('keyup', handleKeyUp)
+    }
+  }, [callback])
 
-export function Search(props) {
+  return isCmdKPressed
+}
+
+export function Search() {
   const [theme, setTheme] = useState()
   const [currentCategory, setCurrentCategory] = useState(null)
+  // TODO: Remove when fully integrated
+  const [isOpen, setIsOpen] = useState(false)
 
   function getCurrentCategory() {
     const url = new URL(window.location.href).pathname
@@ -61,42 +80,55 @@ export function Search(props) {
     }
   }, [])
 
-  const oramaWhere = currentCategory ? {
-    category: {
-      eq: currentCategory
+  useCmdK(() => {
+    if (!isOpen) {
+      setIsOpen(true)
     }
-  } : {}
+  })
+
+  const oramaWhere = currentCategory
+    ? {
+        category: {
+          eq: currentCategory
+        }
+      }
+    : {}
 
   const facetProperty = ['Cloud', 'Open Source'].includes(currentCategory) ? 'section' : 'category'
 
   if (!theme) return null
 
   return (
     <>
-      <SearchBox
-        {...{
-          oramaInstance: client,
-          backdrop: true,
-          colorScheme: theme,
-          facetProperty,
-          resultsMap: {
-            description: 'content'
-          },
-          searchParams: {
-            where: oramaWhere
-          },
-          setResultTitle: (doc) => doc.title.split('| Orama Docs')[0]
+      <OramaSearchBox
+        id="orama-ui-searchbox"
+        onSearchboxClosed={() => {
+          setIsOpen(false)
+        }}
+        index={{
+          api_key: 'NKiqTJnwnKsQCdxN7RyOBJgeoW5hJ594',
+          endpoint: 'https://cloud.orama.run/v1/indexes/orama-docs-bzo330'
         }}
+        resultsMap={{
+          description: 'content'
+        }}
+        searchParams={{
+          where: oramaWhere
+        }}
+        facetProperty={facetProperty}
+        colorScheme={theme}
+        open={isOpen}
       />
-      <SearchButton
+
+      <OramaSearchButton
+        id="orama-ui-searchbox-button"
         colorScheme={theme}
-        themeConfig={{
-          dark: {
-            '--search-btn-background-color': '#201c27',
-            '--search-btn-background-color-hover': '#201c27'
-          }
+        onClick={() => {
+          setIsOpen(true)
         }}
-      />
+      >
+        Search
+      </OramaSearchButton>
     </>
   )
 }