From a90369bf8a16c516fa341c6a1c15809e80660b92 Mon Sep 17 00:00:00 2001
From: Angela <angela.ohh@gmail.com>
Date: Mon, 10 Jun 2019 15:08:46 -0700
Subject: [PATCH 1/6] added person status and time props

---
 src/components/TimelineEvent.js | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index 9079165..0c92ada 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -2,9 +2,17 @@ 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={ new Date } />
+
+  return(
+    <section>
+      <h1>{props.person}</h1>
+      <h3>{props.status}</h3>
+      <h6>{time}</h6>
+    </section>
+  );
+};
 
 export default TimelineEvent;

From bccc77f05eafb207596947fc14b63a9febb799e1 Mon Sep 17 00:00:00 2001
From: Angela <angela.ohh@gmail.com>
Date: Mon, 10 Jun 2019 15:09:09 -0700
Subject: [PATCH 2/6] added event prop

---
 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 624d4ec..1fccb92 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -2,9 +2,12 @@ import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
-const Timeline = () => {
-  // Fill in your code here
-  return;
+
+const Timeline = (props) => {
+
+  return(
+    <TimelineEvent status={props.event.status} person={props.event.person} timeStamp={props.event.timeStamp}/>
+  );
 }
 
 export default Timeline;

From 7920e1cb977b93869849e53e905466d0657aad33 Mon Sep 17 00:00:00 2001
From: Angela <angela.ohh@gmail.com>
Date: Mon, 10 Jun 2019 15:09:47 -0700
Subject: [PATCH 3/6] parsed JSON into array and mapped to display in jsx

---
 src/App.js | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/App.js b/src/App.js
index 5f4cdf8..719ec15 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,20 +1,35 @@
 import React, { Component } from 'react';
 import './App.css';
 import timelineData from './data/timeline.json';
-
 import Timeline from './components/Timeline';
 
 class App extends Component {
   render() {
-    console.log(timelineData);
 
-    // Customize the code below
+    const postingData = timelineData.events.map ((post) => {
+      return (
+        {person: post.person, status: post.status, timeStamp: post.timeStamp}
+      )
+    });
+
+    const displayPost = postingData.map ((post, i) => {
+        return (
+          <li key={i}>
+            <Timeline event={ post } />
+          </li>
+        );
+      });
+    
+
     return (
       <div className="App">
         <header className="App-header">
           <h1 className="App-title">Application title</h1>
         </header>
         <main className="App-main">
+          <ul>
+            {displayPost}
+          </ul>
         </main>
       </div>
     );

From c3e5ca8d489b847204341dd1dbfc66d3e54d639c Mon Sep 17 00:00:00 2001
From: Angela <angela.ohh@gmail.com>
Date: Mon, 10 Jun 2019 15:27:48 -0700
Subject: [PATCH 4/6] refactored to one loop on JSON data to pass in as event
 prop

---
 src/App.js | 20 +++++++-------------
 1 file changed, 7 insertions(+), 13 deletions(-)

diff --git a/src/App.js b/src/App.js
index 719ec15..f49f376 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,29 +6,23 @@ import Timeline from './components/Timeline';
 class App extends Component {
   render() {
 
-    const postingData = timelineData.events.map ((post) => {
+    const postingData = timelineData.events.map ((post, i) => {
       return (
-        {person: post.person, status: post.status, timeStamp: post.timeStamp}
+        <li key={i}>
+          <Timeline event={ post } />
+
+        </li>
       )
     });
 
-    const displayPost = postingData.map ((post, i) => {
-        return (
-          <li key={i}>
-            <Timeline event={ post } />
-          </li>
-        );
-      });
-    
-
     return (
       <div className="App">
         <header className="App-header">
-          <h1 className="App-title">Application title</h1>
+          <h1 className="App-title">React Timeline</h1>
         </header>
         <main className="App-main">
           <ul>
-            {displayPost}
+            {postingData}
           </ul>
         </main>
       </div>

From 50a0e54229fb217c1b483cfe250292028b1e7bc0 Mon Sep 17 00:00:00 2001
From: Angela <angela.ohh@gmail.com>
Date: Mon, 10 Jun 2019 15:28:09 -0700
Subject: [PATCH 5/6] connected CSS to app timeline and timelineevent

---
 src/App.css                     |  4 ++++
 src/components/Timeline.js      |  4 +++-
 src/components/TimelineEvent.js | 10 +++++-----
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/App.css b/src/App.css
index e20270c..9bd50f4 100644
--- a/src/App.css
+++ b/src/App.css
@@ -15,3 +15,7 @@
   padding-top: 7rem;
   background-color: #E6ECF0;
 }
+
+ul {
+  list-style: none;
+}
\ No newline at end of file
diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index 1fccb92..b38c62d 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -6,7 +6,9 @@ import TimelineEvent from './TimelineEvent';
 const Timeline = (props) => {
 
   return(
-    <TimelineEvent status={props.event.status} person={props.event.person} timeStamp={props.event.timeStamp}/>
+    <div className='timeline'>
+      <TimelineEvent status={props.event.status} person={props.event.person} timeStamp={props.event.timeStamp}/>
+    </div>
   );
 }
 
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index 0c92ada..773c9e3 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -4,13 +4,13 @@ import Timestamp from './Timestamp';
 
 const TimelineEvent = (props) => {
 
-  const time = <Timestamp time={ new Date } />
+  const time = <Timestamp time={ props.timeStamp} />
 
   return(
-    <section>
-      <h1>{props.person}</h1>
-      <h3>{props.status}</h3>
-      <h6>{time}</h6>
+    <section className='timeline-event'>
+      <p className='event-person'>{props.person}</p>
+      <p className='event-status'>{props.status}</p>
+      <p className='event-time'>{time}</p>
     </section>
   );
 };

From db3bcbe60581b78636f4c3305f766befd8ecf8d8 Mon Sep 17 00:00:00 2001
From: Angela <angela.ohh@gmail.com>
Date: Tue, 11 Jun 2019 10:45:51 -0700
Subject: [PATCH 6/6] erased spaces

---
 src/App.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/App.js b/src/App.js
index f49f376..9566a18 100644
--- a/src/App.js
+++ b/src/App.js
@@ -10,7 +10,6 @@ class App extends Component {
       return (
         <li key={i}>
           <Timeline event={ post } />
-
         </li>
       )
     });