From eeeb32efa9ae3f9655ee40bc8e8bab63ae03bd74 Mon Sep 17 00:00:00 2001
From: Benjamin Elo <beneloca@fb.com>
Date: Tue, 23 Jul 2019 03:22:53 -0700
Subject: [PATCH] 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 | 38 +++++++++++++++++++
 src/plugins/navigation/components/index.js    |  1 +
 src/plugins/navigation/index.js               |  9 ++++-
 3 files changed, 46 insertions(+), 2 deletions(-)
 create mode 100644 src/plugins/navigation/components/Timeline.js

diff --git a/src/plugins/navigation/components/Timeline.js b/src/plugins/navigation/components/Timeline.js
new file mode 100644
index 000000000..d27a5c88a
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/plugins/navigation/components/index.js b/src/plugins/navigation/components/index.js
index cd31576e9..048cacf2c 100644
--- a/src/plugins/navigation/components/index.js
+++ b/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';
diff --git a/src/plugins/navigation/index.js b/src/plugins/navigation/index.js
index f3cee844c..557b4561c 100644
--- a/src/plugins/navigation/index.js
+++ b/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>
     );
   }