From de5c44e13a0b0a145f808dbd180f7355e2973a39 Mon Sep 17 00:00:00 2001
From: Margaret Finnan <msfinnan@gmail.com>
Date: Mon, 10 Jun 2019 15:10:37 -0700
Subject: [PATCH 1/3] added functionality to show hard coded social media
 posts, time stamp functionality not working yet

---
 src/App.js                      | 10 +++++++++-
 src/components/TimelineEvent.js | 16 ++++++++++++++--
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/App.js b/src/App.js
index 5f4cdf8..163a136 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,6 +3,8 @@ import './App.css';
 import timelineData from './data/timeline.json';
 
 import Timeline from './components/Timeline';
+import TimelineEvent from './components/TimelineEvent';
+import Timestamp from './components/Timestamp';
 
 class App extends Component {
   render() {
@@ -12,9 +14,15 @@ class App extends Component {
     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">
+          <section>
+            <TimelineEvent name="Kiko" status="I'm hungry" timestamp={Timestamp("2018-05-18T22:12:03Z")} />
+          </section>
+          <section>
+            <TimelineEvent name="Pepper" status="I'm hungry too" timestamp={Timestamp("2018-05-18T22:19:40Z")} />
+          </section>
         </main>
       </div>
     );
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index 9079165..2351222 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -2,9 +2,21 @@ import React from 'react';
 import './TimelineEvent.css';
 import Timestamp from './Timestamp';
 
-const TimelineEvent = () => {
+const TimelineEvent = (props) => {
   // Fill in your code here
-  return;
+  return(
+    <div className="timeline-event">
+      <p className="event-person">
+        {props.name}
+      </p>
+      <p className="event-status">
+        {props.status}
+      </p>
+      <p className="event-timestamp">
+        {props.timestamp}
+      </p>
+    </div>
+  );
 }
 
 export default TimelineEvent;

From 773de385b5dee4e29c3b0e8a80de1f2137637219 Mon Sep 17 00:00:00 2001
From: Margaret Finnan <msfinnan@gmail.com>
Date: Mon, 10 Jun 2019 15:56:33 -0700
Subject: [PATCH 2/3] timestamp functionality working

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

diff --git a/src/App.js b/src/App.js
index 163a136..56721b0 100644
--- a/src/App.js
+++ b/src/App.js
@@ -18,10 +18,10 @@ class App extends Component {
         </header>
         <main className="App-main">
           <section>
-            <TimelineEvent name="Kiko" status="I'm hungry" timestamp={Timestamp("2018-05-18T22:12:03Z")} />
+            <TimelineEvent person="Kiko" status="I'm hungry" time='2019-05-18T22:12:03Z' />
           </section>
           <section>
-            <TimelineEvent name="Pepper" status="I'm hungry too" timestamp={Timestamp("2018-05-18T22:19:40Z")} />
+            <TimelineEvent person="Pepper" status="I'm hungry too" time='2019-05-18T22:19:40Z' />
           </section>
         </main>
       </div>
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index 2351222..ddee080 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -4,18 +4,19 @@ import Timestamp from './Timestamp';
 
 const TimelineEvent = (props) => {
   // Fill in your code here
+  // const time = props.time
   return(
-    <div className="timeline-event">
+    <section className="timeline-event">
       <p className="event-person">
-        {props.name}
+        {props.person}
       </p>
       <p className="event-status">
         {props.status}
       </p>
       <p className="event-timestamp">
-        {props.timestamp}
+        <Timestamp time={props.time} />
       </p>
-    </div>
+    </section>
   );
 }
 

From b79d72a733f1d140c34083269d7532cb671990bd Mon Sep 17 00:00:00 2001
From: Margaret Finnan <msfinnan@gmail.com>
Date: Mon, 10 Jun 2019 17:05:33 -0700
Subject: [PATCH 3/3] reads json data

---
 src/App.js                      |  7 +------
 src/components/Timeline.js      | 21 ++++++++++++++++++---
 src/components/TimelineEvent.js | 12 ++++++------
 3 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/src/App.js b/src/App.js
index 56721b0..b34a366 100644
--- a/src/App.js
+++ b/src/App.js
@@ -17,12 +17,7 @@ class App extends Component {
           <h1 className="App-title">Ada Lovelace's social media feed</h1>
         </header>
         <main className="App-main">
-          <section>
-            <TimelineEvent person="Kiko" status="I'm hungry" time='2019-05-18T22:12:03Z' />
-          </section>
-          <section>
-            <TimelineEvent person="Pepper" status="I'm hungry too" time='2019-05-18T22:19:40Z' />
-          </section>
+          <Timeline events={timelineData.events} />
         </main>
       </div>
     );
diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index 624d4ec..782bb6a 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -2,9 +2,24 @@ 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.map((event, i) => {
+    return (
+      <TimelineEvent key={i}
+        person={event.person}
+        status={event.status}
+        time={event.timeStamp} />
+    );
+  });
+
+  return (
+    <section>
+
+      {events}
+
+    </section>
+  );
 }
 
 export default Timeline;
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index ddee080..df0a0a5 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -7,15 +7,15 @@ const TimelineEvent = (props) => {
   // const time = props.time
   return(
     <section className="timeline-event">
-      <p className="event-person">
+      <div className="event-person">
         {props.person}
-      </p>
-      <p className="event-status">
+      </div>
+      <div className="event-status">
         {props.status}
-      </p>
-      <p className="event-timestamp">
+      </div>
+      <div className="event-timestamp">
         <Timestamp time={props.time} />
-      </p>
+      </div>
     </section>
   );
 }