From 5add3180c8dbd8fecba2f02dbb576df1a69cf4db Mon Sep 17 00:00:00 2001
From: Amy Wyatt <amy.wyatt12@outlook.com>
Date: Mon, 10 Jun 2019 15:57:42 -0700
Subject: [PATCH 1/5] Timeline Event renders in application

---
 src/App.js                      |  6 +++---
 src/components/TimelineEvent.js | 17 ++++++++++++++---
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/App.js b/src/App.js
index 5f4cdf8..887671b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,18 +3,18 @@ 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">Code Monkey</h1>
         </header>
         <main className="App-main">
+          <TimelineEvent />
         </main>
       </div>
     );
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index 9079165..fbeb0b4 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -2,9 +2,20 @@ import React from 'react';
 import './TimelineEvent.css';
 import Timestamp from './Timestamp';
 
-const TimelineEvent = () => {
-  // Fill in your code here
-  return;
+const TimelineEvent = (props) => {
+  return (
+    <section>
+      <h3>
+        Andrew
+      </h3>
+      <p>
+        I'm cool
+      </p>
+      <h5>
+        Now o'clock
+      </h5>
+    </section>
+  );
 }
 
 export default TimelineEvent;

From ada19c5640870b1896fbb2372df2c78d5372a11e Mon Sep 17 00:00:00 2001
From: Amy Wyatt <amy.wyatt12@outlook.com>
Date: Mon, 10 Jun 2019 16:02:09 -0700
Subject: [PATCH 2/5] replace placeholder data with props

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

diff --git a/src/App.js b/src/App.js
index 887671b..34b4f04 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,7 +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() {
@@ -14,7 +13,7 @@ class App extends Component {
           <h1 className="App-title">Code Monkey</h1>
         </header>
         <main className="App-main">
-          <TimelineEvent />
+          <Timeline />
         </main>
       </div>
     );
diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index 624d4ec..7423c97 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -3,7 +3,6 @@ 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 fbeb0b4..4825a62 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -6,13 +6,13 @@ const TimelineEvent = (props) => {
   return (
     <section>
       <h3>
-        Andrew
+        {props.person}
       </h3>
       <p>
-        I'm cool
+        {props.status}
       </p>
       <h5>
-        Now o'clock
+        <Timestamp />
       </h5>
     </section>
   );

From ee2133e0b8b113eb95ec45e4e8e774af215ff919 Mon Sep 17 00:00:00 2001
From: Amy Wyatt <amy.wyatt12@outlook.com>
Date: Mon, 10 Jun 2019 16:55:23 -0700
Subject: [PATCH 3/5] render events on timeline

---
 src/App.js                      |  2 +-
 src/components/Timeline.js      | 22 ++++++++++++++++++++--
 src/components/TimelineEvent.js |  2 +-
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/App.js b/src/App.js
index 34b4f04..ecaee78 100644
--- a/src/App.js
+++ b/src/App.js
@@ -13,7 +13,7 @@ class App extends Component {
           <h1 className="App-title">Code Monkey</h1>
         </header>
         <main className="App-main">
-          <Timeline />
+          <Timeline events={timelineData.events} />
         </main>
       </div>
     );
diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index 7423c97..c9f9442 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -2,8 +2,26 @@ import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
-const Timeline = () => {
-  return;
+const Timeline = (props) => {
+
+  const timelineComponents = props.events.map( (event, i) => {
+    return (
+      <li key={i}>
+        <TimelineEvent
+          person={ event.person }
+          status={ event.status } 
+          timestamp={ event.timeStamp }/>
+      </li>
+    );
+  });
+
+  return (
+    <section>
+      <ul>
+        { timelineComponents }
+      </ul>
+    </section>
+  );
 }
 
 export default Timeline;
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index 4825a62..fb652be 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -12,7 +12,7 @@ const TimelineEvent = (props) => {
         {props.status}
       </p>
       <h5>
-        <Timestamp />
+        <Timestamp time={props.timeStamp}/>
       </h5>
     </section>
   );

From c823de3a5f28402aa5cce1f3237f98337ab591f3 Mon Sep 17 00:00:00 2001
From: Amy Wyatt <amy.wyatt12@outlook.com>
Date: Mon, 10 Jun 2019 17:03:28 -0700
Subject: [PATCH 4/5] timestamp working

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

diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index fb652be..fb78d2a 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -12,7 +12,7 @@ const TimelineEvent = (props) => {
         {props.status}
       </p>
       <h5>
-        <Timestamp time={props.timeStamp}/>
+        <Timestamp time={props.timestamp}/>
       </h5>
     </section>
   );

From 4c49dcffe724b9042286cd533ccc4453d70ecfee Mon Sep 17 00:00:00 2001
From: Amy Wyatt <amy.wyatt12@outlook.com>
Date: Tue, 11 Jun 2019 11:28:50 -0700
Subject: [PATCH 5/5] styling added

---
 src/components/Timeline.css     | 1 +
 src/components/Timeline.js      | 2 +-
 src/components/TimelineEvent.js | 8 ++++----
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/Timeline.css b/src/components/Timeline.css
index e31f946..bd1f418 100644
--- a/src/components/Timeline.css
+++ b/src/components/Timeline.css
@@ -2,4 +2,5 @@
   width: 30%;
   margin: auto;
   text-align: left;
+  list-style-type: none;
 }
diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index c9f9442..c4ca095 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -17,7 +17,7 @@ const Timeline = (props) => {
 
   return (
     <section>
-      <ul>
+      <ul className="timeline">
         { timelineComponents }
       </ul>
     </section>
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index fb78d2a..23f8200 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -4,14 +4,14 @@ import Timestamp from './Timestamp';
 
 const TimelineEvent = (props) => {
   return (
-    <section>
-      <h3>
+    <section className="timeline-event">
+      <h3 className="event-person">
         {props.person}
       </h3>
-      <p>
+      <p className="event-status">
         {props.status}
       </p>
-      <h5>
+      <h5 className="event-time">
         <Timestamp time={props.timestamp}/>
       </h5>
     </section>