From e04e1724e74db8e244e47f5aa66ac3f0c6d8b095 Mon Sep 17 00:00:00 2001
From: Sharon Cheung <keikei1128@g.ucla.edu>
Date: Tue, 14 Apr 2020 16:15:48 -0700
Subject: [PATCH 1/5] first draft of the website

---
 src/App.js                      |  6 ++++--
 src/components/Timeline.js      | 22 +++++++++++++++++++---
 src/components/TimelineEvent.js | 10 ++++++++--
 src/components/Timestamp.js     |  4 +++-
 4 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/src/App.js b/src/App.js
index 76d86d2..fd219d0 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,17 +3,19 @@ import logo from './logo.svg';
 import './App.css';
 import timelineData from './data/timeline.json';
 import Timeline from './components/Timeline';
+import TimelineEvent from './components/TimelineEvent';
 
 function App() {
-  console.log(timelineData);
+  //console.log(timelineData.events);
 
   // Customize the code below
   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 events={timelineData.events}/>
       </main>
     </div>
   );
diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index 463eb3e..bda8d5c 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 = () => {
-  
-  return;
+const Timeline = (props) => {
+ 
+  const TimelineComponents = props.events.map((events, i) =>{
+    return(
+      <TimelineEvent
+      name={events.person}
+      status={events.status}
+      timestamp={events.timeStamp}
+      key={i}
+      />
+    );
+  });
+
+
+  return (
+    <div>
+      {TimelineComponents}
+    </div>
+  );
 }
 
 export default Timeline;
\ No newline at end of file
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index cc476c2..e607713 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -2,9 +2,15 @@ import React from 'react';
 import './TimelineEvent.css';
 import Timestamp from './Timestamp';
 
-const TimelineEvent = () => {
+const TimelineEvent = (props) => {
   
-  return;
+  return (
+    <div className="TimelineEvent">
+      <p>{props.name}</p>
+      <p>{props.status}</p>
+      <Timestamp time={props.timestamp} />
+    </div>
+  )
 }
 
 export default TimelineEvent;
\ No newline at end of file
diff --git a/src/components/Timestamp.js b/src/components/Timestamp.js
index 6251538..247e781 100644
--- a/src/components/Timestamp.js
+++ b/src/components/Timestamp.js
@@ -7,7 +7,9 @@ const Timestamp = (props) => {
   const relative = time.fromNow();
 
   return (
-    <span title={absolute}>{relative}</span>
+    <div>
+      <span title={absolute}>{relative}</span>
+    </div>
   );
 };
 

From ecdef855c58a6752211252a08a4288822cd3e8ab Mon Sep 17 00:00:00 2001
From: Sharon Cheung <keikei1128@g.ucla.edu>
Date: Tue, 14 Apr 2020 18:10:02 -0700
Subject: [PATCH 2/5] fixed the style with classNames

---
 src/App.js                       |  4 +---
 src/components/Timeline.css      |  2 +-
 src/components/Timeline.js       |  8 ++++----
 src/components/TimelineEvent.css |  2 +-
 src/components/TimelineEvent.js  | 14 ++++++++------
 5 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/App.js b/src/App.js
index fd219d0..4430340 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,12 +1,10 @@
 import React from 'react';
-import logo from './logo.svg';
 import './App.css';
 import timelineData from './data/timeline.json';
 import Timeline from './components/Timeline';
-import TimelineEvent from './components/TimelineEvent';
 
 function App() {
-  //console.log(timelineData.events);
+  console.log(timelineData.events);
 
   // Customize the code below
   return (
diff --git a/src/components/Timeline.css b/src/components/Timeline.css
index e31f946..a301a15 100644
--- a/src/components/Timeline.css
+++ b/src/components/Timeline.css
@@ -1,5 +1,5 @@
 .timeline {
-  width: 30%;
+  width: 55%;
   margin: auto;
   text-align: left;
 }
diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index bda8d5c..58b7606 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -6,7 +6,7 @@ const Timeline = (props) => {
  
   const TimelineComponents = props.events.map((events, i) =>{
     return(
-      <TimelineEvent
+      <TimelineEvent 
       name={events.person}
       status={events.status}
       timestamp={events.timeStamp}
@@ -17,10 +17,10 @@ const Timeline = (props) => {
 
 
   return (
-    <div>
+    <section className="timeline">
       {TimelineComponents}
-    </div>
+    </section>
   );
-}
+};
 
 export default Timeline;
\ No newline at end of file
diff --git a/src/components/TimelineEvent.css b/src/components/TimelineEvent.css
index ea6407a..1d76b83 100644
--- a/src/components/TimelineEvent.css
+++ b/src/components/TimelineEvent.css
@@ -7,7 +7,7 @@
 }
 
 .timeline-event:hover {
-  background-color: #F5F8FA;
+  background-color:#F5F8FA;
 }
 
 .event-person {
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index e607713..0e31908 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -5,12 +5,14 @@ import Timestamp from './Timestamp';
 const TimelineEvent = (props) => {
   
   return (
-    <div className="TimelineEvent">
-      <p>{props.name}</p>
-      <p>{props.status}</p>
-      <Timestamp time={props.timestamp} />
-    </div>
-  )
+    <article className="timeline-event">
+      <p className="event-person">{props.name}</p>
+      <p className="event-time">
+        <Timestamp time={props.timestamp} />
+      </p>
+      <p className="event-status">{props.status}</p>
+    </article>
+  );
 }
 
 export default TimelineEvent;
\ No newline at end of file

From 266052bb80a8c822b76e159f84b452d68981babe Mon Sep 17 00:00:00 2001
From: Sharon Cheung <keikei1128@g.ucla.edu>
Date: Tue, 14 Apr 2020 20:51:11 -0700
Subject: [PATCH 3/5] fixed minor css

---
 src/components/Timeline.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Timeline.css b/src/components/Timeline.css
index a301a15..e76bd66 100644
--- a/src/components/Timeline.css
+++ b/src/components/Timeline.css
@@ -2,4 +2,5 @@
   width: 55%;
   margin: auto;
   text-align: left;
+  word-break: break-all;
 }

From c3bc3022ca2c4ebc77673baf8d6cbe5a179dc1bf Mon Sep 17 00:00:00 2001
From: Sharon Cheung <keikei1128@g.ucla.edu>
Date: Tue, 14 Apr 2020 23:20:01 -0700
Subject: [PATCH 4/5] clean up

---
 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 0e31908..7e16dec 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -12,7 +12,7 @@ const TimelineEvent = (props) => {
       </p>
       <p className="event-status">{props.status}</p>
     </article>
-  );
+  )
 }
 
 export default TimelineEvent;
\ No newline at end of file

From 1a0aea389d4c4c48a3ef805398958603ce35ee98 Mon Sep 17 00:00:00 2001
From: sharonkeikei <54300556+sharonkeikei@users.noreply.github.com>
Date: Wed, 15 Apr 2020 09:57:25 -0700
Subject: [PATCH 5/5] small change

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

diff --git a/src/App.js b/src/App.js
index 4430340..6210b5e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -10,7 +10,7 @@ function App() {
   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">
         <Timeline events={timelineData.events}/>