Ports - Mina

src/App.js

@@ -3,18 +3,19 @@ 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);
 
-    // 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 Feed</h1>
         </header>
         <main className="App-main">
+          <TimelineEvent person="Mina" status="angry" timestamp="2018-05-18T22:12:03Z"/>
         </main>
       </div>
     );

src/components/Timeline.js

@@ -3,8 +3,16 @@ import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
 const Timeline = () => {
-  // Fill in your code here
-  return;
-}
+  // const timelinePosts = events.map( (post, i) => {
+    // return (
+    //   <li key={i}>
+    //     <Timeline
+    //       person={ post.person }
+    //       status={ post.status }
+    //       timeStamp={ post.Timestamp } />
+    //   </li>
+  //   );
+  // });
+};
 
 export default Timeline;

src/components/TimelineEvent.js

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