From 1ea1adba4e8f74c04eb9dd6047f03776312cf2e1 Mon Sep 17 00:00:00 2001
From: charlotte adams <lucky.seattle.monkey@gmail.com>
Date: Tue, 14 Apr 2020 12:55:19 -0700
Subject: [PATCH 1/5] complete wave 1

---
 src/App.js                      |  3 ++-
 src/components/Timeline.js      | 14 +++++++++++---
 src/components/TimelineEvent.js | 27 +++++++++++++++++++++++----
 3 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/src/App.js b/src/App.js
index 76d86d2..32ed95f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import logo from './logo.svg';
+// import logo from './logo.svg';
 import './App.css';
 import timelineData from './data/timeline.json';
 import Timeline from './components/Timeline';
@@ -14,6 +14,7 @@ function App() {
         <h1 className="App-title">Application title</h1>
       </header>
       <main className="App-main">
+      <Timeline  />
       </main>
     </div>
   );
diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index 463eb3e..b303063 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -2,9 +2,17 @@ import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
-const Timeline = () => {
+const Timeline = (props) => {
+
   
-  return;
-}
+  return(
+    <TimelineEvent 
+      person="Minnie Mouse" 
+      status="I love you Mickey Mouse"
+      timestamp="April 14, 2020"
+
+    />
+  );
+};
 
 export default Timeline;
\ No newline at end of file
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index cc476c2..2dda8ed 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -2,9 +2,28 @@ import React from 'react';
 import './TimelineEvent.css';
 import Timestamp from './Timestamp';
 
-const TimelineEvent = () => {
+const TimelineEvent = (props) => {
   
-  return;
-}
+  return (
+    <section className="TimelineEvent">
+      <h3>Person: {props.person}</h3>
+      <p>Status: {props.status}</p>
+      <span>Timestamp: <Timestamp /> </span>
+    </section>
 
-export default TimelineEvent;
\ No newline at end of file
+  );
+};
+
+export default TimelineEvent;
+
+
+
+
+// For wave 1 implement the `TimelineEvent` component function.  It should take 3 props.
+//   - `person` - the person making the post.
+//   - `status` - the message being posted.
+//   - `timestamp` - the date-time of the event.
+
+// Test the component by rendering it with hardcoded data inside the `App` component.
+//   `TimelineEvent` should use the existing `Timestamp` component to render the time 
+//   & date of the event.
\ No newline at end of file

From de7139b77209cdd4c788c4b726f74e8260f1cf8c Mon Sep 17 00:00:00 2001
From: charlotte adams <lucky.seattle.monkey@gmail.com>
Date: Tue, 14 Apr 2020 14:47:11 -0700
Subject: [PATCH 2/5] complete wave 2

---
 src/App.js                 |  4 ++--
 src/components/Timeline.js | 22 +++++++++++++++-------
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/App.js b/src/App.js
index 32ed95f..0447b34 100644
--- a/src/App.js
+++ b/src/App.js
@@ -11,10 +11,10 @@ function App() {
   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">
-      <Timeline  />
+      <Timeline data={timelineData.events}  />
       </main>
     </div>
   );
diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index b303063..84bf785 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -4,15 +4,23 @@ import TimelineEvent from './TimelineEvent';
 
 const Timeline = (props) => {
 
+  const events = props.data.map((event, index) => {
+    return (
+      <li key={index}>
+        <TimelineEvent 
+          person={event.person}
+          status={event.status}
+          timestamp={event.timestamp}
+        />
+      </li>
+
+    )
+  });
+
   
   return(
-    <TimelineEvent 
-      person="Minnie Mouse" 
-      status="I love you Mickey Mouse"
-      timestamp="April 14, 2020"
-
-    />
+    <ul className='timeLine'> {events} </ul>
   );
-};
+}
 
 export default Timeline;
\ No newline at end of file

From aee8addaca790848ee91c050c341ca789bbec1de Mon Sep 17 00:00:00 2001
From: charlotte adams <lucky.seattle.monkey@gmail.com>
Date: Tue, 14 Apr 2020 18:44:25 -0700
Subject: [PATCH 3/5] fix typos and REALLY complete wave 2

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

diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index 84bf785..39e8245 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -6,20 +6,20 @@ const Timeline = (props) => {
 
   const events = props.data.map((event, index) => {
     return (
-      <li key={index}>
+      <section key={index}>
         <TimelineEvent 
           person={event.person}
           status={event.status}
-          timestamp={event.timestamp}
+          timeStamp={event.timeStamp}
         />
-      </li>
+      </section>
 
     )
   });
 
   
   return(
-    <ul className='timeLine'> {events} </ul>
+    <div className='timeLine'> {events} </div>
   );
 }
 
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index 2dda8ed..e4ace62 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -5,25 +5,13 @@ import Timestamp from './Timestamp';
 const TimelineEvent = (props) => {
   
   return (
-    <section className="TimelineEvent">
-      <h3>Person: {props.person}</h3>
-      <p>Status: {props.status}</p>
-      <span>Timestamp: <Timestamp /> </span>
+    <section className='timeline-event'>
+      <h3 className='event-person'>{props.person}</h3>
+      <h4 className='event-status'>{props.status}</h4>
+      <h3 className='event-time'><Timestamp time={props.timeStamp}/></h3>
     </section>
 
   );
 };
 
 export default TimelineEvent;
