From fc368bf99b0917e91b4160cca464051df6e23997 Mon Sep 17 00:00:00 2001
From: qqdipps <sdipp007@gmail.com>
Date: Mon, 10 Jun 2019 15:05:39 -0700
Subject: [PATCH 1/3] setup App title

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

diff --git a/src/App.js b/src/App.js
index 5f4cdf8..834766b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -12,10 +12,9 @@ class App extends Component {
     return (
       <div className="App">
         <header className="App-header">
-          <h1 className="App-title">Application title</h1>
+          <h1 className="App-title">Sav's Super Awesome Timeline</h1>
         </header>
-        <main className="App-main">
-        </main>
+        <main className="App-main" />
       </div>
     );
   }

From 2bf3292b659b507ba1e07f97a2af5a62c58b6cce Mon Sep 17 00:00:00 2001
From: qqdipps <sdipp007@gmail.com>
Date: Mon, 10 Jun 2019 15:51:29 -0700
Subject: [PATCH 2/3]  added logic for timeline, timelineEvent, and read from
 JSON

---
 src/App.js                       | 15 ++++++++++++---
 src/components/Timeline.css      |  4 ++++
 src/components/Timeline.js       | 18 ++++++++++++++----
 src/components/TimelineEvent.css |  5 +++++
 src/components/TimelineEvent.js  | 19 +++++++++++++++----
 src/components/Timestamp.js      |  6 ++----
 6 files changed, 52 insertions(+), 15 deletions(-)

diff --git a/src/App.js b/src/App.js
index 834766b..1dd25fc 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,12 +1,19 @@
 import React, { Component } from 'react';
 import './App.css';
 import timelineData from './data/timeline.json';
-
+import Timestamp from './components/Timestamp';
 import Timeline from './components/Timeline';
+import TimelineEvent from './components/TimelineEvent';
 
 class App extends Component {
   render() {
-    console.log(timelineData);
+    const timelineObjects = timelineData.events.map((timelineObject, i) => {
+      return {
+        time: timelineObject.timeStamp,
+        person: timelineObject.person,
+        status: timelineObject.status,
+      };
+    });
 
     // Customize the code below
     return (
@@ -14,7 +21,9 @@ class App extends Component {
         <header className="App-header">
           <h1 className="App-title">Sav's Super Awesome Timeline</h1>
         </header>
-        <main className="App-main" />
+        <main className="App-main">
+          <Timeline events={timelineObjects} />
+        </main>
       </div>
     );
   }
diff --git a/src/components/Timeline.css b/src/components/Timeline.css
index e31f946..5bf2118 100644
--- a/src/components/Timeline.css
+++ b/src/components/Timeline.css
@@ -3,3 +3,7 @@
   margin: auto;
   text-align: left;
 }
+
+ul{
+  list-style: none;
+}
diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index 624d4ec..81b3ff8 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -2,9 +2,19 @@ import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
-const Timeline = () => {
-  // Fill in your code here
-  return;
-}
+const Timeline = events => {
+  const TimelineEvents = events.events.map(eventObject => {
+    return (
+      <li>
+        <TimelineEvent
+          person={eventObject.person}
+          status={eventObject.status}
+          time={eventObject.time}
+        />
+      </li>
+    );
+  });
+  return <ul className="Timeline">{TimelineEvents}</ul>;
+};
 
 export default Timeline;
diff --git a/src/components/TimelineEvent.css b/src/components/TimelineEvent.css
index ea6407a..91a9906 100644
--- a/src/components/TimelineEvent.css
+++ b/src/components/TimelineEvent.css
@@ -4,6 +4,7 @@
   padding: 0.5rem;
   border-bottom: 1px solid #E6ECF0;
   background-color: #FFF;
+  margin-right: 2.5em;
 }
 
 .timeline-event:hover {
@@ -25,3 +26,7 @@
   margin-top: 0.5rem;
   text-align: right;
 }
+
+h1 {
+  font-size: 1em;
+}
\ No newline at end of file
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index 9079165..ec014a5 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 = prop => {
+  return (
+    <section className="timeline-event">
+      <div className="event-person ">
+        <h1>{prop.person}</h1>
+      </div>
+      <div className="event-status ">
+        <p>{prop.status}</p>
+      </div>
+      <div className="event-time ">
+        <Timestamp time={prop.time} />
+      </div>
+    </section>
+  );
+};
 
 export default TimelineEvent;
diff --git a/src/components/Timestamp.js b/src/components/Timestamp.js
index 9a39231..e3e8e35 100644
--- a/src/components/Timestamp.js
+++ b/src/components/Timestamp.js
@@ -1,14 +1,12 @@
 import React from 'react';
 import moment from 'moment';
 
-const Timestamp = (props) => {
+const Timestamp = props => {
   const time = moment(props.time);
   const absolute = time.format('MMMM Do YYYY, h:mm:ss a');
   const relative = time.fromNow();
 
-  return (
-    <span title={absolute}>{relative}</span>
-  );
+  return <span title={absolute}>{relative}</span>;
 };
 
 export default Timestamp;

From d6895994121d8d8b4f7da7e7f4bc2f2adcf0374b Mon Sep 17 00:00:00 2001
From: qqdipps <sdipp007@gmail.com>
Date: Mon, 10 Jun 2019 15:55:28 -0700
Subject: [PATCH 3/3] adjested width of timeline

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

diff --git a/src/App.js b/src/App.js
index 1dd25fc..3cfbc3a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,9 +1,7 @@
 import React, { Component } from 'react';
 import './App.css';
 import timelineData from './data/timeline.json';
-import Timestamp from './components/Timestamp';
 import Timeline from './components/Timeline';
-import TimelineEvent from './components/TimelineEvent';
 
 class App extends Component {
   render() {
@@ -19,7 +17,7 @@ class App extends Component {
     return (
       <div className="App">
         <header className="App-header">
-          <h1 className="App-title">Sav's Super Awesome Timeline</h1>
+          <h1 className="App-title">Super Awesome Timeline</h1>
         </header>
         <main className="App-main">
           <Timeline events={timelineObjects} />
diff --git a/src/components/Timeline.css b/src/components/Timeline.css
index 5bf2118..a449c00 100644
--- a/src/components/Timeline.css
+++ b/src/components/Timeline.css
@@ -2,6 +2,7 @@
   width: 30%;
   margin: auto;
   text-align: left;
+
 }
 
 ul{
diff --git a/src/components/TimelineEvent.css b/src/components/TimelineEvent.css
index 91a9906..fd148c8 100644
--- a/src/components/TimelineEvent.css
+++ b/src/components/TimelineEvent.css
@@ -5,6 +5,7 @@
   border-bottom: 1px solid #E6ECF0;
   background-color: #FFF;
   margin-right: 2.5em;
+  width: 700px;
 }
 
 .timeline-event:hover {