From b9f9c2f27499026303e7f35b001695042df2de7d Mon Sep 17 00:00:00 2001
From: K <774162+kaseea@users.noreply.github.com>
Date: Tue, 11 Jun 2019 10:48:05 -0700
Subject: [PATCH 1/3] whelp this is where I am

---
 src/App.js                      |  1 +
 src/components/Timeline.js      | 32 ++++++++++++++++++++++++++++----
 src/components/TimelineEvent.js | 14 ++++++++++++--
 3 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/src/App.js b/src/App.js
index 5f4cdf8..92f191f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -15,6 +15,7 @@ class App extends Component {
           <h1 className="App-title">Application title</h1>
         </header>
         <main className="App-main">
+          <Timeline events={timelineData.events} />
         </main>
       </div>
     );
diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index 624d4ec..d11e32e 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -1,10 +1,34 @@
 import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
+// import timelineData from './data/timeline.json';
+
+const Timeline = (props) => {
+  // although why do we have to do props.events? cause itsnt 
+  // <Timeline events={timelineData.events} /> already sending it events?
+  // side question, how would you debug that?
+
+  const timelineComponents = props.events.map( (timeline, i) => {
+    return (
+      <li key={i}>
+        <TimelineEvent
+          person={ timeline.person }
+          status={ timeline.status }
+          time={ timeline.timeStamp } />
+      </li>
+    );
+  });
+  
+    return (
+      <section>
+        <ul>
+          { timelineComponents }
+        </ul>
+      </section>
+    );
+  };
+
+
 
-const Timeline = () => {
-  // Fill in your code here
-  return;
-}
 
 export default Timeline;
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index 9079165..456956f 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -2,9 +2,19 @@ import React from 'react';
 import './TimelineEvent.css';
 import Timestamp from './Timestamp';
 
-const TimelineEvent = () => {
+const TimelineEvent = (props) => {
   // Fill in your code here
-  return;
+  return (
+    <section>
+
+    {/* <h3>{ props.timestamp } </h3> */}
+      <h3> <Timestamp time= { props.time }/></h3>
+      {/* so, note to self, it has to match the name time on Timestamp */}
+    <h3>
+      { props.person } , { props.status}
+    </h3>
+  </section>
+  );
 }
 
 export default TimelineEvent;

From 83d4b2616f4ebffdf1f3d6051708ac6d622e7301 Mon Sep 17 00:00:00 2001
From: K <774162+kaseea@users.noreply.github.com>
Date: Tue, 11 Jun 2019 11:20:01 -0700
Subject: [PATCH 2/3] some css and a little imporovements

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

diff --git a/src/App.js b/src/App.js
index 92f191f..afc3365 100644
--- a/src/App.js
+++ b/src/App.js
@@ -12,7 +12,7 @@ class App extends Component {
     return (
       <div className="App">
         <header className="App-header">
-          <h1 className="App-title">Application title</h1>
+          <h1 className="App-title">{timelineData.person}</h1>
         </header>
         <main className="App-main">
           <Timeline events={timelineData.events} />
diff --git a/src/components/Timeline.css b/src/components/Timeline.css
index e31f946..89eacad 100644
--- a/src/components/Timeline.css
+++ b/src/components/Timeline.css
@@ -1,5 +1,29 @@
 .timeline {
+  list-style-type: none;
   width: 30%;
   margin: auto;
+  /* text-align: left; */
+  /* background-color: blueviolet; */
+  background-color: #f8f8f8;
+  border: 1px solid #c8c8c8;
+  border-radius: 5px;
+  /* width: 110px; */
+  text-align: center;
+  padding: 20px;
+  /* position: absolute; */
+
+  overflow-wrap: break-word;
+}
+
+.name {
   text-align: left;
+  font-weight: bold;
+
+  /* float: left; */
 }
+
+.time {
+  margin: auto;
+  float: right;
+  text-align: right;
+}
\ No newline at end of file
diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index d11e32e..644b434 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
-// import timelineData from './data/timeline.json';
 
 const Timeline = (props) => {
   // although why do we have to do props.events? cause itsnt 
@@ -10,7 +9,7 @@ const Timeline = (props) => {
 
   const timelineComponents = props.events.map( (timeline, i) => {
     return (
-      <li key={i}>
+      <li className="timeline" key={i}>
         <TimelineEvent
           person={ timeline.person }
           status={ timeline.status }
@@ -20,7 +19,7 @@ const Timeline = (props) => {
   });
   
     return (
-      <section>
+      <section >
         <ul>
           { timelineComponents }
         </ul>
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index 456956f..7490a23 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -8,10 +8,12 @@ const TimelineEvent = (props) => {
     <section>
 
     {/* <h3>{ props.timestamp } </h3> */}
-      <h3> <Timestamp time= { props.time }/></h3>
+
+    <h4 className="time"> <Timestamp time= { props.time }/></h4>
+      <h3 className="name">{ props.person }</h3>
       {/* so, note to self, it has to match the name time on Timestamp */}
     <h3>
-      { props.person } , { props.status}
+      { props.status}
     </h3>
   </section>
   );

From 119fa0f136895dcbdeb244fcb226ae2346ba92c6 Mon Sep 17 00:00:00 2001
From: K <774162+kaseea@users.noreply.github.com>
Date: Tue, 11 Jun 2019 13:44:55 -0700
Subject: [PATCH 3/3] just some more notes

---
 src/App.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/App.js b/src/App.js
index afc3365..4541c66 100644
--- a/src/App.js
+++ b/src/App.js
@@ -15,7 +15,9 @@ class App extends Component {
           <h1 className="App-title">{timelineData.person}</h1>
         </header>
         <main className="App-main">
-          <Timeline events={timelineData.events} />
+          {/* <Timeline events={timelineData["events"] person={timelineData.person}} />
+        sooo thats not how it works, just rememnber that events just equals something, ignore it, and we can pass in multipe props but theyre still a prop? I dunno but correctness would be... */}
+        <Timeline events={timelineData["events"]} />
         </main>
       </div>
     );