Ports - Faiza

src/App.css

@@ -6,6 +6,7 @@
   width: 100%;
 }
 
+
 .App-title {
   text-align: center;
   font-size: 1.5em;
@@ -15,3 +16,14 @@
   padding-top: 7rem;
   background-color: #E6ECF0;
 }
+
+ul{
+  list-style: none;
+  width: 50.5%;
+  padding-left: 18em;
+}
+
+li{
+  padding: 10;
+  background: white;
+} 

src/App.js

@@ -4,17 +4,23 @@ import timelineData from './data/timeline.json';
 
 import Timeline from './components/Timeline';
 
+import TimelineEvent from './components/TimelineEvent';
+import Timestamp from './components/Timestamp';
+
 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">{timelineData.person}'s Social Media Feed</h1>
         </header>
         <main className="App-main">
+          <ul>
+
+            <Timeline eventProps={timelineData.events}/>
+          </ul>
         </main>
       </div>
     );

src/components/Timeline.js

@@ -2,9 +2,25 @@ import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
-const Timeline = () => {
-  // Fill in your code here
-  return;
+
+
+const Timeline = (props) => {
+  const mappedTimeline = props.eventProps.map((event, index) => {
+    return (
+      <li key={index}>
+
+        <TimelineEvent person={event.person}
+          status={event.status}
+          timeStamp={event.timeStamp}
+        />
+      </li>
+    );
+  });
+  return (
+    <section>
+      {mappedTimeline}
+    </section>
+  );
 }
 
 export default Timeline;

src/components/TimelineEvent.js

@@ -1,10 +1,23 @@
 import React from 'react';
 import './TimelineEvent.css';
 import Timestamp from './Timestamp';
+import Timeline from './Timeline';
 
-const TimelineEvent = () => {
-  // Fill in your code here
-  return;
+
+const TimelineEvent = (props) => {
+  let time = <Timestamp time= {props.timeStamp} />
+
+  return(
+
+    <section>
+      <li>
+        <p className="event-style">{props.person}</p>
+        <p className="event-style">{props.status}</p>
+        <p className="event-style">{time}</p>
+
+      </li>
+    </section>
+  );
 }
 
 export default TimelineEvent;