Search: Fix default value of allowEmpty

fuma-nama · Jan 7, 2024 · 355d479 · 355d479
1 parent 9bc2a26
commit 355d479
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 27 deletions.
diff --git a/packages/headless/src/search-algolia/client.ts b/packages/headless/src/search-algolia/client.ts
@@ -6,6 +6,9 @@ import type { SortedResult } from '@/search/shared';
 import type { BaseIndex } from './server';
 
 export interface Options extends SearchOptions {
+  /**
+   * Use `empty` as result if query is empty
+   */
   allowEmpty?: boolean;
 }
 
@@ -79,7 +82,8 @@ export function useAlgoliaSearch(
   const query = useSWR(
     ['/api/search', search, options],
     async () => {
-      if (!options.allowEmpty && search.length === 0) return 'empty';
+      const { allowEmpty = true } = options;
+      if (!allowEmpty && search.length === 0) return 'empty';
 
       return searchDocs(index, search, options);
     },

diff --git a/packages/ui/src/components/dialog/search.tsx b/packages/ui/src/components/dialog/search.tsx
@@ -4,7 +4,6 @@ import { useRouter } from 'next/navigation';
 import { type ReactNode } from 'react';
 import { useI18n } from '@/contexts/i18n';
 import {
-  Command,
   CommandDialog,
   CommandEmpty,
   CommandGroup,
@@ -53,32 +52,37 @@ export function SearchDialog({
         onValueChange={onSearchChange}
         placeholder={text.search ?? 'Search'}
       />
-      <CommandList>
-        <CommandEmpty>{text.searchNoResult ?? 'No results found'}</CommandEmpty>
-        <CommandGroup value="result">
-          {Array.isArray(data) &&
-            data.map((item) => (
-              <CommandItem
-                key={item.id}
-                value={item.id}
-                onSelect={() => {
-                  onOpen(item.url);
-                }}
-                nested={item.type !== 'page'}
-              >
-                {
+      {data !== 'empty' ? (
+        <CommandList>
+          <CommandEmpty>
+            {text.searchNoResult ?? 'No results found'}
+          </CommandEmpty>
+
+          <CommandGroup value="result">
+            {Array.isArray(data) &&
+              data.map((item) => (
+                <CommandItem
+                  key={item.id}
+                  value={item.id}
+                  onSelect={() => {
+                    onOpen(item.url);
+                  }}
+                  nested={item.type !== 'page'}
+                >
                   {
-                    text: <TextIcon />,
-                    heading: <HashIcon />,
-                    page: <FileTextIcon />,
-                  }[item.type]
-                }
-                <p className="w-0 flex-1 truncate">{item.content}</p>
-              </CommandItem>
-            ))}
-        </CommandGroup>
-        {props.children}
-      </CommandList>
+                    {
+                      text: <TextIcon />,
+                      heading: <HashIcon />,
+                      page: <FileTextIcon />,
+                    }[item.type]
+                  }
+                  <p className="w-0 flex-1 truncate">{item.content}</p>
+                </CommandItem>
+              ))}
+          </CommandGroup>
+          {props.children}
+        </CommandList>
+      ) : null}
     </CommandDialog>
   );
 }