From 08fa576d7f78bf07c27e075fefd1800a9abb8a48 Mon Sep 17 00:00:00 2001
From: Sophearychiv <sopheary.chiv@gmail.com>
Date: Mon, 10 Jun 2019 15:46:09 -0700
Subject: [PATCH] added all components

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

diff --git a/src/App.js b/src/App.js
index 5f4cdf8..74b72b0 100644
--- a/src/App.js
+++ b/src/App.js
@@ -7,14 +7,15 @@ import Timeline from './components/Timeline';
 class App extends Component {
   render() {
     console.log(timelineData);
-
     // Customize the code below
+    const allEvents = timelineData.events
     return (
       <div className="App">
         <header className="App-header">
-          <h1 className="App-title">Application title</h1>
+          <h1 className="App-title">Social Feeds</h1>
         </header>
         <main className="App-main">
+          <Timeline events={allEvents}/>
         </main>
       </div>
     );
diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index 624d4ec..507d335 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -2,9 +2,25 @@ import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
-const Timeline = () => {
+const Timeline = (props) => {
   // Fill in your code here
-  return;
+
+  const allTimelineEvents = props.events.map((timelineEvent,i)=>{
+    return (
+      <ul key={i}>
+        <TimelineEvent
+          person={timelineEvent.person}
+          status={timelineEvent.status}
+          timeStamp={timelineEvent.timeStamp}
+          />
+      </ul>
+    );
+  });
+  return(
+    <section className="timeline">
+      {allTimelineEvents}
+    </section>
+  );
 }
 
 export default Timeline;
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index 9079165..f89bdcc 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -2,9 +2,23 @@ import React from 'react';
 import './TimelineEvent.css';
 import Timestamp from './Timestamp';
 
-const TimelineEvent = () => {
-  // Fill in your code here
-  return;
+const TimelineEvent = (props) => {
+  
+  return (
+    <ul 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>
+    </ul>
+  );
 }
 
 export default TimelineEvent;