Ports - Myriam

src/App.js

@@ -4,17 +4,22 @@ import timelineData from './data/timeline.json';
 
 import Timeline from './components/Timeline';
 
+
 class App extends Component {
+
   render() {
-    console.log(timelineData);
 
-    // Customize the code below
+    const timeLineDataArray = timelineData.events
+
+
     return (
       <div className="App">
         <header className="App-header">
           <h1 className="App-title">Application title</h1>
         </header>
         <main className="App-main">
+
+          <Timeline events={timeLineDataArray}/>
         </main>
       </div>
     );

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 timeLineEventsData = props.events.map((user, index) => {
+      return (<TimelineEvent key= {index} name={user.person} status={user.status} timeStamp={user.timeStamp}/>)
+    });
+
+  return (
+    <section className="timeline">
+        {timeLineEventsData}
+    </section>
+  )
 }
 
 export default Timeline;

src/components/TimelineEvent.css

@@ -18,6 +18,7 @@
 
 .event-status {
   grid-area: 2 / 1 / span 1 / -1;
+  word-break: break-all;
 }
 
 .event-time {

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;

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>
   );
 };