Created Timeline component

Summary: This is a WIP component that displays the timeline of nav events to the user.

Reviewed By: jknoxville

Differential Revision: D16417087

fbshipit-source-id: 45a4bcdc271941d413c78fab2424628499c6d5ea

src/plugins/navigation/components/Timeline.js

@@ -0,0 +1,38 @@
+/**
+ * Copyright 2018-present Facebook.
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * @format
+ * @flow strict-local
+ */
+
+import {styled} from 'flipper';
+import {NavigationInfoBox} from './';
+
+import type {NavigationEvent} from '../';
+
+type Props = {|
+  events: Array<NavigationEvent>,
+  onNavigate: string => void,
+|};
+
+const TimelineContainer = styled('div')({
+  overflowY: 'scroll',
+  flexGrow: 1,
+});
+
+export default (props: Props) => {
+  return (
+    <TimelineContainer>
+      {props.events.map((event: NavigationEvent) => {
+        return (
+          <NavigationInfoBox
+            uri={event.uri}
+            onNavigate={props.onNavigate}
+            onFavorite={() => {}} // stubbed for now
+          />
+        );
+      })}
+    </TimelineContainer>
+  );
+};

src/plugins/navigation/components/index.js

@@ -10,3 +10,4 @@ export {default as IconButton} from './IconButton';
 export {default as NavigationInfoBox} from './NavigationInfoBox';
 export {default as ScrollableFlexColumn} from './ScrollableFlexColumn';
 export {default as SearchBar} from './SearchBar';
+export {default as Timeline} from './Timeline';

src/plugins/navigation/index.js

@@ -7,13 +7,13 @@
  */
 
 import {FlipperPlugin} from 'flipper';
-import {SearchBar, ScrollableFlexColumn} from './components';
+import {SearchBar, Timeline, ScrollableFlexColumn} from './components';
 
 type State = {||};
 
 type Data = {||};
 
-type NavigationEvent = {|
+export type NavigationEvent = {|
   date: ?Date,
   uri: ?string,
 |};
@@ -69,12 +69,17 @@ export default class extends FlipperPlugin<State, {}, PersistedState> {
   };
 
   render() {
+    const {persistedState} = this.props;
     return (
       <ScrollableFlexColumn>
         <SearchBar
           onNavigate={this.navigateTo}
           onFavorite={(query: string) => {}}
         />
+        <Timeline
+          events={persistedState.navigationEvents}
+          onNavigate={this.navigateTo}
+        />
       </ScrollableFlexColumn>
     );
   }