Ports - Heather

src/App.js

@@ -2,19 +2,24 @@ 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);
+
 
     // Customize the code below
-    return (
+    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>
     );

src/components/Timeline.js

@@ -2,9 +2,24 @@ 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.map((event, i) => {
+    return (
+
+      <TimelineEvent key={i}
+        person={event.person}
+        status={event.status}
+        timestamp={event.timeStamp} />
+
+    );
+  });
+
+  return (
+    <section className="timeline">
+      { events }
+    </section>
+  );
 }
 
 export default Timeline;

src/components/TimelineEvent.js

@@ -2,9 +2,27 @@ 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">
+
+      <div className="event-person">
+        {props.person}
+      </div>
+
+      <div className="event-status">
+        {props.status}
+      </div>
+
+      <div className="event-time">
+        <Timestamp time={props.timestamp} />
+      </div>
+
+    </section>
+
+  );
 }
 
 export default TimelineEvent;