From b24029918b0724e54f00799687a153da8dcda12c Mon Sep 17 00:00:00 2001
From: Antonia <antonianomamiukor@gmail.com>
Date: Wed, 15 Apr 2020 16:11:03 -0700
Subject: [PATCH] finished wave 2

---
 src/App.js                      |  3 ++-
 src/components/Timeline.js      | 19 +++++++++++++++----
 src/components/TimelineEvent.js | 15 +++++++++++----
 3 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/src/App.js b/src/App.js
index 76d86d2..0396738 100644
--- a/src/App.js
+++ b/src/App.js
@@ -11,10 +11,11 @@ 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">
       </main>
+      < Timeline events = {timelineData.events} />
     </div>
   );
 }
diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index 463eb3e..d6b460c 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -2,9 +2,20 @@ import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
-const Timeline = () => {
-  
-  return;
-}
+const Timeline = (props) => {
+  const components = props.events.map((event, i) => {
+  return (
+    <div key={i}>
+      <TimelineEvent person={event.person} status={event.status} time={event.timeStamp}/>
+      </div>
+  );
+});
+
+return(
+  <div className="timeline">
+    {components}
+    </div>
+);
+};
 
 export default Timeline;
\ No newline at end of file
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index cc476c2..d808829 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -2,9 +2,16 @@ import React from 'react';
 import './TimelineEvent.css';
 import Timestamp from './Timestamp';
 
-const TimelineEvent = () => {
-  
-  return;
-}
+
+const TimelineEvent = (props) => {
+  return (
+<div className="timeline-event">
+  <div className="event-person">{props.person}</div>
+  <div className="event-status">{props.status}</div>
+  <div className="event-time"><Timestamp time={props.timestamp}/></div>
+  </div>
+  // return;
+  );
+};
 
 export default TimelineEvent;
\ No newline at end of file