-
-
-
-
-// For wave 1 implement the `TimelineEvent` component function.  It should take 3 props.
-//   - `person` - the person making the post.
-//   - `status` - the message being posted.
-//   - `timestamp` - the date-time of the event.
-
-// Test the component by rendering it with hardcoded data inside the `App` component.
-//   `TimelineEvent` should use the existing `Timestamp` component to render the time 
-//   & date of the event.
\ No newline at end of file

From ea603cbafa3e33265361dd6bd92dc44ad35b7d3b Mon Sep 17 00:00:00 2001
From: charlotte adams <lucky.seattle.monkey@gmail.com>
Date: Tue, 14 Apr 2020 19:23:24 -0700
Subject: [PATCH 4/5] add PropTypes to TImeline and TimelineEvent

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

diff --git a/src/App.js b/src/App.js
index 0447b34..2cee6dc 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,9 +5,6 @@ import timelineData from './data/timeline.json';
 import Timeline from './components/Timeline';
 
 function App() {
-  console.log(timelineData);
-
-  // Customize the code below
   return (
     <div className="App">
       <header className="App-header">
diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index 39e8245..f3c745f 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -1,8 +1,10 @@
 import React from 'react';
 import './Timeline.css';
+import PropTypes from 'prop-types';
 import TimelineEvent from './TimelineEvent';
 
 const Timeline = (props) => {
+  console.log(props);
 
   const events = props.data.map((event, index) => {
     return (
@@ -22,5 +24,8 @@ const Timeline = (props) => {
     <div className='timeLine'> {events} </div>
   );
 }
+Timeline.propTypes = {
+  events: PropTypes.arrayOf(PropTypes.object)
+};
 
 export default Timeline;
\ No newline at end of file
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index e4ace62..66b9718 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -1,8 +1,11 @@
 import React from 'react';
 import './TimelineEvent.css';
+import PropTypes from 'prop-types';
 import Timestamp from './Timestamp';
 
 const TimelineEvent = (props) => {
+
+
   
   return (
     <section className='timeline-event'>
@@ -14,4 +17,13 @@ const TimelineEvent = (props) => {
   );
 };
 
+
+TimelineEvent.propTypes = {
+  person: PropTypes.string.isRequired,
+  status: PropTypes.string.isRequired,
+};
+
+
+
+
 export default TimelineEvent;
diff --git a/src/components/Timestamp.js b/src/components/Timestamp.js
index 6251538..e6702aa 100644
--- a/src/components/Timestamp.js
+++ b/src/components/Timestamp.js
@@ -2,6 +2,7 @@ import React from 'react';
 import moment from 'moment';
 
 const Timestamp = (props) => {
+  console.log(props);
   const time = moment(props.time);
   const absolute = time.format('MMMM Do YYYY, h:mm:ss a');
   const relative = time.fromNow();

From 6f559e6d61651d93d57a0a3b59b16e2212252e7c Mon Sep 17 00:00:00 2001
From: charlotte adams <lucky.seattle.monkey@gmail.com>
Date: Tue, 14 Apr 2020 20:10:53 -0700
Subject: [PATCH 5/5] file cleanup

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

diff --git a/src/App.js b/src/App.js
index 2cee6dc..5638d98 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,5 +1,4 @@
 import React from 'react';
-// import logo from './logo.svg';
 import './App.css';
 import timelineData from './data/timeline.json';
 import Timeline from './components/Timeline';
diff --git a/src/components/TimelineEvent.css b/src/components/TimelineEvent.css
index ea6407a..dc2f6fc 100644
--- a/src/components/TimelineEvent.css
+++ b/src/components/TimelineEvent.css
@@ -16,6 +16,7 @@
   font-weight: bolder;
 }
 
+
 .event-status {
   grid-area: 2 / 1 / span 1 / -1;
 }
diff --git a/src/components/Timestamp.js b/src/components/Timestamp.js
index e6702aa..5afdc80 100644
--- a/src/components/Timestamp.js
+++ b/src/components/Timestamp.js
@@ -12,4 +12,4 @@ const Timestamp = (props) => {
   );
 };
 
-export default Timestamp;
\ No newline at end of file
+export default Timestamp;