From a51cdc7e19444f4d1cf2593a3130ec26c6a071e6 Mon Sep 17 00:00:00 2001
From: laneia <laneiamurray@gmail.com>
Date: Tue, 11 Jun 2019 09:37:46 -0700
Subject: [PATCH 1/9] playing around with intial setup

---
 src/App.js                      | 1 +
 src/components/Timeline.js      | 5 +++--
 src/components/TimelineEvent.js | 8 ++++++--
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/App.js b/src/App.js
index 5f4cdf8..24c66b3 100644
--- a/src/App.js
+++ b/src/App.js
@@ -16,6 +16,7 @@ class App extends Component {
         </header>
         <main className="App-main">
         </main>
+        <Timeline />
       </div>
     );
   }
diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index 624d4ec..913f279 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -3,8 +3,9 @@ import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
 const Timeline = () => {
-  // Fill in your code here
-  return;
+  return (
+    	      <TimelineEvent />
+    );
 }
 
 export default Timeline;
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index 9079165..023e046 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -3,8 +3,12 @@ import './TimelineEvent.css';
 import Timestamp from './Timestamp';
 
 const TimelineEvent = () => {
-  // Fill in your code here
-  return;
+  return (
+    <section>
+      <p>Laneia</p>
+      <p>Mushroom hunting</p>
+    </section>
+  );
 }
 
 export default TimelineEvent;

From 754125094d26440d688edecd4ba710aa10a7cd7a Mon Sep 17 00:00:00 2001
From: laneia <laneiamurray@gmail.com>
Date: Tue, 11 Jun 2019 09:39:11 -0700
Subject: [PATCH 2/9] add timestamp to display

---
 src/components/TimelineEvent.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index 023e046..cc90401 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -6,6 +6,7 @@ const TimelineEvent = () => {
   return (
     <section>
       <p>Laneia</p>
+      <Timestamp />
       <p>Mushroom hunting</p>
     </section>
   );

From 6d8e6c2966bfdddac72cf40db5a16b3b0b8ea57f Mon Sep 17 00:00:00 2001
From: laneia <laneiamurray@gmail.com>
Date: Tue, 11 Jun 2019 09:41:48 -0700
Subject: [PATCH 3/9] add props to pass data

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

diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index 913f279..17093ea 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -4,8 +4,11 @@ import TimelineEvent from './TimelineEvent';
 
 const Timeline = () => {
   return (
-    	      <TimelineEvent />
-    );
+    <TimelineEvent	      
+      person="laneia"
+      status="mushroom hunting"
+    />
+  );
 }
 
 export default Timeline;
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index cc90401..ee79100 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -5,9 +5,9 @@ import Timestamp from './Timestamp';
 const TimelineEvent = () => {
   return (
     <section>
-      <p>Laneia</p>
+      <p>{person}</p>
       <Timestamp />
-      <p>Mushroom hunting</p>
+      <p>{status}</p>
     </section>
   );
 }

From 53917886d114a0f3e5efafcc64382745395d6cf7 Mon Sep 17 00:00:00 2001
From: laneia <laneiamurray@gmail.com>
Date: Tue, 11 Jun 2019 09:55:30 -0700
Subject: [PATCH 4/9] adding json data

---
 src/App.js                      |  5 +++--
 src/components/Timeline.js      | 22 +++++++++++++++++-----
 src/components/TimelineEvent.js | 22 ++++++++++++++--------
 3 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/src/App.js b/src/App.js
index 24c66b3..d579504 100644
--- a/src/App.js
+++ b/src/App.js
@@ -12,11 +12,12 @@ class App extends Component {
     return (
       <div className="App">
         <header className="App-header">
-          <h1 className="App-title">Application title</h1>
+          <h1 className="App-title">Timeline</h1>
         </header>
         <main className="App-main">
-        </main>
         <Timeline />
+        </main>
+        
       </div>
     );
   }
diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index 17093ea..aa2c0a0 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -1,14 +1,26 @@
 import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
