ports - sav

src/App.js

@@ -1,20 +1,26 @@
 import React, { Component } from 'react';
 import './App.css';
 import timelineData from './data/timeline.json';
-
 import Timeline from './components/Timeline';
 
 class App extends Component {
   render() {
-    console.log(timelineData);
+    const timelineObjects = timelineData.events.map((timelineObject, i) => {
+      return {
+        time: timelineObject.timeStamp,
+        person: timelineObject.person,
+        status: timelineObject.status,
+      };
+    });
 
     // Customize the code below
     return (
       <div className="App">
         <header className="App-header">
-          <h1 className="App-title">Application title</h1>
+          <h1 className="App-title">Super Awesome Timeline</h1>
         </header>
         <main className="App-main">
+          <Timeline events={timelineObjects} />
         </main>
       </div>
     );

src/components/Timeline.css

@@ -2,4 +2,9 @@
   width: 30%;
   margin: auto;
   text-align: left;
+
+}
+
+ul{
+  list-style: none;
 }

src/components/Timeline.js

@@ -2,9 +2,19 @@ import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
-const Timeline = () => {
-  // Fill in your code here
-  return;
-}
+const Timeline = events => {
+  const TimelineEvents = events.events.map(eventObject => {
+    return (
+      <li>
+        <TimelineEvent
+          person={eventObject.person}
+          status={eventObject.status}
+          time={eventObject.time}
+        />
+      </li>
+    );
+  });
+  return <ul className="Timeline">{TimelineEvents}</ul>;
+};
 
 export default Timeline;

src/components/TimelineEvent.css

@@ -4,6 +4,8 @@
   padding: 0.5rem;
   border-bottom: 1px solid #E6ECF0;
   background-color: #FFF;
+  margin-right: 2.5em;
+  width: 700px;
 }
 
 .timeline-event:hover {
@@ -25,3 +27,7 @@
   margin-top: 0.5rem;
   text-align: right;
 }
+
+h1 {
+  font-size: 1em;
+}

src/components/TimelineEvent.js

@@ -2,9 +2,20 @@ import React from 'react';
 import './TimelineEvent.css';
 import Timestamp from './Timestamp';
 
-const TimelineEvent = () => {
-  // Fill in your code here
-  return;
-}
+const TimelineEvent = prop => {
+  return (
+    <section className="timeline-event">
+      <div className="event-person ">
+        <h1>{prop.person}</h1>
+      </div>
+      <div className="event-status ">
+        <p>{prop.status}</p>
+      </div>
+      <div className="event-time ">
+        <Timestamp time={prop.time} />
+      </div>
+    </section>
+  );
+};
 
 export default TimelineEvent;

src/components/Timestamp.js

@@ -1,14 +1,12 @@
 import React from 'react';
 import moment from 'moment';
 
-const Timestamp = (props) => {
+const Timestamp = props => {
   const time = moment(props.time);
   const absolute = time.format('MMMM Do YYYY, h:mm:ss a');
   const relative = time.fromNow();
 
-  return (
-    <span title={absolute}>{relative}</span>
-  );
+  return <span title={absolute}>{relative}</span>;
 };
 
 export default Timestamp;