feat(docsearch): introduce favorite searches

Author: francoischalifour

src/Footer/AlgoliaLogo.tsx src/AlgoliaLogo.tsxsrc/Footer/AlgoliaLogo.tsx renamed to src/AlgoliaLogo.tsx

@@ -8,14 +8,14 @@ import { getAlgoliaHits } from '@francoischalifour/autocomplete-preset-algolia';
 import {
   DocSearchHit,
   InternalDocSearchHit,
-  RecentDocSearchHit,
+  StoredDocSearchHit,
 } from './types';
 import { createSearchClient, groupBy, noop } from './utils';
 import { SearchBox } from './SearchBox';
-import { Dropdown } from './Dropdown';
+import { ScreenState } from './ScreenState';
 import { Footer } from './Footer';
 
-import { createRecentSearches } from './recent-searches';
+import { createStoredSearches } from './stored-searches';
 
 interface DocSearchProps {
   appId?: string;
@@ -48,7 +48,18 @@ export function DocSearch({
     appId,
     apiKey,
   ]);
-  const recentSearches = useRef(createRecentSearches<RecentDocSearchHit>());
+  const recentSearches = useRef(
+    createStoredSearches<StoredDocSearchHit>({
+      key: '__DOCSEARCH_RECENT_SEARCHES__',
+      limit: 5,
+    })
+  ).current;
+  const favoriteSearches = useRef(
+    createStoredSearches<StoredDocSearchHit>({
+      key: '__DOCSEARCH_FAVORITE_SEARCHES__',
+      limit: 10,
+    })
+  ).current;
 
   const autocomplete = React.useMemo(
     () =>
@@ -128,14 +139,26 @@ export function DocSearch({
               return [
                 {
                   onSelect({ suggestion }) {
-                    recentSearches.current.saveSearch(suggestion);
+                    recentSearches.add(suggestion);
                     onClose();
                   },
                   getSuggestionUrl({ suggestion }) {
                     return suggestion.url;
                   },
                   getSuggestions() {
-                    return recentSearches.current.getSearches();
+                    return recentSearches.getAll();
+                  },
+                },
+                {
+                  onSelect({ suggestion }) {
+                    recentSearches.add(suggestion);
+                    onClose();
+                  },
+                  getSuggestionUrl({ suggestion }) {
+                    return suggestion.url;
+                  },
+                  getSuggestions() {
+                    return favoriteSearches.getAll();
                   },
                 },
               ];
@@ -144,7 +167,7 @@ export function DocSearch({
             return Object.values<DocSearchHit[]>(sources).map(items => {
               return {
                 onSelect({ suggestion }) {
-                  recentSearches.current.saveSearch(suggestion);
+                  recentSearches.add(suggestion);
                   onClose();
                 },
                 getSuggestionUrl({ suggestion }) {
@@ -177,7 +200,14 @@ export function DocSearch({
           });
         },
       }),
-    [indexName, searchParameters, searchClient, onClose]
+    [
+      indexName,
+      searchParameters,
+      searchClient,
+      onClose,
+      recentSearches,
+      favoriteSearches,
+    ]
   );
 
   const { getEnvironmentProps, getRootProps } = autocomplete;
@@ -244,18 +274,16 @@ export function DocSearch({
         </header>
 
         <div className="DocSearch-Dropdown" ref={dropdownRef}>
-          <Dropdown
+          <ScreenState
             {...autocomplete}
             state={state}
-            inputRef={inputRef}
+            recentSearches={recentSearches}
+            favoriteSearches={favoriteSearches}
             onItemClick={item => {
-              recentSearches.current.saveSearch(item);
+              recentSearches.add(item);
               onClose();
             }}
-            onAction={item => {
-              recentSearches.current.deleteSearch(item);
-              autocomplete.refresh();
-            }}
+            inputRef={inputRef}
           />
         </div>
 

src/DocSearch.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import {
+  AutocompleteApi,
+  AutocompleteState,
+} from '@francoischalifour/autocomplete-core';
+
+import { StoredDocSearchHit } from './types';
+import { StoredSearchPlugin } from './stored-searches';
+import { Results } from './Results';
+import { ResetIcon, RecentIcon, StarIcon } from './icons';
+
+interface EmptyScreenProps
+  extends AutocompleteApi<
+    StoredDocSearchHit,
+    React.FormEvent,
+    React.MouseEvent,
+    React.KeyboardEvent
+  > {
+  state: AutocompleteState<StoredDocSearchHit>;
+  hasSuggestions: boolean;
+  onItemClick(item: StoredDocSearchHit): void;
+  recentSearches: StoredSearchPlugin<StoredDocSearchHit>;
+  favoriteSearches: StoredSearchPlugin<StoredDocSearchHit>;
+}
+
+export function EmptyScreen(props: EmptyScreenProps) {
+  if (props.state.status === 'idle' && props.hasSuggestions === false) {
+    return (
+      <div className="DocSearch-EmptyScreen">
+        <p className="DocSearch-Help">Your search history will appear here.</p>
+      </div>
+    );
+  }
+
+  if (props.hasSuggestions === false) {
+    return null;
+  }
+
+  return (
+    <div className="DocSearch-Dropdown-Container">
+      <Results
+        {...props}
+        title="Recent"
+        suggestion={props.state.suggestions[0]}
+        renderIcon={() => (
+          <div className="DocSearch-Hit-icon">
+            <RecentIcon />
+          </div>
+        )}
+        renderAction={({ item }) => (
+          <>
+            <div className="DocSearch-Hit-action">
+              <button
+                className="DocSearch-Hit-action-button"
+                title="Save this search"
+                onClick={event => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  props.favoriteSearches.add(item);
+                  props.refresh();
+                }}
+              >
+                <StarIcon />
+              </button>
+            </div>
+            <div className="DocSearch-Hit-action">
+              <button
+                className="DocSearch-Hit-action-button"
+                title="Remove this search from history"
+                onClick={event => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  props.recentSearches.remove(item);
+                  props.refresh();
+                }}
+              >
+                <ResetIcon />
+              </button>
+            </div>
+          </>
+        )}
+      />
+
+      <Results
+        {...props}
+        title="Favorites"
+        suggestion={props.state.suggestions[1]}
+        renderIcon={() => (
+          <div className="DocSearch-Hit-icon">
+            <StarIcon />
+          </div>
+        )}
+        renderAction={({ item }) => (
+          <button
+            className="DocSearch-Hit-action-button"
+            title="Remove this search from favorite"
+            onClick={event => {
+              event.preventDefault();
+              event.stopPropagation();
+              props.favoriteSearches.remove(item);
+              props.refresh();
+            }}
+          >
+            <ResetIcon />
+          </button>
+        )}
+      />
+    </div>
+  );
+}