From 6b3b7c65c17c952f463225df696205574f017c8c Mon Sep 17 00:00:00 2001
From: MyriamWD <myriam.waldend@gmail.com>
Date: Tue, 11 Jun 2019 10:48:04 -0700
Subject: [PATCH 1/2] submitting react timeline

---
 src/App.js                      |  8 ++++++--
 src/components/Timeline.js      | 15 ++++++++++++---
 src/components/TimelineEvent.js | 12 +++++++++---
 src/components/Timestamp.js     |  2 +-
 4 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/src/App.js b/src/App.js
index 5f4cdf8..769b9ed 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,17 +4,21 @@ import timelineData from './data/timeline.json';
 
 import Timeline from './components/Timeline';
 
+
 class App extends Component {
+
   render() {
-    console.log(timelineData);
 
-    // Customize the code below
+    const dataArray = timelineData.events
+    const varHoldsTimeEvents = Timeline(dataArray); 
+
     return (
       <div className="App">
         <header className="App-header">
           <h1 className="App-title">Application title</h1>
         </header>
         <main className="App-main">
+          {varHoldsTimeEvents}
         </main>
       </div>
     );
diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index 624d4ec..b639988 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -2,9 +2,18 @@ import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
-const Timeline = () => {
-  // Fill in your code here
-  return;
+
+const Timeline = (props) => {
+
+    const varHoldsData = props.map((user, index) => {
+      return (<TimelineEvent key= {index} name={user.person} status={user.status} timeStamp={user.timeStamp}/>)
+    });
+
+  return (
+    <section className="timeline">
+        {varHoldsData}
+    </section>
+  )
 }
 
 export default Timeline;
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index 9079165..8690572 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -2,9 +2,15 @@ import React from 'react';
 import './TimelineEvent.css';
 import Timestamp from './Timestamp';
 
-const TimelineEvent = () => {
-  // Fill in your code here
-  return;
+const TimelineEvent = (props) => {
+
+  return(
+    <section className="timeline-event">
+      <h3 className="event-person">{props.name}</h3>
+      <p className="event-status">{props.status}</p>
+      <Timestamp time={props.timeStamp}/>
+    </section>
+  )
 }
 
 export default TimelineEvent;
diff --git a/src/components/Timestamp.js b/src/components/Timestamp.js
index 9a39231..073178d 100644
--- a/src/components/Timestamp.js
+++ b/src/components/Timestamp.js
@@ -7,7 +7,7 @@ const Timestamp = (props) => {
   const relative = time.fromNow();
 
   return (
-    <span title={absolute}>{relative}</span>
+    <span className="event-time" title={absolute}>{relative}</span>
   );
 };
 

From bb8e3ee78a3c8282f19e69b3ece1b003c8e9be4d Mon Sep 17 00:00:00 2001
From: MyriamWD <myriam.waldend@gmail.com>
Date: Tue, 11 Jun 2019 11:30:01 -0700
Subject: [PATCH 2/2] passing events data to Timeline using JSX - improved
 variable names

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

diff --git a/src/App.js b/src/App.js
index 769b9ed..e0e9b3e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -9,8 +9,8 @@ class App extends Component {
 
   render() {
 
-    const dataArray = timelineData.events
-    const varHoldsTimeEvents = Timeline(dataArray); 
+    const timeLineDataArray = timelineData.events
+    
 
     return (
       <div className="App">
@@ -18,7 +18,8 @@ class App extends Component {
           <h1 className="App-title">Application title</h1>
         </header>
         <main className="App-main">
-          {varHoldsTimeEvents}
+        
+          <Timeline events={timeLineDataArray}/>
         </main>
       </div>
     );
diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index b639988..e5b06cc 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -5,13 +5,13 @@ import TimelineEvent from './TimelineEvent';
 
 const Timeline = (props) => {
 
-    const varHoldsData = props.map((user, index) => {
+    const timeLineEventsData = props.events.map((user, index) => {
       return (<TimelineEvent key= {index} name={user.person} status={user.status} timeStamp={user.timeStamp}/>)
     });
 
   return (
     <section className="timeline">
-        {varHoldsData}
+        {timeLineEventsData}
     </section>
   )
 }
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 {