From d769f32a714ef302f26e20fe61ca478f5ddf2983 Mon Sep 17 00:00:00 2001
From: Shonda860 <norshonda.warren@my.ccsu.edu>
Date: Tue, 14 Apr 2020 21:10:33 -0700
Subject: [PATCH 1/9] added bootstrap

---
 package-lock.json | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index a7829ee..2f5ef07 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2846,6 +2846,11 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
+    "bootstrap": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.1.1.tgz",
+      "integrity": "sha512-SpiDSOcbg4J/PjVSt4ny5eY6j74VbVSjROY4Fb/WIUXBV9cnb5luyR4KnPvNoXuGnBK1T+nJIWqRsvU3yP8Mcg=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",

From 5e2b0ec3e594175a04484202b4a6e1b703142a23 Mon Sep 17 00:00:00 2001
From: Shonda860 <norshonda.warren@my.ccsu.edu>
Date: Tue, 14 Apr 2020 21:10:45 -0700
Subject: [PATCH 2/9] bootstrap

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index f1e41cc..20f42fa 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "bootstrap": "^4.1.1",
     "moment": "^2.24.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",

From 2457eaf766c5627e473cf019dcee94bf647c67ea Mon Sep 17 00:00:00 2001
From: Shonda860 <norshonda.warren@my.ccsu.edu>
Date: Tue, 14 Apr 2020 21:11:49 -0700
Subject: [PATCH 3/9] updated file to read jsx & make sure 3props prints

---
 src/components/TimelineEvent.jsx | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 src/components/TimelineEvent.jsx

diff --git a/src/components/TimelineEvent.jsx b/src/components/TimelineEvent.jsx
new file mode 100644
index 0000000..ce85e2d
--- /dev/null
+++ b/src/components/TimelineEvent.jsx
@@ -0,0 +1,16 @@
+import React from "react";
+import "./TimelineEvent.css";
+import Timestamp from "./Timestamp";
+import { render } from "@testing-library/react";
+
+const TimelineEvent = (props) => {
+  return (
+    <div className="TimelineEvent">
+      <h1>person</h1>
+      <h1>status</h1>
+      <h1>Timestamp</h1>
+    </div>
+  );
+};
+
+export default TimelineEvent;

From bb6a283ef7d7757fe53ba39277b5105a1fc776ba Mon Sep 17 00:00:00 2001
From: Shonda860 <norshonda.warren@my.ccsu.edu>
Date: Tue, 14 Apr 2020 21:12:28 -0700
Subject: [PATCH 4/9] playing with app function

---
 src/App.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/App.js b/src/App.js
