From fb6e54d471da6470aa3bf726ea64bc3b36cc5bad Mon Sep 17 00:00:00 2001
From: Jocelyn Wang <wangjoc@gmail.com>
Date: Wed, 15 Apr 2020 06:42:23 -0700
Subject: [PATCH 1/6] added in person prop

---
 src/components/Person.js        | 11 +++++++++++
 src/components/TimelineEvent.js |  9 +++++++--
 2 files changed, 18 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Person.js

diff --git a/src/components/Person.js b/src/components/Person.js
new file mode 100644
index 0000000..bd09b7b
--- /dev/null
+++ b/src/components/Person.js
@@ -0,0 +1,11 @@
+import React from "react"
+
+const Person = (prop) => {
+  return (
+    <div>
+      <h1>prop.events.person</h1>
+    </div>
+  )
+}
+
+export default Person
\ No newline at end of file
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index cc476c2..adb4be8 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -1,10 +1,15 @@
 import React from 'react';
 import './TimelineEvent.css';
 import Timestamp from './Timestamp';
+import Person from './Person';
 
 const TimelineEvent = () => {
-  
-  return;
+  return (
+    <div>
+      <Person />
+      <Timestamp />
+    </div>
+  )
 }
 
 export default TimelineEvent;
\ No newline at end of file

From 4d323071b639ba62696520b1ee8aa6401f3fff92 Mon Sep 17 00:00:00 2001
From: Jocelyn Wang <wangjoc@gmail.com>
Date: Wed, 15 Apr 2020 06:44:18 -0700
Subject: [PATCH 2/6] added in status prop

---
 src/components/Person.js |  4 ++--
 src/components/Status.js | 11 +++++++++++
 2 files changed, 13 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Status.js

diff --git a/src/components/Person.js b/src/components/Person.js
index bd09b7b..adfc5ba 100644
--- a/src/components/Person.js
+++ b/src/components/Person.js
@@ -1,9 +1,9 @@
 import React from "react"
 
