feat(docsearch): introduce resultsFooterComponent option

Author: francoischalifour

src/DocSearchModal.tsx

@@ -3,7 +3,7 @@ import {
   createAutocomplete,
   AutocompleteState,
 } from '@francoischalifour/autocomplete-core';
-import { getAlgoliaHits } from '@francoischalifour/autocomplete-preset-algolia';
+import { getAlgoliaResults } from '@francoischalifour/autocomplete-preset-algolia';
 
 import { MAX_QUERY_SIZE } from './constants';
 import {
@@ -35,6 +35,7 @@ export function DocSearchModal({
   onClose = noop,
   transformItems = (x) => x,
   hitComponent = Hit,
+  resultsFooterComponent = () => null,
   navigator,
 }: DocSearchModalProps) {
   const [state, setState] = React.useState<
@@ -144,7 +145,7 @@ export function DocSearchModal({
             ];
           }
 
-          return getAlgoliaHits({
+          return getAlgoliaResults({
             searchClient,
             queries: [
               {
@@ -193,7 +194,9 @@ export function DocSearchModal({
 
               throw error;
             })
-            .then((hits: DocSearchHit[]) => {
+            .then((results) => {
+              const hits: DocSearchHit[] = results[0].hits;
+              const nbHits: number = results[0].nbHits;
               const sources = groupBy(hits, (hit) => hit.hierarchy.lvl0);
 
               // We store the `lvl0`s to display them as search suggestions
@@ -207,6 +210,8 @@ export function DocSearchModal({
                 });
               }
 
+              setContext({ nbHits });
+
               return Object.values<DocSearchHit[]>(sources).map((items) => {
                 return {
                   onSelect({ suggestion }) {
@@ -339,6 +344,7 @@ export function DocSearchModal({
             {...autocomplete}
             state={state}
             hitComponent={hitComponent}
+            resultsFooterComponent={resultsFooterComponent}
             recentSearches={recentSearches}
             favoriteSearches={favoriteSearches}
             onItemClick={(item) => {

src/ResultsScreen.tsx

@@ -16,6 +16,9 @@ interface ResultsScreenProps
     React.KeyboardEvent
   > {
   state: AutocompleteState<InternalDocSearchHit>;
+  resultsFooterComponent(props: {
+    state: AutocompleteState<InternalDocSearchHit>;
+  }): JSX.Element;
   onItemClick(item: InternalDocSearchHit): void;
 }
 
@@ -69,6 +72,10 @@ export function ResultsScreen(props: ResultsScreenProps) {
           />
         );
       })}
+
+      <section className="DocSearch-HitsFooter">
+        <props.resultsFooterComponent state={props.state} />
+      </section>
     </div>
   );
 }

src/style.css

@@ -412,6 +412,19 @@ html[data-theme='dark'] {
   color: var(--docsearch-highlight-color);
 }
 
+.DocSearch-HitsFooter {
+  margin-bottom: var(--docsearch-spacing);
+  padding: var(--docsearch-spacing);
+  color: var(--docsearch-muted-color);
+  display: flex;
+  justify-content: center;
+}
+
+.DocSearch-HitsFooter a {
+  color: inherit;
+  border-bottom: 1px solid;
+}
+
 .DocSearch-Hit {
   display: flex;
   position: relative;