From 5a42c562913ad5fe68674ee0d5b43543bc92771c Mon Sep 17 00:00:00 2001
From: Faezeh Ashtiani <faezeh.ashtiani@gmail.com>
Date: Tue, 14 Apr 2020 18:04:26 -0700
Subject: [PATCH 1/2] the app is working

---
 src/App.js                      |  6 ++----
 src/components/Timeline.js      | 18 ++++++++++++++++--
 src/components/TimelineEvent.js | 11 ++++++++---
 3 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/App.js b/src/App.js
index 76d86d2..faad5a7 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
   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/Timeline.js b/src/components/Timeline.js
index 463eb3e..c63ab2c 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -2,9 +2,23 @@ import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
-const Timeline = () => {
+const Timeline = (props) => {
+  const timelineComponents = props.events.map((event, i) => {
+    return (
+      <TimelineEvent
+        person={event.person}
+        timestamp={event.timestamp}
+        status={event.status}
+        key={i}
+      />
+    );
+  });
   
-  return;
+  return(
+    <div className='timeline'>
+      {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..0bb4668 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -2,9 +2,14 @@ import React from 'react';
 import './TimelineEvent.css';
 import Timestamp from './Timestamp';
 
-const TimelineEvent = () => {
-  
-  return;
+const TimelineEvent = (props) => {
+  return (
+    <div className="timeline-event">
+      <div className="event-person">{props.person}</div>
+      <div className="event-time"><Timestamp time={props.timestamp} /></div>
+      <div className="event-status">{props.status}</div>
+    </div>
+  );
 }
 
 export default TimelineEvent;
\ No newline at end of file

From 6aded29272ee51f0e2be77fb6d91e9cf3eb2ab32 Mon Sep 17 00:00:00 2001
From: Faezeh Ashtiani <faezeh.ashtiani@gmail.com>
Date: Tue, 14 Apr 2020 21:19:44 -0700
Subject: [PATCH 2/2] added sperad and deconstructing methods

---
 src/components/Timeline.js      | 21 +++++++++++++--------
 src/components/TimelineEvent.js |  9 +++++----
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index c63ab2c..5bc9098 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -2,15 +2,13 @@ import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
-const Timeline = (props) => {
-  const timelineComponents = props.events.map((event, i) => {
+const Timeline = ({events}) => {
+  // const {events} = props; - destructuring
+  const timelineComponents = events.map((event, i) => {
     return (
-      <TimelineEvent
-        person={event.person}
-        timestamp={event.timestamp}
-        status={event.status}
-        key={i}
-      />
+      // used spread operator for event instad of using .key for retrieving each. 
+      // this is repacing lines 23-25
+      <TimelineEvent { ...event } key={event.timeStamp} />
     );
   });
   
@@ -21,4 +19,11 @@ const Timeline = (props) => {
   ); 
 }
 
+{/* <TimelineEvent
+        person={event.person}
+        timeStamp={event.timeStamp}
+        status={event.status}
+        key={event.timeStamp}
+      /> */}
+
 export default Timeline;
\ No newline at end of file
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index 0bb4668..ae14294 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -2,12 +2,13 @@ import React from 'react';
 import './TimelineEvent.css';
 import Timestamp from './Timestamp';
 
-const TimelineEvent = (props) => {
+// using destructuring to extract elements of props
+const TimelineEvent = ({person, timeStamp, status}) => {
   return (
     <div className="timeline-event">
-      <div className="event-person">{props.person}</div>
-      <div className="event-time"><Timestamp time={props.timestamp} /></div>
-      <div className="event-status">{props.status}</div>
+      <div className="event-person">{person}</div>
+      <div className="event-time"><Timestamp time={timeStamp} /></div>
+      <div className="event-status">{status}</div>
     </div>
   );
 }