Maja Octos

src/App.css

@@ -14,4 +14,4 @@
 .App-main {
   padding-top: 7rem;
   background-color: #E6ECF0;
-}
+}

src/App.js

@@ -6,15 +6,19 @@ import Timeline from './components/Timeline';
 
 class App extends Component {
   render() {
-    console.log(timelineData);
+    console.log(timelineData.events);
+
+    const allPosts = 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&apos;s Feed</h1>
         </header>
         <main className="App-main">
+
+        <Timeline events= { allPosts }/>
+
         </main>
       </div>
     );

src/components/Post.js

@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+import './Post.css';
+import Timestamp from './Timestamp';
+
+class TimelineEvent extends React.Component {
+  render() {
+    const person = this.props.person;
+    const status = this.props.status;
+    const timeStamp = this.props.timeStamp;
+
+    return(
+        <article className="timeline-event">
+          <span className="event-person"><strong>{person}</strong></span>
+          <span className="event-time"><Timestamp time= { timeStamp }/></span>
+          <p className="event-status">{status}</p>
+        </article>
+    )
+  }
+}
+
+export default TimelineEvent;

src/components/Timeline.css

@@ -1,5 +1,5 @@
 .timeline {
-  width: 30%;
+  width: 60%;
   margin: auto;
   text-align: left;
-}
+}

src/components/Timeline.js

@@ -1,11 +1,21 @@
 import React, { Component } from 'react';
 import './Timeline.css';
-import TimelineEvent from './TimelineEvent';
+import Post from './Post';
 
 class Timeline extends React.Component {
   render() {
-    // Fill in your code here
-    return;
+    const events = this.props.events;
+
+    const posts = events.map((event)=>{
+      return <Post person={event.person} status={event.status} time={event.timeStamp} />;
+    });
+
+    return(
+      <section className="timeline">
+        { posts }
+      </section>
+
+    )
   }
 }
 

src/index.css

@@ -2,4 +2,4 @@ body {
   margin: 0;
   padding: 0;
   font-family: 'Muli', sans-serif;
-}
+}