Added BookmarksSidebar component

Summary:
This is another WIP. Here I construct a skeleton functional component which currently just displays that there is no bookmark information.

I have also placed the component into the layout.

Reviewed By: jknoxville

Differential Revision: D16419794

fbshipit-source-id: fe1722255bde2b8363e5514c284a242f077e5185

src/plugins/navigation/index.js

@@ -7,19 +7,28 @@
  */
 
 import {FlipperPlugin} from 'flipper';
-import {SearchBar, Timeline, ScrollableFlexColumn} from './components';
+import {
+  BookmarksSidebar,
+  SearchBar,
+  Timeline,
+  ScrollableFlexColumn,
+} from './components';
 
 type State = {||};
 
-type Data = {||};
-
 export type NavigationEvent = {|
   date: ?Date,
   uri: ?string,
 |};
 
+export type Bookmark = {|
+  uri: string,
+  commonName: ?string,
+|};
+
 export type PersistedState = {|
   navigationEvents: Array<NavigationEvent>,
+  bookmarks: Array<Bookmark>,
 |};
 
 export default class extends FlipperPlugin<State, {}, PersistedState> {
@@ -30,6 +39,7 @@ export default class extends FlipperPlugin<State, {}, PersistedState> {
 
   static defaultPersistedState: PersistedState = {
     navigationEvents: [],
+    bookmarks: [],
   };
 
   static persistedStateReducer = (
@@ -69,17 +79,15 @@ export default class extends FlipperPlugin<State, {}, PersistedState> {
   };
 
   render() {
-    const {persistedState} = this.props;
+    const {navigationEvents, bookmarks} = this.props.persistedState;
     return (
       <ScrollableFlexColumn>
         <SearchBar
           onNavigate={this.navigateTo}
           onFavorite={(query: string) => {}}
         />
-        <Timeline
-          events={persistedState.navigationEvents}
-          onNavigate={this.navigateTo}
-        />
+        <Timeline events={navigationEvents} onNavigate={this.navigateTo} />
+        <BookmarksSidebar bookmarks={bookmarks} />
       </ScrollableFlexColumn>
     );
   }