From a2c103591c05df78be225debf39e425e0e8c9950 Mon Sep 17 00:00:00 2001
From: Vera <lizeth.veraro@outlook.com>
Date: Mon, 13 Apr 2020 17:47:11 -0700
Subject: [PATCH 1/7] Passing the timeData as a params, .person(title) ana
 timeline,data.events(array of events)

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

diff --git a/src/App.js b/src/App.js
index 76d86d2..4437d26 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,17 +3,19 @@ import logo from './logo.svg';
 import './App.css';
 import timelineData from './data/timeline.json';
 import Timeline from './components/Timeline';
+// import TimelineEvent from './components/TimelineEvent';
 
 function App() {
-  console.log(timelineData);
+  // 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">{timelineData.person}' social media feed</h1>
       </header>
       <main className="App-main">
+        <Timeline eventsData={timelineData.events} />
       </main>
     </div>
   );

From da2951bda102614dc387fb4b475eaa82755ca3b7 Mon Sep 17 00:00:00 2001
From: Vera <lizeth.veraro@outlook.com>
Date: Mon, 13 Apr 2020 17:49:09 -0700
Subject: [PATCH 2/7] Got the props from App(Parent). Arrow funtion, iterate
 over the data(events) return each event

---
 src/components/Timeline.js | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index 463eb3e..cd07854 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -2,9 +2,21 @@ import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
-const Timeline = () => {
-  
-  return;
+const Timeline = (props) => {
+  const events = props.eventsData.map((event)=> {
+    return(
+      <TimelineEvent
+        person={event.person}
+        status={event.status}
+        timeStamp={event.timeStamp}
+      />
+    );
+  });
+  return(
+    <p className="timeline">
+     {events}
+    </p>
+  );
 }
 
 export default Timeline;
\ No newline at end of file

From 47b687c9a6d4bb538bec54e6d674f56aad78c05f Mon Sep 17 00:00:00 2001
From: Vera <lizeth.veraro@outlook.com>
Date: Mon, 13 Apr 2020 17:51:03 -0700
Subject: [PATCH 3/7] get the props from timeline(parent)return person, and
 status. Passing to TimeStamp child time to get the format span back

---
 src/components/TimelineEvent.js | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index cc476c2..0b3fff6 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 = () => {
-  
-  return;
+const TimelineEvent = (props) => {
+  console.log(props)
+
+  return( 
+    <div className="timeline-event">
+      <h3 className="event-person">{props.person}</h3>
+      <p className="event-time"><Timestamp time={props.timeStamp} /></p>
+      <p className="event-status">{props.status}</p>
+    </div>
+
+  );
 }
 
 export default TimelineEvent;
\ No newline at end of file

From 900f8e434e634c5ac94988d13d9b36cca6ea4fdc Mon Sep 17 00:00:00 2001
From: Vera <lizeth.veraro@outlook.com>
Date: Mon, 13 Apr 2020 18:00:50 -0700
Subject: [PATCH 4/7] Change with 80%

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

diff --git a/src/components/Timeline.css b/src/components/Timeline.css
index e31f946..ff29593 100644
--- a/src/components/Timeline.css
+++ b/src/components/Timeline.css
@@ -1,5 +1,5 @@
 .timeline {
-  width: 30%;
+  width: 80%;
   margin: auto;
   text-align: left;
 }

From d478c16b1c938892f53e12eb2bf5af57a2ba29c5 Mon Sep 17 00:00:00 2001
From: Vera <lizeth.veraro@outlook.com>
Date: Mon, 13 Apr 2020 18:01:35 -0700
Subject: [PATCH 5/7] Change <p> for <ul> wrapper needed

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

diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index cd07854..0cf2344 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -9,13 +9,14 @@ const Timeline = (props) => {
         person={event.person}
         status={event.status}
         timeStamp={event.timeStamp}
+        key={event.person}
       />
     );
   });
   return(
-    <p className="timeline">
+    <ul className="timeline">
      {events}
-    </p>
+    </ul>
   );
 }
 

From 445904afc00b3bbabbaf91fe9e3e82a80986411b Mon Sep 17 00:00:00 2001
From: Vera <lizeth.veraro@outlook.com>
Date: Wed, 15 Apr 2020 09:55:40 -0700
Subject: [PATCH 6/7] Adjusting text deco for the bullets on list and wrap the
 text inside container .timeline

---
 src/components/Timeline.css | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/Timeline.css b/src/components/Timeline.css
index ff29593..87888d0 100644
--- a/src/components/Timeline.css
+++ b/src/components/Timeline.css
@@ -1,5 +1,15 @@
 .timeline {
-  width: 80%;
+  width: 40%;
   margin: auto;
   text-align: left;
+  
 }
+
+.timeline li {
+  list-style-type: none;
+
+}
+
+.event-status {
+  word-wrap: break-word;
+}
\ No newline at end of file

From 823a23862b3b8c2a4c32a35ccd08aa289ad64141 Mon Sep 17 00:00:00 2001
From: Vera <lizeth.veraro@outlook.com>
Date: Wed, 15 Apr 2020 09:56:53 -0700
Subject: [PATCH 7/7] Adding HTML li to each TimelineEvent, also change the key
 value, to a unique index value

---
 src/components/Timeline.js | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index 0cf2344..49c8ffb 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -3,14 +3,15 @@ import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
 const Timeline = (props) => {
-  const events = props.eventsData.map((event)=> {
+  const events = props.eventsData.map((event, i)=> {
     return(
-      <TimelineEvent
-        person={event.person}
-        status={event.status}
-        timeStamp={event.timeStamp}
-        key={event.person}
-      />
+      <li key={i}>
+        <TimelineEvent
+          person={event.person}
+          status={event.status}
+          timeStamp={event.timeStamp}
+        />
+      </li>
     );
   });
   return(