[pkg/core,#419][s]: refactor search components

datopian · Feb 28, 2023 · fff0b89 · fff0b89
1 parent d61d8e7
commit fff0b89
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 29 deletions.
diff --git a/packages/core/src/ui/Nav/Nav.tsx b/packages/core/src/ui/Nav/Nav.tsx
@@ -24,11 +24,9 @@ export const Nav: React.FC<Props> = ({
   const [modifierKey, setModifierKey] = useState<string>();
   const [Search, setSearch] = useState<any>(); // TODO types
 
-  // TODO refactor this, navigator.platform is deprecated
   useEffect(() => {
-    setModifierKey(
-      /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? "⌘" : "Ctrl "
-    );
+    const isMac = /(Mac|iPhone|iPod|iPad)/i.test(navigator.userAgent);
+    setModifierKey(isMac ? "⌘" : "Ctrl ");
   }, []);
 
   useEffect(() => {

diff --git a/packages/core/src/ui/Search/Algolia.tsx b/packages/core/src/ui/Search/Algolia.tsx
@@ -10,11 +10,7 @@ const { useDocSearchKeyboardEvents } = docsearch;
 let DocSearchModal: any = null;
 
 function Hit({ hit, children }) {
-  return (
-    <Link href={hit.url} legacyBehavior>
-      {children}
-    </Link>
-  );
+  return <Link href={hit.url}>{children}</Link>;
 }
 
 export const AlgoliaSearchContext = createContext({});
@@ -24,18 +20,15 @@ export function AlgoliaSearchProvider({ children, config }) {
   const [isOpen, setIsOpen] = useState(false);
   const [initialQuery, setInitialQuery] = useState(undefined);
 
-  const importDocSearchModalIfNeeded = useCallback(() => {
+  const importDocSearchModalIfNeeded = useCallback(async () => {
     if (DocSearchModal) {
       return Promise.resolve();
     }
 
-    return Promise.all([import("./AlgoliaModal")]).then(
-      ([{ DocSearchModal: Modal }]) => {
-        // eslint-disable-next-line
-        DocSearchModal = Modal;
-      }
-    );
-  }, []);
+    const [{ DocSearchModal: Modal }] = await Promise.all([docsearch]);
+    // eslint-disable-next-line
+    DocSearchModal = Modal;
+  }, [DocSearchModal]);
 
   const onOpen = useCallback(() => {
     importDocSearchModalIfNeeded().then(() => {
@@ -57,6 +50,8 @@ export function AlgoliaSearchProvider({ children, config }) {
     [importDocSearchModalIfNeeded, setIsOpen, setInitialQuery]
   );
 
+  // web accessibility
+  // https://www.algolia.com/doc/ui-libraries/autocomplete/core-concepts/keyboard-navigation/
   const navigator = useRef({
     navigate({ itemUrl }) {
       // Algolia results could contain URL's from other domains which cannot
@@ -71,7 +66,8 @@ export function AlgoliaSearchProvider({ children, config }) {
     },
   }).current;
 
-  const transformItems = useRef((items) =>
+  // https://docsearch.algolia.com/docs/api#transformitems
+  const transformItems = (items) =>
     items.map((item) => {
       // If Algolia contains a external domain, we should navigate without
       // relative URL
@@ -88,8 +84,8 @@ export function AlgoliaSearchProvider({ children, config }) {
         // url: withBaseUrl(`${url.pathname}${url.hash}`),
         url: `${url.pathname}${url.hash}`,
       };
-    })
-  ).current;
+    });
+  // ).current;
 
   useDocSearchKeyboardEvents({
     isOpen,
@@ -126,6 +122,7 @@ export function AlgoliaSearchProvider({ children, config }) {
             navigator={navigator}
             transformItems={transformItems}
             hitComponent={Hit}
+            placeholder={config.placeholder ?? "Search"}
             {...config}
           />,
           document.body

diff --git a/packages/core/src/ui/Search/AlgoliaModal.ts b/packages/core/src/ui/Search/AlgoliaModal.ts
diff --git a/packages/core/src/ui/Search/KBarPortal.tsx b/packages/core/src/ui/Search/KBarPortal.tsx
@@ -52,7 +52,10 @@ export const Portal: React.FC<Props> = ({ searchDocumentsPath }) => {
                   />
                 </svg>
               </span>
-              <KBarSearch className="h-8 w-full bg-transparent text-slate-600 placeholder-slate-400 focus:outline-none dark:text-slate-200 dark:placeholder-slate-500" />
+              <KBarSearch
+                defaultPlaceholder="Search"
+                className="h-8 w-full bg-transparent text-slate-600 placeholder-slate-400 focus:outline-none dark:text-slate-200 dark:placeholder-slate-500"
+              />
               <span className="inline-block whitespace-nowrap rounded border border-slate-400/70 px-1.5 align-middle font-medium leading-4 tracking-wide text-slate-500 [font-size:10px] dark:border-slate-600 dark:text-slate-400">
                 ESC
               </span>
@@ -68,7 +71,13 @@ export const Portal: React.FC<Props> = ({ searchDocumentsPath }) => {
 function RenderItem(props) {
   const { item, active } = props;
   return (
-    <div>
+    <div
+      className={
+        typeof item === "string"
+          ? ""
+          : "hover:bg-gray-200 hover:dark:bg-gray-800"
+      }
+    >
       {typeof item === "string" ? (
         <div className="pt-3">
           <div className="text-primary-600 block border-t border-gray-100 px-4 pt-6 pb-2 text-xs font-semibold uppercase dark:border-gray-800">

diff --git a/packages/core/src/ui/Search/SearchProvider.tsx b/packages/core/src/ui/Search/SearchProvider.tsx
@@ -6,28 +6,30 @@ import {
 
 const AlgoliaSearchProvider = dynamic(
   async () => {
-    return import("./Algolia").then((mod) => mod.AlgoliaSearchProvider);
+    return await import("./Algolia").then((mod) => mod.AlgoliaSearchProvider);
   },
   { ssr: false }
 );
 
 const AlgoliaSearchContext = dynamic(
   async () => {
-    return import("./Algolia").then((mod) => mod.AlgoliaSearchContext.Consumer);
+    return await import("./Algolia").then(
+      (mod) => mod.AlgoliaSearchContext.Consumer
+    );
   },
   { ssr: false }
 );
 
 const KBarProvider = dynamic(
   async () => {
-    return import("./KBar").then((mod) => mod.KBarSearchProvider);
+    return await import("./KBar").then((mod) => mod.KBarSearchProvider);
   },
   { ssr: false }
 );
 
 const KBarSearchContext = dynamic(
   async () => {
-    return import("kbar").then((mod) => mod.KBarContext.Consumer);
+    return await import("kbar").then((mod) => mod.KBarContext.Consumer);
   },
   { ssr: false }
 );