-const Person = (prop) => {
+const Person = (props) => {
   return (
     <div>
-      <h1>prop.events.person</h1>
+      <h1>props.events.person</h1>
     </div>
   )
 }
diff --git a/src/components/Status.js b/src/components/Status.js
new file mode 100644
index 0000000..958ab72
--- /dev/null
+++ b/src/components/Status.js
@@ -0,0 +1,11 @@
+import React from "react"
+
+const Status = (props) => {
+  return (
+    <div>
+      <p>props.events.status</p>
+    </div>
+  )
+}
+
+export default Status
\ No newline at end of file

From ff7627ec0494b53889815ef7e802a7e5edbd5ac8 Mon Sep 17 00:00:00 2001
From: Jocelyn Wang <wangjoc@gmail.com>
Date: Wed, 15 Apr 2020 07:11:17 -0700
Subject: [PATCH 3/6] completed basic structure with data to show up

---
 src/App.js                      |  8 +++-----
 src/components/Person.js        | 11 -----------
 src/components/Status.js        | 11 -----------
 src/components/Timeline.js      | 23 ++++++++++++++++++++---
 src/components/TimelineEvent.js | 18 ++++++++++--------
 5 files changed, 33 insertions(+), 38 deletions(-)
 delete mode 100644 src/components/Person.js
 delete mode 100644 src/components/Status.js

diff --git a/src/App.js b/src/App.js
index 76d86d2..ee4bb01 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,19 +1,17 @@
 import React from 'react';
-import logo from './logo.svg';
 import './App.css';
 import timelineData from './data/timeline.json';
 import Timeline from './components/Timeline';
 
 function App() {
-  console.log(timelineData);
-
-  // Customize the code below
+  console.log(timelineData.events);
   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">
+        <Timeline events={timelineData.events}/>
       </main>
     </div>
   );
diff --git a/src/components/Person.js b/src/components/Person.js
deleted file mode 100644
index adfc5ba..0000000
--- a/src/components/Person.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from "react"
-
-const Person = (props) => {
-  return (
-    <div>
-      <h1>props.events.person</h1>
-    </div>
-  )
-}
-
-export default Person
\ No newline at end of file
diff --git a/src/components/Status.js b/src/components/Status.js
deleted file mode 100644
index 958ab72..0000000
--- a/src/components/Status.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from "react"
-
-const Status = (props) => {
-  return (
-    <div>
-      <p>props.events.status</p>
-    </div>
-  )
-}
-
-export default Status
\ No newline at end of file
diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index 463eb3e..1957a45 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -2,9 +2,26 @@ import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
-const Timeline = () => {
-  
-  return;
+const Timeline = (events) => {
+  console.log(events);
+  const eventComponents = events.events.map((event) => {
+
+    return(
+      <TimelineEvent
+        person={event.person}
+        status={event.status}
+        timeStamp={event.timeStamp}
+        key={event.status}
+      />
+    );
+
+  });
+
+  return (
+    <section className="timeline">
+      {eventComponents}
+    </section>
+  );
 }
 
 export default Timeline;
\ No newline at end of file
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index adb4be8..cb200e6 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -1,15 +1,17 @@
 import React from 'react';
 import './TimelineEvent.css';
 import Timestamp from './Timestamp';
-import Person from './Person';
 
-const TimelineEvent = () => {
-  return (
-    <div>
-      <Person />
-      <Timestamp />
-    </div>
-  )
+const TimelineEvent = (props) => {
+  
+  return(
+    <section className="timeline-event">
+      <oi className="event-person">{props.person}</oi>
+      <oi className="event-status">{props.status}</oi>
+      <oi className="event-time"><Timestamp time={props.timeStamp} /></oi>
+    </section>
+  );
+
 }
 
 export default TimelineEvent;
\ No newline at end of file

From 45492bdffc70b704eabd84a2993e2d0388317383 Mon Sep 17 00:00:00 2001
From: Jocelyn Wang <wangjoc@gmail.com>
Date: Wed, 15 Apr 2020 07:12:20 -0700
Subject: [PATCH 4/6] updated naming convention for props

---
 src/components/TimelineEvent.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index cb200e6..e8454cf 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -2,13 +2,13 @@ import React from 'react';
 import './TimelineEvent.css';
 import Timestamp from './Timestamp';
 
-const TimelineEvent = (props) => {
+const TimelineEvent = (event) => {
   
   return(
     <section className="timeline-event">
-      <oi className="event-person">{props.person}</oi>
-      <oi className="event-status">{props.status}</oi>
-      <oi className="event-time"><Timestamp time={props.timeStamp} /></oi>
+      <oi className="event-person">{event.person}</oi>
+      <oi className="event-status">{event.status}</oi>
+      <oi className="event-time"><Timestamp time={event.timeStamp}/></oi>
     </section>
   );
 

From 9916e1cc3c3732780a8631daf55599e5131533db Mon Sep 17 00:00:00 2001
From: Jocelyn Wang <wangjoc@gmail.com>
Date: Wed, 15 Apr 2020 07:17:04 -0700
Subject: [PATCH 5/6] made some css adjustments

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

diff --git a/src/App.js b/src/App.js
index ee4bb01..f1a027f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,14 +6,14 @@ import Timeline from './components/Timeline';
 function App() {
   console.log(timelineData.events);
   return (
-    <div className="App">
+    <section className="App">
       <header className="App-header">
         <h1 className="App-title">{`${timelineData.person}'s Social Media Feed`}</h1>
       </header>
       <main className="App-main">
         <Timeline events={timelineData.events}/>
       </main>
-    </div>
+    </section>
   );
 }
 
diff --git a/src/components/Timeline.css b/src/components/Timeline.css
index e31f946..a62b7e4 100644
--- a/src/components/Timeline.css
+++ b/src/components/Timeline.css
@@ -1,5 +1,7 @@
 .timeline {
-  width: 30%;
+  width: 80%;
+  padding: 20px;
+  word-wrap: break-word;
   margin: auto;
   text-align: left;
 }
diff --git a/src/components/TimelineEvent.css b/src/components/TimelineEvent.css
index ea6407a..5632221 100644
--- a/src/components/TimelineEvent.css
+++ b/src/components/TimelineEvent.css
@@ -1,6 +1,6 @@
 .timeline-event {
   display: grid;
-  grid-template: 2rem auto 2rem / 1fr 1fr;
+  grid-template: 3rem auto 2rem / 8fr 8fr;
   padding: 0.5rem;
   border-bottom: 1px solid #E6ECF0;
   background-color: #FFF;

From ab1b03c4dd7a65945b9d47d122f459fa50ff8917 Mon Sep 17 00:00:00 2001
From: Jocelyn Wang <wangjoc@gmail.com>
Date: Wed, 15 Apr 2020 07:19:00 -0700
Subject: [PATCH 6/6] modified naming convention in timeline

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

diff --git a/src/App.js b/src/App.js
index f1a027f..983afcb 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,7 +4,6 @@ import timelineData from './data/timeline.json';
 import Timeline from './components/Timeline';
 
 function App() {
-  console.log(timelineData.events);
   return (
     <section className="App">
       <header className="App-header">
diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index 1957a45..a208594 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -2,9 +2,8 @@ import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
-const Timeline = (events) => {
-  console.log(events);
-  const eventComponents = events.events.map((event) => {
+const Timeline = (props) => {
+  const eventComponents = props.events.map((event) => {
 
     return(
       <TimelineEvent