From 2b3a97567fac557818ee18b6eeea2a3cc7a4905b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Fri, 3 Apr 2020 18:35:13 +0200
Subject: [PATCH] refactor(docsearch): refactor favorite searches

---
 packages/autocomplete-core/src/propGetters.ts |  7 ++-
 packages/docsearch-react/src/DocSearch.tsx    | 53 ++++++++++---------
 2 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/packages/autocomplete-core/src/propGetters.ts b/packages/autocomplete-core/src/propGetters.ts
index 5efeedfb0..86522601c 100644
--- a/packages/autocomplete-core/src/propGetters.ts
+++ b/packages/autocomplete-core/src/propGetters.ts
@@ -286,7 +286,12 @@ export function getPropGetters<TItem, TEvent, TMouseEvent, TKeyboardEvent>({
 
         store.send('mousemove', item.__autocomplete_id);
 
-        if (store.getState().highlightedIndex !== null) {
+        if (
+          store.getState().highlightedIndex !== null &&
+          store
+            .getState()
+            .suggestions.some(suggestion => suggestion.items.length > 0)
+        ) {
           const { item, itemValue, itemUrl, source } = getHighlightedItem({
             state: store.getState(),
           });
diff --git a/packages/docsearch-react/src/DocSearch.tsx b/packages/docsearch-react/src/DocSearch.tsx
index 672677a1d..56e1cbbb9 100644
--- a/packages/docsearch-react/src/DocSearch.tsx
+++ b/packages/docsearch-react/src/DocSearch.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from 'react';
+import React from 'react';
 import {
   createAutocomplete,
   AutocompleteState,
@@ -39,39 +39,41 @@ export function DocSearch({
     suggestions: [],
   } as any);
 
-  const searchBoxRef = useRef<HTMLDivElement | null>(null);
-  const dropdownRef = useRef<HTMLDivElement | null>(null);
-  const inputRef = useRef<HTMLInputElement | null>(null);
-  const snipetLength = useRef<number>(10);
+  const searchBoxRef = React.useRef<HTMLDivElement | null>(null);
+  const dropdownRef = React.useRef<HTMLDivElement | null>(null);
+  const inputRef = React.useRef<HTMLInputElement | null>(null);
+  const snipetLength = React.useRef<number>(10);
 
   const searchClient = React.useMemo(() => createSearchClient(appId, apiKey), [
     appId,
     apiKey,
   ]);
-  const recentSearches = useRef(
+  const favoriteSearches = React.useRef(
     createStoredSearches<StoredDocSearchHit>({
-      key: '__DOCSEARCH_RECENT_SEARCHES__',
-      limit: 5,
+      key: '__DOCSEARCH_FAVORITE_SEARCHES__',
+      limit: 10,
     })
   ).current;
-  const favoriteSearches = useRef(
+  const recentSearches = React.useRef(
     createStoredSearches<StoredDocSearchHit>({
-      key: '__DOCSEARCH_FAVORITE_SEARCHES__',
-      limit: 10,
+      key: '__DOCSEARCH_RECENT_SEARCHES__',
+      limit: 5,
     })
   ).current;
 
-  function saveRecentSearch(item: StoredDocSearchHit) {
-    // We save the recent search only if it's not favorited.
-    if (
-      favoriteSearches
-        .getAll()
-        .findIndex(search => search.objectID === item.objectID) === -1
-    ) {
-      console.log('SAVED SEARCH');
-      recentSearches.add(item);
-    }
-  }
+  const saveRecentSearch = React.useCallback(
+    function saveRecentSearch(item: StoredDocSearchHit) {
+      // We save the recent search only if it's not favorited.
+      if (
+        favoriteSearches
+          .getAll()
+          .findIndex(search => search.objectID === item.objectID) === -1
+      ) {
+        recentSearches.add(item);
+      }
+    },
+    [favoriteSearches, recentSearches]
+  );
 
   const autocomplete = React.useMemo(
     () =>
@@ -219,12 +221,13 @@ export function DocSearch({
       onClose,
       recentSearches,
       favoriteSearches,
+      saveRecentSearch,
     ]
   );
 
   const { getEnvironmentProps, getRootProps } = autocomplete;
 
-  useEffect(() => {
+  React.useEffect(() => {
     const isMobileMediaQuery = window.matchMedia('(max-width: 750px)');
 
     if (isMobileMediaQuery.matches) {
@@ -232,13 +235,13 @@ export function DocSearch({
     }
   }, []);
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (dropdownRef.current) {
       dropdownRef.current.scrollTop = 0;
     }
   }, [state.query]);
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (!(searchBoxRef.current && dropdownRef.current && inputRef.current)) {
       return undefined;
     }