+import data from '../data/timeline.json';
 
 const Timeline = () => {
+  render() {
+    const events = data.events;
+
+    const timelineEventComponents = events.map((event) => {
+      return (
+        <TimelineEvent
+          key={event.timeStamp}
+          person={event.person}
+          status={event.status}
+          timeStamp={event.timeStamp}
+        />
+      );
+    });
+
   return (
-    <TimelineEvent	      
-      person="laneia"
-      status="mushroom hunting"
-    />
+    <div>{timelineEventComponents}</div>
   );
-}
+}}
 
 export default Timeline;
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index ee79100..2313876 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -3,13 +3,19 @@ import './TimelineEvent.css';
 import Timestamp from './Timestamp';
 
 const TimelineEvent = () => {
-  return (
-    <section>
-      <p>{person}</p>
-      <Timestamp />
-      <p>{status}</p>
-    </section>
-  );
-}
+  render() {
+    const person = this.props.person;
+    const timeStamp = this.props.timeStamp;
+    const status = this.props.status;
+
+
+    return (	    
+      <section>	      
+        <p>{person}</p>
+        <p>{timeStamp}</p>
+        <p>{status}</p>
+      </section> 
+    );
+}}
 
 export default TimelineEvent;

From 8038d93c0f43079bbb26d40ba270ec1c3018bcec Mon Sep 17 00:00:00 2001
From: laneia <laneiamurray@gmail.com>
Date: Tue, 11 Jun 2019 09:58:09 -0700
Subject: [PATCH 5/9] adding css class names

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

diff --git a/src/components/Timeline.css b/src/components/Timeline.css
index e31f946..a9e8a47 100644
--- a/src/components/Timeline.css
+++ b/src/components/Timeline.css
@@ -1,5 +1,5 @@
 .timeline {
-  width: 30%;
+  width: 70%;
   margin: auto;
   text-align: left;
 }
diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index aa2c0a0..691e712 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -19,7 +19,7 @@ const Timeline = () => {
     });
 
   return (
-    <div>{timelineEventComponents}</div>
+    <div className="timeline">{timelineEventComponents}</div>
   );
 }}
 
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index 2313876..bee4dbf 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -10,10 +10,10 @@ const TimelineEvent = () => {
 
 
     return (	    
-      <section>	      
-        <p>{person}</p>
-        <p>{timeStamp}</p>
-        <p>{status}</p>
+      <section className="timeline">	      
+        <p className="event-person">{person}</p>
+        <p className="event-time">{timeStamp}</p>
+        <p className="event-status">{status}</p>
       </section> 
     );
 }}

From a93ccd9b84aa818d0507fbf8b2930a7ceaddb9d9 Mon Sep 17 00:00:00 2001
From: laneia <laneiamurray@gmail.com>
Date: Tue, 11 Jun 2019 09:59:45 -0700
Subject: [PATCH 6/9] getting time stamp to display properly

