Ports - Cloudy

src/App.js

@@ -1,20 +1,22 @@
 import React, { Component } from 'react';
 import './App.css';
 import timelineData from './data/timeline.json';
-
 import Timeline from './components/Timeline';
 
+const postEvents = () => {
+  return <Timeline events={timelineData["events"]} />
+};
+
 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>
         </header>
         <main className="App-main">
+          { postEvents() }
         </main>
       </div>
     );

src/components/Timeline.js

@@ -2,9 +2,20 @@ import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
-const Timeline = () => {
-  // Fill in your code here
-  return;
-}
+const postData = (events) => {
+  return events.map((post) => {
+    return (
+      <TimelineEvent person={ post.person } status={ post.status } timestamp={ post.timeStamp } />
+      )
+    })
+  }
+    const Timeline = (props) => {
+    return (
+      <section>
+        { postData(props.events) }
+      </section>
+    )
+  }
 
 export default Timeline;
+/* <p>key={i}</p> */

src/components/TimelineEvent.js

@@ -2,9 +2,24 @@ import React from 'react';
 import './TimelineEvent.css';
 import Timestamp from './Timestamp';
 
-const TimelineEvent = () => {
-  // Fill in your code here
-  return;
+const postTimestamp = (props) => {
+  return <Timestamp time={props} />
 }
 
-export default TimelineEvent;
+const TimelineEvent = (props) => {
+  return(
+    <section>
+      <h3>
+        Person: {props.person}
+      </h3>
+      <p>
+        Status: {props.status}
+      </p>
+      <p>
+        Timestamp: { postTimestamp(props.timestamp) }
+      </p>
+    </section>
+  ) 
+}
+
+export default TimelineEvent;

src/components/Timestamp.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import moment from 'moment';
+import './TimelineEvent.js';
 
 const Timestamp = (props) => {
   const time = moment(props.time);