From 584629dd26d359dfb7c9fc52c4f347ad91de192c Mon Sep 17 00:00:00 2001
From: Faiza Husain <faiza.ahsan1222@gmail.com>
Date: Mon, 10 Jun 2019 14:46:10 -0700
Subject: [PATCH 1/3] Hardcoded data shows up in app

---
 src/App.js                      |  7 ++++++-
 src/components/TimelineEvent.js | 23 ++++++++++++++++++++---
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/App.js b/src/App.js
index 5f4cdf8..c416494 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,6 +4,9 @@ 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);
@@ -12,9 +15,11 @@ class App extends Component {
     return (
       <div className="App">
         <header className="App-header">
-          <h1 className="App-title">Application title</h1>
+          <h1 className="App-title">Ada Lovelace's Social Media Feed</h1>
         </header>
         <main className="App-main">
+          <TimelineEvent person="Adele Goldberg" status="In Smalltalk, everything happens somewhere else" timestamp={Timestamp}/>
+          
         </main>
       </div>
     );
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index 9079165..7fb79fd 100644
--- a/src/components/TimelineEvent.js
+++ b/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 TimelineEvent = (props) => {
+  let time = <Timestamp time={new Date} />
+
+  return(
+    <section>
+      <h3>
+        <strong>
+          {props.person}
+        </strong>
+      </h3>
+      <h3>
+        <strong>
+          {time}
+        </strong>
+      </h3>
+      <h3>
+        {props.status}
+      </h3>
+    </section>
+  );
 }
 
 export default TimelineEvent;

From ee4fd68caf8eeb293102dacaf23ad996c4cbc6a6 Mon Sep 17 00:00:00 2001
From: Faiza Husain <faiza.ahsan1222@gmail.com>
Date: Mon, 10 Jun 2019 16:27:49 -0700
Subject: [PATCH 2/3] Completed Wave 2

---
 src/App.css                     | 10 ++++++++++
 src/App.js                      |  7 ++++---
 src/components/Timeline.js      | 22 +++++++++++++++++++---
 src/components/TimelineEvent.js | 24 ++++++++++--------------
 4 files changed, 43 insertions(+), 20 deletions(-)

diff --git a/src/App.css b/src/App.css
index e20270c..e2053aa 100644
--- a/src/App.css
+++ b/src/App.css
@@ -15,3 +15,13 @@
   padding-top: 7rem;
   background-color: #E6ECF0;
 }
+
+ul{
+  list-style: none;
+  
+}
+
+li{
+  padding: 10;
+  background: white;
+} 
diff --git a/src/App.js b/src/App.js
index c416494..f4e6a43 100644
--- a/src/App.js
+++ b/src/App.js
@@ -9,7 +9,6 @@ import Timestamp from './components/Timestamp';
 
 class App extends Component {
   render() {
-    console.log(timelineData);
 
     // Customize the code below
     return (
@@ -18,8 +17,10 @@ class App extends Component {
           <h1 className="App-title">Ada Lovelace's Social Media Feed</h1>
         </header>
         <main className="App-main">
-          <TimelineEvent person="Adele Goldberg" status="In Smalltalk, everything happens somewhere else" timestamp={Timestamp}/>
-          
+          <ul>
+
+            <Timeline eventProps={timelineData.events}/>
+          </ul>
         </main>
       </div>
     );
diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index 624d4ec..5ade8d1 100644
--- a/src/components/Timeline.js
+++ b/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;
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index 7fb79fd..7a8d5cd 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -1,25 +1,21 @@
 import React from 'react';
 import './TimelineEvent.css';
 import Timestamp from './Timestamp';
+import Timeline from './Timeline';
+
 
 const TimelineEvent = (props) => {
-  let time = <Timestamp time={new Date} />
+  // let time = <Timestamp time= {Date.now()} />
 
   return(
+    
     <section>
-      <h3>
-        <strong>
-          {props.person}
-        </strong>
-      </h3>
-      <h3>
-        <strong>
-          {time}
-        </strong>
-      </h3>
-      <h3>
-        {props.status}
-      </h3>
+      <li>
+        <p className="event-style">{props.person}</p>
+        <p className="event-style">{props.status}</p>
+        <p className="event-style">{props.timeStamp}</p>
+
+      </li>
     </section>
   );
 }

From c8e1b47f572c9f74f3f3eb86f40a87d8db1e010f Mon Sep 17 00:00:00 2001
From: Faiza Husain <faiza.ahsan1222@gmail.com>
Date: Tue, 11 Jun 2019 11:10:46 -0700
Subject: [PATCH 3/3] Added CSS

---
 src/App.css                     | 4 +++-
 src/App.js                      | 2 +-
 src/components/TimelineEvent.js | 4 ++--
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/App.css b/src/App.css
index e2053aa..ae01abe 100644
--- a/src/App.css
+++ b/src/App.css
@@ -6,6 +6,7 @@
   width: 100%;
 }
 
+
 .App-title {
   text-align: center;
   font-size: 1.5em;
@@ -18,7 +19,8 @@
 
 ul{
   list-style: none;
-  
+  width: 50.5%;
+  padding-left: 18em;
 }
 
 li{
diff --git a/src/App.js b/src/App.js
index f4e6a43..5ce71af 100644
--- a/src/App.js
+++ b/src/App.js
@@ -14,7 +14,7 @@ class App extends Component {
     return (
       <div className="App">
         <header className="App-header">
-          <h1 className="App-title">Ada Lovelace's Social Media Feed</h1>
+          <h1 className="App-title">{timelineData.person}'s Social Media Feed</h1>
         </header>
         <main className="App-main">
           <ul>
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index 7a8d5cd..f845f69 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -5,7 +5,7 @@ import Timeline from './Timeline';
 
 
 const TimelineEvent = (props) => {
-  // let time = <Timestamp time= {Date.now()} />
+  let time = <Timestamp time= {props.timeStamp} />
 
   return(
     
@@ -13,7 +13,7 @@ const TimelineEvent = (props) => {
       <li>
         <p className="event-style">{props.person}</p>
         <p className="event-style">{props.status}</p>
-        <p className="event-style">{props.timeStamp}</p>
+        <p className="event-style">{time}</p>
 
       </li>
     </section>