Ports - Ngoc

src/App.js

@@ -3,18 +3,34 @@ import './App.css';
 import timelineData from './data/timeline.json';
 
 import Timeline from './components/Timeline';
+import TimelineEvent from './components/TimelineEvent';
 
 class App extends Component {
   render() {
     console.log(timelineData);
-
+    const timelineComponent = timelineData["events"].map((post,i) => {
+      return (
+        <li key={i}>
+          <TimelineEvent 
+            person={post.person}
+            timeStamp={post.timeStamp}
+            status={post.status}
+          />
+        </li>
+      )
+    }
+    )
+    const data = timelineData["events"]
     // Customize the code below
     return (
       <div className="App">
         <header className="App-header">
-          <h1 className="App-title">Application title</h1>
+          <h1 className="App-title">Ada's Social Media Feed</h1>
         </header>
         <main className="App-main">
+          <ul>
+            {timelineComponent}
+          </ul>
         </main>
       </div>
     );

src/components/Timeline.js

@@ -2,9 +2,16 @@ import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
-const Timeline = () => {
-  // Fill in your code here
-  return;
+const Timeline = (props) => {
+  return (
+    <section>
+      <h4>
+        {props.person}
+      </h4>
+      <p> {props.timeStamp}</p>
+      <p> {props.status}</p>
+    </section>
+  );
 }
 
 export default Timeline;

src/components/TimelineEvent.js

@@ -2,9 +2,21 @@ import React from 'react';
 import './TimelineEvent.css';
 import Timestamp from './Timestamp';
 
-const TimelineEvent = () => {
-  // Fill in your code here
-  return;
+const TimelineEvent = (props) => {
+
+  return (
+    <section>
+      <h4>
+        {props.person}
+      </h4>
+      <p>
+        <Timestamp 
+          time={props.timeStamp}
+        />
+      </p>
+      <p> {props.status}</p>
+    </section>
+  );
 }
 
 export default TimelineEvent;

src/components/Timestamp.js

@@ -2,7 +2,7 @@ import React from 'react';
 import moment from 'moment';
 
 const Timestamp = (props) => {
-  const time = moment(props.time);
+  const time = moment(props);
   const absolute = time.format('MMMM Do YYYY, h:mm:ss a');
   const relative = time.fromNow();