Ports - Amy M

src/App.js

@@ -1,24 +1,24 @@
 import React, { Component } from 'react';
 import './App.css';
 import timelineData from './data/timeline.json';
+import TimelineEvent from './components/TimelineEvent'
 
 import Timeline from './components/Timeline';
 
 class App extends Component {
   render() {
-    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">Ada Lovelace's social media feed</h1>
         </header>
         <main className="App-main">
+          <Timeline events={ timelineData.events } />
         </main>
       </div>
     );
   }
 }
 
-export default App;
+export default App;

src/components/Timeline.css

@@ -3,3 +3,7 @@
   margin: auto;
   text-align: left;
 }
+
+ul {
+  list-style: none;
+}

src/components/Timeline.js

@@ -2,9 +2,28 @@ 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
+
+  const TimelineEventComponents = events.map( (event, i) => {
+    return (
+      <li key={i}>
+        <TimelineEvent 
+          person={ event.person }
+          status={ event.status }
+          timeStamp={ event.timeStamp }/>
+      </li>
+    );
+  });
+
+  return (
+    <section>
+    <ul>
+      { TimelineEventComponents }
+    </ul>
+  </section>
+  );
 }
 
-export default Timeline;
+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,16 @@ 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 timeline-event">
+      <span className="event-person">{ props.person }</span>
+      <span className="event-time"><Timestamp time={ props.timeStamp } /></span>
+      <p className="event-status">
+        { props.status }
+      </p>
+    </section>
+  );
 }
 
 export default TimelineEvent;