From 8765da7ac8d4b53d296388e23fee7171e8f56713 Mon Sep 17 00:00:00 2001
From: amyesh <amyesh08@gmail.com>
Date: Mon, 10 Jun 2019 15:06:05 -0700
Subject: [PATCH 1/4] added props and rendering capability to TimelineEvent and
 hardcoded data into the App function

---
 src/App.js                      |  7 +++++--
 src/components/TimelineEvent.js | 13 ++++++++++---
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/App.js b/src/App.js
index 5f4cdf8..72cef26 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,7 @@
 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 +9,13 @@ 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 social media feed</h1>
         </header>
         <main className="App-main">
+          <TimelineEvent person="Shel Silverstein" status="A treehouse, a free house, a secret you and me house, a high up in the leafy branches cozy as can be house."/>
         </main>
       </div>
     );
@@ -22,3 +23,5 @@ class App extends Component {
 }
 
 export default App;
+
+{/* <Student fullName="Improved Ada" email="improved-ada@ada.co" /> */}
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index 9079165..46aba6f 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -2,9 +2,16 @@ import React from 'react';
 import './TimelineEvent.css';
 import Timestamp from './Timestamp';
 
-const TimelineEvent = () => {
-  // Fill in your code here
-  return;
+const TimelineEvent = (props) => {
+  return (
+    <section>
+      <span><strong>{ props.person }</strong></span>
+      <span>{ <Timestamp /> }</span>
+      <p>
+        { props.status }
+      </p>
+    </section>
+  );
 }
 
 export default TimelineEvent;

From 328790ceeaa063efcd750ffcccf6afd3d5378da2 Mon Sep 17 00:00:00 2001
From: amyesh <amyesh08@gmail.com>
Date: Mon, 10 Jun 2019 16:02:41 -0700
Subject: [PATCH 2/4] implemented timeline event display in app and displayed
 correct timestamp formatting

---
 src/App.js                      |  9 +++------
 src/components/Timeline.js      | 27 +++++++++++++++++++++++----
 src/components/TimelineEvent.js |  4 ++--
 3 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/src/App.js b/src/App.js
index 72cef26..ebf25ec 100644
--- a/src/App.js
+++ b/src/App.js
@@ -7,21 +7,18 @@ import Timeline from './components/Timeline';
 
 class App extends Component {
   render() {
-    console.log(timelineData);
-
+    
     return (
       <div className="App">
         <header className="App-header">
           <h1 className="App-title">Ada Lovelace's social media feed</h1>
         </header>
         <main className="App-main">
-          <TimelineEvent person="Shel Silverstein" status="A treehouse, a free house, a secret you and me house, a high up in the leafy branches cozy as can be house."/>
+          <Timeline events={ timelineData.events } />
         </main>
       </div>
     );
   }
 }
 
-export default App;
-
-{/* <Student fullName="Improved Ada" email="improved-ada@ada.co" /> */}
+export default App;
\ No newline at end of file
diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index 624d4ec..b40e3f9 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -2,9 +2,28 @@ import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
-const Timeline = () => {
-  // Fill in your code here
-  return;
+const Timeline = (props) => {
+
+  const events = props.events
+
+  const TimelineEventComponents = events.map( (event, i) => {
+    return (
+      <li key={i}>
+        <TimelineEvent 
+          person={ event.person }
+          status={ event.status }
+          timeStamp={ event.timeStamp }/>
+      </li>
+    );
+  });
+
+  return (
+    <section>
+    <ul>
+      { TimelineEventComponents }
+    </ul>
+  </section>
+  );
 }
 
-export default Timeline;
+export default Timeline;
\ No newline at end of file
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index 46aba6f..32740ef 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -4,9 +4,9 @@ import Timestamp from './Timestamp';
 
 const TimelineEvent = (props) => {
   return (
-    <section>
+    <section class="timeline-event">
       <span><strong>{ props.person }</strong></span>
-      <span>{ <Timestamp /> }</span>
+      <span><Timestamp time={ props.timeStamp } /></span>
       <p>
         { props.status }
       </p>

From 32ffdb11244f283434d724be42adfcc55174608c Mon Sep 17 00:00:00 2001
From: amyesh <amyesh08@gmail.com>
Date: Mon, 10 Jun 2019 16:13:03 -0700
Subject: [PATCH 3/4] added styling classes

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

diff --git a/src/components/Timeline.css b/src/components/Timeline.css
index e31f946..b612030 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/TimelineEvent.css b/src/components/TimelineEvent.css
index ea6407a..d9d1fda 100644
--- a/src/components/TimelineEvent.css
+++ b/src/components/TimelineEvent.css
@@ -18,6 +18,7 @@
 
 .event-status {
   grid-area: 2 / 1 / span 1 / -1;
+  word-break: break-all;
 }
 
 .event-time {
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index 32740ef..9728873 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -4,10 +4,10 @@ import Timestamp from './Timestamp';
 
 const TimelineEvent = (props) => {
   return (
-    <section class="timeline-event">
-      <span><strong>{ props.person }</strong></span>
-      <span><Timestamp time={ props.timeStamp } /></span>
-      <p>
+    <section class="timeline timeline-event">
+      <span class="event-person">{ props.person }</span>
+      <span class="event-time"><Timestamp time={ props.timeStamp } /></span>
+      <p class="event-status">
         { props.status }
       </p>
     </section>

From 8924cd6741681055519e4bd0cc098c3296ae1868 Mon Sep 17 00:00:00 2001
From: amyesh <amyesh08@gmail.com>
Date: Mon, 10 Jun 2019 16:30:25 -0700
Subject: [PATCH 4/4] replace class with className

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

diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index 9728873..0072aed 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -4,10 +4,10 @@ import Timestamp from './Timestamp';
 
 const TimelineEvent = (props) => {
   return (
-    <section class="timeline timeline-event">
-      <span class="event-person">{ props.person }</span>
-      <span class="event-time"><Timestamp time={ props.timeStamp } /></span>
-      <p class="event-status">
+    <section className="timeline timeline-event">
+      <span className="event-person">{ props.person }</span>
+      <span className="event-time"><Timestamp time={ props.timeStamp } /></span>
+      <p className="event-status">
         { props.status }
       </p>
     </section>