From dcb71085442ea3a4afa99a17d8c93db8b0c6d237 Mon Sep 17 00:00:00 2001
From: Heather Izumi <hkizumi@gmail.com>
Date: Mon, 10 Jun 2019 15:58:13 -0700
Subject: [PATCH 1/3] Added props to TimelineEvent and implemented Timestamp
 component

---
 src/App.js                      | 12 ++++++++++--
 src/components/Timeline.js      |  2 +-
 src/components/TimelineEvent.js | 25 ++++++++++++++++++++++---
 3 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/src/App.js b/src/App.js
index 5f4cdf8..b659fad 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import './App.css';
 import timelineData from './data/timeline.json';
+import TimelineEvent from './components/TimelineEvent';
+
 
 import Timeline from './components/Timeline';
 
@@ -8,13 +10,19 @@ class App extends Component {
   render() {
     console.log(timelineData);
 
+
+  
+
     // Customize the code below
-    return (
+    return(
       <div className="App">
         <header className="App-header">
-          <h1 className="App-title">Application title</h1>
+          <h1 className="App-title">Ada Lovelace's social media feed</h1>
         </header>
         <main className="App-main">
+          <section>
+            <TimelineEvent person="heather" status="busy" timestamp="2018-05-18T22:12:03Z" />
+          </section>
         </main>
       </div>
     );
diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index 624d4ec..ec3f797 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -3,7 +3,7 @@ import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
 const Timeline = () => {
-  // Fill in your code here
+  
   return;
 }
 
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index 9079165..74fcbe3 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -2,9 +2,28 @@ import React from 'react';
 import './TimelineEvent.css';
 import Timestamp from './Timestamp';
 
-const TimelineEvent = () => {
-  // Fill in your code here
-  return;
+const TimelineEvent = (props) => {
+
+  // const time = <Timestamp time="2018-05-18T22:12:03Z" />
+
+
+  return(
+    <section 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>
+
+    </section>
+
+  );
 }
 
 export default TimelineEvent;

From 62ebffda5b130ab0da69a4f8ae071da8262049e6 Mon Sep 17 00:00:00 2001
From: Heather Izumi <hkizumi@gmail.com>
Date: Mon, 10 Jun 2019 19:33:45 -0700
Subject: [PATCH 2/3] added timeline component, using json data

---
 src/App.js                 |  9 +++------
 src/components/Timeline.js | 21 ++++++++++++++++++---
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/App.js b/src/App.js
index b659fad..9ecd35b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import './App.css';
 import timelineData from './data/timeline.json';
-import TimelineEvent from './components/TimelineEvent';
 
 
 import Timeline from './components/Timeline';
@@ -9,8 +8,6 @@ import Timeline from './components/Timeline';
 class App extends Component {
   render() {
     console.log(timelineData);
-
-
   
 
     // Customize the code below
@@ -20,9 +17,9 @@ class App extends Component {
           <h1 className="App-title">Ada Lovelace's social media feed</h1>
         </header>
         <main className="App-main">
-          <section>
-            <TimelineEvent person="heather" status="busy" timestamp="2018-05-18T22:12:03Z" />
-          </section>
+        
+            <Timeline events={timelineData["events"]} />
+            
         </main>
       </div>
     );
diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index ec3f797..f584223 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -2,9 +2,24 @@ import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
-const Timeline = () => {
-  
-  return;
+const Timeline = (props) => {
+
+  const events = props.events.map((event, i) => {
+    return (
+
+      <TimelineEvent key={i}
+        person={event.person}
+        status={event.status}
+        timestamp={event.timeStamp} />
+
+    );
+  });
+
+  return (
+    <section className="timeline">
+      { events }
+    </section>
+  );
 }
 
 export default Timeline;

From b6bf62adccf67cdf978d552612bc457db0989c36 Mon Sep 17 00:00:00 2001
From: Heather Izumi <hkizumi@gmail.com>
Date: Mon, 10 Jun 2019 21:16:29 -0700
Subject: [PATCH 3/3] cleaned up files

---
 src/components/TimelineEvent.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index 74fcbe3..1be664e 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -4,11 +4,10 @@ import Timestamp from './Timestamp';
 
 const TimelineEvent = (props) => {
 
-  // const time = <Timestamp time="2018-05-18T22:12:03Z" />
-
 
   return(
     <section className="timeline-event">
+      
       <div className="event-person">
         {props.person}
       </div>