From a14f58972e7ed22409edbbec872ff7de1fc0b2dc Mon Sep 17 00:00:00 2001
From: Katie <katie.vandervoort@gmail.com>
Date: Wed, 15 Apr 2020 08:23:31 -0700
Subject: [PATCH] implemented Timeline, TimelineEvent and App

---
 src/App.js                      |  5 ++++-
 src/components/Timeline.js      | 20 +++++++++++++++++---
 src/components/TimelineEvent.js | 10 ++++++++--
 3 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/src/App.js b/src/App.js
index 76d86d2..77f05db 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,6 +3,8 @@ import logo from './logo.svg';
 import './App.css';
 import timelineData from './data/timeline.json';
 import Timeline from './components/Timeline';
+import TimelineEvent from './components/TimelineEvent';
+
 
 function App() {
   console.log(timelineData);
@@ -11,9 +13,10 @@ function App() {
   return (
     <div className="App">
       <header className="App-header">
-        <h1 className="App-title">Application title</h1>
+        <h1 className="App-title">{timelineData.person}'s social media feed</h1>
       </header>
       <main className="App-main">
+        <Timeline events={timelineData.events}/>
       </main>
     </div>
   );
diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index 463eb3e..d680177 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -2,9 +2,23 @@ import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
-const Timeline = () => {
-  
-  return;
+const Timeline = (props) => {
+  const timelineEvents = props.events.map(event => {
+    return (
+      <TimelineEvent
+        person={event.person}
+        status={event.status}
+        timestamp={event.timeStamp}
+        key={event.timeStamp}
+      />
+    );
+  })
+
+  return (
+    <div className="timeline">
+      {timelineEvents}
+    </div>
+  );
 }
 
 export default Timeline;
\ No newline at end of file
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index cc476c2..d201591 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -2,9 +2,15 @@ import React from 'react';
 import './TimelineEvent.css';
 import Timestamp from './Timestamp';
 
-const TimelineEvent = () => {
+const TimelineEvent = (props) => {
   
-  return;
+  return(
+    <div className="timeline-event event-hover">
+      <h3 className="event-person">{props.person}</h3>
+      <p className="event-status">{props.status}</p>
+      <p className="event-time"><Timestamp time={props.timestamp}/></p>
+    </div>
+  );
 }
 
 export default TimelineEvent;
\ No newline at end of file