Added ability to save bookmarks in Nav Plugin

Summary:
This is a glue commit that glues all the components I've added in the past together.

Favouriting a page (i.e. clicking on the star) adds it as a bookmark.

There's four main parts to make your rreview easier:
1. Add bookmarks and favouriting to all the components that support it, including their parents. (NavigationInfoBox, SearchBar, Timeline)

2. Persist bookmarks using the indexedDB. (index.js)

3. Add saving to db through the SaveBookmarksDialog

4. Various other changes due to a changed architecture. i.e. moving bookmarks from persistedState to state.

Still to come.

1. Removing bookmarks.

2. Pressing enter to save the bookmarks when the SaveBookmarksDialog pops up.

3. Alphabetizing bookmarks? Order seems to jump around.

Reviewed By: jknoxville

Differential Revision: D16518013

fbshipit-source-id: 2e0cef14123c611db43cca360bc66dc4c05b11ed

src/plugins/navigation/index.js

@@ -9,12 +9,18 @@
 import {FlipperPlugin} from 'flipper';
 import {
   BookmarksSidebar,
+  SaveBookmarkDialog,
   SearchBar,
   Timeline,
   ScrollableFlexColumn,
 } from './components';
+import {readBookmarksFromDB, writeBookmarkToDB} from './util/indexedDB';
 
-type State = {||};
+type State = {|
+  bookmarks: Map<string, Bookmark>,
+  shouldShowSaveBookmarkDialog: boolean,
+  saveBookmarkURI: ?string,
+|};
 
 export type NavigationEvent = {|
   date: ?Date,
@@ -23,12 +29,11 @@ export type NavigationEvent = {|
 
 export type Bookmark = {|
   uri: string,
-  commonName: ?string,
+  commonName: string,
 |};
 
 export type PersistedState = {|
   navigationEvents: Array<NavigationEvent>,
-  bookmarks: Array<Bookmark>,
 |};
 
 export default class extends FlipperPlugin<State, {}, PersistedState> {
@@ -39,7 +44,12 @@ export default class extends FlipperPlugin<State, {}, PersistedState> {
 
   static defaultPersistedState: PersistedState = {
     navigationEvents: [],
-    bookmarks: [],
+  };
+
+  state = {
+    bookmarks: new Map<string, Bookmark>(),
+    shouldShowSaveBookmarkDialog: false,
+    saveBookmarkURI: null,
   };
 
   static persistedStateReducer = (
@@ -66,6 +76,12 @@ export default class extends FlipperPlugin<State, {}, PersistedState> {
     }
   };
 
+  componentDidMount = () => {
+    readBookmarksFromDB().then(bookmarks => {
+      this.setState({bookmarks});
+    });
+  };
+
   onKeyboardAction = (action: string) => {
     if (action === 'clear') {
       this.props.setPersistedState({navigationEvents: []});
@@ -78,16 +94,45 @@ export default class extends FlipperPlugin<State, {}, PersistedState> {
     });
   };
 
+  onFavorite = (uri: string) => {
+    this.setState({shouldShowSaveBookmarkDialog: true, saveBookmarkURI: uri});
+  };
+
+  addBookmark = (bookmark: Bookmark) => {
+    const newBookmark = {
+      uri: bookmark.uri,
+      commonName:
+        bookmark.commonName.length > 0 ? bookmark.commonName : bookmark.uri,
+    };
+    writeBookmarkToDB(newBookmark);
+    const newMapRef = this.state.bookmarks;
+    newMapRef.set(newBookmark.uri, newBookmark);
+    this.setState({bookmarks: newMapRef});
+  };
+
   render() {
-    const {navigationEvents, bookmarks} = this.props.persistedState;
+    const {bookmarks, shouldShowSaveBookmarkDialog} = this.state;
+    const {navigationEvents} = this.props.persistedState;
     return (
       <ScrollableFlexColumn>
         <SearchBar
+          bookmarks={bookmarks}
           onNavigate={this.navigateTo}
-          onFavorite={(query: string) => {}}
+          onFavorite={this.onFavorite}
+        />
+        <Timeline
+          bookmarks={bookmarks}
+          events={navigationEvents}
+          onNavigate={this.navigateTo}
+          onFavorite={this.onFavorite}
         />
-        <Timeline events={navigationEvents} onNavigate={this.navigateTo} />
         <BookmarksSidebar bookmarks={bookmarks} onNavigate={this.navigateTo} />
+        <SaveBookmarkDialog
+          shouldShow={shouldShowSaveBookmarkDialog}
+          uri={this.state.saveBookmarkURI}
+          onHide={() => this.setState({shouldShowSaveBookmarkDialog: false})}
+          onSubmit={this.addBookmark}
+        />
       </ScrollableFlexColumn>
     );
   }