Added providers to the auto complete sheet

Summary:
Okay so the main changes here are integrating the providers into the auto complete sheet and getting the search bar to work with it also.

For instance, in the search bar, I want to update the value string to whatever the user has highlighted in the auto complete sheet, without executing a new query. So thus, I had to create a new state variable in the search bar component for this.

I've also moved the custom hook into its own file to keep the component short in size. It had to be mainly rewritten to support providers instead of only bookmarks. Same goes for the entire AutoCompleteSheet component.

The bookmarksProvider is stored in the persisted state as to not regenerate every-time on render. It is only updated if the bookmarks are updated which are also now stored in the persistedState for the same reason.

Lastly, a DefaultProvider object was also made for the initial persisted state object.

Reviewed By: danielbuechele

Differential Revision: D16581644

fbshipit-source-id: 88723a4081d96250f723a4cd7b1ade101bf3e8f3

src/plugins/navigation/index.js

@@ -19,6 +19,10 @@ import {
   readBookmarksFromDB,
   writeBookmarkToDB,
 } from './util/indexedDB';
+import {
+  bookmarksToAutoCompleteProvider,
+  DefaultProvider,
+} from './util/autoCompleteProvider';
 
 import type {
   State,
@@ -35,10 +39,11 @@ export default class extends FlipperPlugin<State, {}, PersistedState> {
 
   static defaultPersistedState: PersistedState = {
     navigationEvents: [],
+    bookmarks: new Map<string, Bookmark>(),
+    bookmarksProvider: new DefaultProvider(),
   };
 
   state = {
-    bookmarks: new Map<string, Bookmark>(),
     shouldShowSaveBookmarkDialog: false,
     saveBookmarkURI: null,
   };
@@ -69,7 +74,10 @@ export default class extends FlipperPlugin<State, {}, PersistedState> {
 
   componentDidMount = () => {
     readBookmarksFromDB().then(bookmarks => {
-      this.setState({bookmarks});
+      this.props.setPersistedState({
+        bookmarks: bookmarks,
+        bookmarksProvider: bookmarksToAutoCompleteProvider(bookmarks),
+      });
     });
   };
 
@@ -95,29 +103,38 @@ export default class extends FlipperPlugin<State, {}, PersistedState> {
       commonName:
         bookmark.commonName.length > 0 ? bookmark.commonName : bookmark.uri,
     };
+
     writeBookmarkToDB(newBookmark);
-    const newMapRef = this.state.bookmarks;
+    const newMapRef = this.props.persistedState.bookmarks;
     newMapRef.set(newBookmark.uri, newBookmark);
-    this.setState({bookmarks: newMapRef});
+    this.props.setPersistedState({
+      bookmarks: newMapRef,
+      bookmarksProvider: bookmarksToAutoCompleteProvider(newMapRef),
+    });
   };
 
   removeBookmark = (uri: string) => {
     removeBookmark(uri);
-    const newMapRef = this.state.bookmarks;
+    const newMapRef = this.props.persistedState.bookmarks;
     newMapRef.delete(uri);
-    this.setState({bookmarks: newMapRef});
+    this.props.setPersistedState({
+      bookmarks: newMapRef,
+      bookmarksProvider: bookmarksToAutoCompleteProvider(newMapRef),
+    });
   };
 
   render() {
+    const {saveBookmarkURI, shouldShowSaveBookmarkDialog} = this.state;
     const {
       bookmarks,
-      saveBookmarkURI,
-      shouldShowSaveBookmarkDialog,
-    } = this.state;
-    const {navigationEvents} = this.props.persistedState;
+      bookmarksProvider,
+      navigationEvents,
+    } = this.props.persistedState;
+    const autoCompleteProviders = [bookmarksProvider];
     return (
       <ScrollableFlexColumn>
         <SearchBar
+          providers={autoCompleteProviders}
           bookmarks={bookmarks}
           onNavigate={this.navigateTo}
           onFavorite={this.onFavorite}