---
 src/components/TimelineEvent.js | 4 +++-
 src/components/Timestamp.js     | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index bee4dbf..1dd75df 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -12,7 +12,9 @@ const TimelineEvent = () => {
     return (	    
       <section className="timeline">	      
         <p className="event-person">{person}</p>
-        <p className="event-time">{timeStamp}</p>
+        <Timestamp
+          time={timeStamp.time}
+        />
         <p className="event-status">{status}</p>
       </section> 
     );
diff --git a/src/components/Timestamp.js b/src/components/Timestamp.js
index 9a39231..073178d 100644
--- a/src/components/Timestamp.js
+++ b/src/components/Timestamp.js
@@ -7,7 +7,7 @@ const Timestamp = (props) => {
   const relative = time.fromNow();
 
   return (
-    <span title={absolute}>{relative}</span>
+    <span className="event-time" title={absolute}>{relative}</span>
   );
 };
 

From 5ef61fd8e0ee7e11349d94984f468c1cc5acd8ee Mon Sep 17 00:00:00 2001
From: laneia <laneiamurray@gmail.com>
Date: Tue, 11 Jun 2019 10:00:47 -0700
Subject: [PATCH 7/9] minor style tweaks

---
 src/components/Timeline.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Timeline.css b/src/components/Timeline.css
index a9e8a47..46a9763 100644
--- a/src/components/Timeline.css
+++ b/src/components/Timeline.css
@@ -1,5 +1,6 @@
 .timeline {
-  width: 70%;
+  width: 50%;
   margin: auto;
   text-align: left;
+  font-size: 1.5rem;
 }

From 1d6294bcaae99af75549194165da1e616af95d29 Mon Sep 17 00:00:00 2001
From: laneia <laneiamurray@gmail.com>
Date: Tue, 11 Jun 2019 10:01:32 -0700
Subject: [PATCH 8/9] fix time display

---
 src/components/TimelineEvent.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index 1dd75df..a661590 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -13,7 +13,7 @@ const TimelineEvent = () => {
       <section className="timeline">	      
         <p className="event-person">{person}</p>
         <Timestamp
-          time={timeStamp.time}
+          time={timeStamp}
         />
         <p className="event-status">{status}</p>
       </section> 

From 4fae0cfed6493c76a14d0298045ad77935992175 Mon Sep 17 00:00:00 2001
From: laneia <laneiamurray@gmail.com>
Date: Fri, 14 Jun 2019 16:55:34 -0700
Subject: [PATCH 9/9] fixed bugs

---
 src/App.js                      |  9 ++++-----
 src/components/Timeline.js      | 33 ++++++++++++++-------------------
 src/components/TimelineEvent.js | 26 +++++++++-----------------
 src/data/timeline.json          |  5 -----
 4 files changed, 27 insertions(+), 46 deletions(-)

diff --git a/src/App.js b/src/App.js
index d579504..80f2769 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,22 +5,21 @@ import timelineData from './data/timeline.json';
 import Timeline from './components/Timeline';
 
 class App extends Component {
+
   render() {
     console.log(timelineData);
-
-    // Customize the code below
     return (
       <div className="App">
         <header className="App-header">
-          <h1 className="App-title">Timeline</h1>
+          <h1 className="App-title">Welcome, {timelineData.person}</h1>
         </header>
         <main className="App-main">
-        <Timeline />
+          <Timeline items={timelineData.events} />
         </main>
-        
       </div>
     );
   }
 }
 
+
 export default App;
diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index 691e712..1973b87 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -1,26 +1,21 @@
 import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
-import data from '../data/timeline.json';
 
-const Timeline = () => {
-  render() {
-    const events = data.events;
-
-    const timelineEventComponents = events.map((event) => {
-      return (
-        <TimelineEvent
-          key={event.timeStamp}
-          person={event.person}
-          status={event.status}
-          timeStamp={event.timeStamp}
-        />
-      );
-    });
-
-  return (
-    <div className="timeline">{timelineEventComponents}</div>
+const Timeline = (props) => {
+  const timelineComponents = props.items.map((event, i) => {
+    return (
+      <TimelineEvent 
+      key = {i}
+      person={event.person} 
+      status={event.status} 
+      time={event.timeStamp} />
+    );
+  });
+  return(
+    <section className="timeline">{timelineComponents}</section>
   );
-}}
+}
+
 
 export default Timeline;
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index a661590..e72aa5c 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -2,22 +2,14 @@ import React from 'react';
 import './TimelineEvent.css';
 import Timestamp from './Timestamp';
 
-const TimelineEvent = () => {
-  render() {
-    const person = this.props.person;
-    const timeStamp = this.props.timeStamp;
-    const status = this.props.status;
-
-
-    return (	    
-      <section className="timeline">	      
-        <p className="event-person">{person}</p>
-        <Timestamp
-          time={timeStamp}
-        />
-        <p className="event-status">{status}</p>
-      </section> 
-    );
-}}
+const TimelineEvent = (props) => {
+   return(
+  <article class="timeline-event">
+    <p class="event-person">{props.person}</p>
+    <p class="event-status">{props.status}</p>
+    <p class="event-time"><Timestamp time={props.time} /></p>
+  </article>
+  );
+}
 
 export default TimelineEvent;
diff --git a/src/data/timeline.json b/src/data/timeline.json
index b33813e..1f82960 100644
--- a/src/data/timeline.json
+++ b/src/data/timeline.json
@@ -25,11 +25,6 @@
       "person": "Stephanie Hurlburt",
       "status": "I don’t think you can do good work if you’re not at least occasionally talking to a person you’re building for.",
       "timeStamp": "2018-05-18T23:09:38Z"
-    },
-    {
-      "person": "Yan Zhu",
-      "status": "//for a good time, paste this into twitter page console: c=new AudioContext;n=setInterval(\"for(n+=7,i=k,P='\u25b2.\\\n';i-=1/k;P+=P[i%2?(i%2*j-j+n/k^j)&1:2])j=k/i;doc.innerHTML=P;with(c.createOscillator())frequency.value=200*(j+n/k^j),connect(c.destination),start(),stop(n/k)\",k=64)",
-      "timeStamp": "2018-05-18T23:51:01Z"
     }
   ]
 }