From 9c6e7b5409e6a6bd28704db174968f17113ded31 Mon Sep 17 00:00:00 2001
From: Mina Shin <minamishin@hotmail.com>
Date: Mon, 10 Jun 2019 15:43:26 -0700
Subject: [PATCH 1/3] completed TimelineEvent component

---
 src/App.js                      |  5 +++--
 src/components/Timeline.js      | 14 +++++++++++---
 src/components/TimelineEvent.js | 25 +++++++++++++++++++++----
 3 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/src/App.js b/src/App.js
index 5f4cdf8..ff3eb08 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,18 +3,19 @@ import './App.css';
 import timelineData from './data/timeline.json';
 
 import Timeline from './components/Timeline';
+import TimelineEvent from './components/TimelineEvent';
 
 class App extends Component {
   render() {
     console.log(timelineData);
 
-    // Customize the code below
     return (
       <div className="App">
         <header className="App-header">
-          <h1 className="App-title">Application title</h1>
+          <h1 className="App-title">Ada Lovelace's Feed</h1>
         </header>
         <main className="App-main">
+          <TimelineEvent person="Mina" status="angry" timestamp="2018-05-18T22:12:03Z"/>
         </main>
       </div>
     );
diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index 624d4ec..935c717 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -3,8 +3,16 @@ import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
 const Timeline = () => {
-  // Fill in your code here
-  return;
-}
+  // const timelinePosts = events.map( (post, i) => {
+    // return (
+    //   <li key={i}>
+    //     <Timeline
+    //       person={ post.person }
+    //       status={ post.status }
+    //       timeStamp={ post.Timestamp } />
+    //   </li>
+  //   );
+  // });
+};
 
 export default Timeline;
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index 9079165..6b0f939 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -2,9 +2,26 @@ import React from 'react';
 import './TimelineEvent.css';
 import Timestamp from './Timestamp';
 
-const TimelineEvent = () => {
-  // Fill in your code here
-  return;
-}
+const personTimestamp = (props) => {
+  return (
+    <Timestamp time={ props } />
+  );
+};
+
+const TimelineEvent = (props) => {
+  return (
+    <section>
+      <h3>
+        Person: { props.person }
+      </h3>
+      <p>
+        Status: { props.status}
+      </p>
+      <p>
+        Timestamp: { personTimestamp(props.timeStamp) }
+      </p>
+    </section>
+  );
+};
 
 export default TimelineEvent;

From b7c39dd142d2c8cadfd99a26e97f9ac622557626 Mon Sep 17 00:00:00 2001
From: Mina Shin <minamishin@hotmail.com>
Date: Tue, 11 Jun 2019 05:41:27 -0700
Subject: [PATCH 2/3] created timeline events to render each post

---
 src/App.js                 |  4 +---
 src/components/Timeline.js | 25 ++++++++++++++-----------
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/App.js b/src/App.js
index ff3eb08..f13a5e8 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,8 +3,6 @@ import './App.css';
 import timelineData from './data/timeline.json';
 
 import Timeline from './components/Timeline';
-import TimelineEvent from './components/TimelineEvent';
-
 class App extends Component {
   render() {
     console.log(timelineData);
@@ -15,7 +13,7 @@ class App extends Component {
           <h1 className="App-title">Ada Lovelace's Feed</h1>
         </header>
         <main className="App-main">
-          <TimelineEvent person="Mina" status="angry" timestamp="2018-05-18T22:12:03Z"/>
+          <Timeline events= {timelineData["events"]} />
         </main>
       </div>
     );
diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index 935c717..8e65ef0 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -2,17 +2,20 @@ import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
-const Timeline = () => {
-  // const timelinePosts = events.map( (post, i) => {
-    // return (
-    //   <li key={i}>
-    //     <Timeline
-    //       person={ post.person }
-    //       status={ post.status }
-    //       timeStamp={ post.Timestamp } />
-    //   </li>
-  //   );
-  // });
+const Timeline = (props) => {
+  const posts = props.events.map((event, i) => {
+    return (
+      <section>
+        <TimelineEvent person={ event.person } status={ event.status } timestamp={ event.timeStamp } key={ i } />
+      </section>
+    );
+  });
+
+  return (
+    <section>
+      { posts }
+    </section>
+  );
 };
 
 export default Timeline;

From 8bc17c07e3aa735d06c10cf31cb69116ae176486 Mon Sep 17 00:00:00 2001
From: Mina Shin <minamishin@hotmail.com>
Date: Tue, 11 Jun 2019 10:47:36 -0700
Subject: [PATCH 3/3] added section name for post in timeline

---
 src/components/Timeline.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index 8e65ef0..ca7c34a 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -5,14 +5,17 @@ import TimelineEvent from './TimelineEvent';
 const Timeline = (props) => {
   const posts = props.events.map((event, i) => {
     return (
-      <section>
-        <TimelineEvent person={ event.person } status={ event.status } timestamp={ event.timeStamp } key={ i } />
+      <section key={ i }>
+        <TimelineEvent 
+          person={ event.person } 
+          status={ event.status } 
+          timestamp={ event.timeStamp } />
       </section>
     );
   });
 
   return (
-    <section>
+    <section className="post">
       { posts }
     </section>
   );