index 76d86d2..1d14b53 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,8 +1,7 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
-import timelineData from './data/timeline.json';
-import Timeline from './components/Timeline';
+import React from "react";
+import "./App.css";
+import timelineData from "./data/timeline.json";
+import Timeline from "./components/Timeline";
 
 function App() {
   console.log(timelineData);
@@ -11,10 +10,11 @@ function App() {
   return (
     <div className="App">
       <header className="App-header">
-        <h1 className="App-title">Application title</h1>
-      </header>
+        <h1 className="App-title"> Ada LoveLace Social Media Feed! </h1>{" "}
+      </header>{" "}
       <main className="App-main">
-      </main>
+        <Timeline events={timelineData.events} />
+      </main>{" "}
     </div>
   );
 }

From 8f10b06748b944b84e7016d3c5b8f98c0a8546a8 Mon Sep 17 00:00:00 2001
From: Shonda860 <norshonda.warren@my.ccsu.edu>
Date: Tue, 14 Apr 2020 21:12:50 -0700
Subject: [PATCH 5/9] checked DOM root

---
 src/index.js | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/index.js b/src/index.js
index 87d1be5..fd17691 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,12 +1,13 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
+import * as serviceWorker from "./serviceWorker";
+import "bootstrap/dist/css/bootstrap.css";
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render( < App / > , document.getElementById("root"));
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+serviceWorker.unregister();
\ No newline at end of file

From d54868c6eca11aa9d5902873200290bda052dfbd Mon Sep 17 00:00:00 2001
From: Shonda860 <norshonda.warren@my.ccsu.edu>
Date: Tue, 14 Apr 2020 21:28:00 -0700
Subject: [PATCH 6/9] checkin props of timeevents to make sure undefined

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

diff --git a/src/components/TimelineEvent.jsx b/src/components/TimelineEvent.jsx
index ce85e2d..1112338 100644
--- a/src/components/TimelineEvent.jsx
+++ b/src/components/TimelineEvent.jsx
@@ -5,10 +5,10 @@ import { render } from "@testing-library/react";
 
 const TimelineEvent = (props) => {
   return (
-    <div className="TimelineEvent">
-      <h1>person</h1>
-      <h1>status</h1>
-      <h1>Timestamp</h1>
+    <div>
+      person = {props.event - person}
+      status = {props.event - status}
+      timestamp ={props.event - time}
     </div>
   );
 };

From a0d033112bfe3e5ea4d45e08d7701a10eb276474 Mon Sep 17 00:00:00 2001
From: Shonda860 <norshonda.warren@my.ccsu.edu>
Date: Tue, 14 Apr 2020 21:36:24 -0700
Subject: [PATCH 7/9] added skelton for comps-date invalid

---
 src/components/TimelineEvent.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/TimelineEvent.jsx b/src/components/TimelineEvent.jsx
index 1112338..e3c8373 100644
--- a/src/components/TimelineEvent.jsx
+++ b/src/components/TimelineEvent.jsx
@@ -6,9 +6,9 @@ import { render } from "@testing-library/react";
 const TimelineEvent = (props) => {
   return (
     <div>
-      person = {props.event - person}
-      status = {props.event - status}
-      timestamp ={props.event - time}
+      <Timestamp time={props.timestamp} />
+      <h3>person</h3>
+      <p>status</p>
     </div>
   );
 };

From 43affbd1d9e6d20b718eb610fb4e47fb4cf715ef Mon Sep 17 00:00:00 2001
From: Shonda860 <norshonda.warren@my.ccsu.edu>
Date: Tue, 14 Apr 2020 21:57:32 -0700
Subject: [PATCH 8/9] applied styling to timeline

---
 src/components/TimelineEvent.jsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/TimelineEvent.jsx b/src/components/TimelineEvent.jsx
index e3c8373..977c626 100644
--- a/src/components/TimelineEvent.jsx
+++ b/src/components/TimelineEvent.jsx
@@ -5,10 +5,12 @@ import { render } from "@testing-library/react";
 
 const TimelineEvent = (props) => {
   return (
-    <div>
-      <Timestamp time={props.timestamp} />
-      <h3>person</h3>
-      <p>status</p>
+    <div className="timeline-event">
+      <h3 className="event-time">
+        <Timestamp time={props.timeStamp} />
+      </h3>
+      <h3 className="event-person">{props.person}</h3>
+      <p className="event-status">{props.status}</p>
     </div>
   );
 };

From ef419764187da16a26e125d1bcb50f84cf8fc175 Mon Sep 17 00:00:00 2001
From: Shonda860 <norshonda.warren@my.ccsu.edu>
Date: Tue, 14 Apr 2020 22:09:28 -0700
Subject: [PATCH 9/9] fixedthe timestamp toshow pastfrom andnot currtime

---
 src/components/Timeline.js | 29 +++++++++++++++++++++--------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index 463eb3e..6b1bdf9 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -1,10 +1,23 @@
-import React from 'react';
-import './Timeline.css';
-import TimelineEvent from './TimelineEvent';
+import React from "react";
+import "./Timeline.css";
+import TimelineEvent from "./TimelineEvent";
 
-const Timeline = () => {
-  
-  return;
-}
+const Timeline = (props) => {
+  return (
+    <div>
+      {props.events.map((event) => {
+        return (
+          <TimelineEvent
+            className="timeline"
+            person={event.person}
+            status={event.status}
+            timeStamp={event.timeStamp}
+          />
+        );
+      })}
+      ;
+    </div>
+  );
+};
 
-export default Timeline;
\ No newline at end of file
+export default Timeline;