Space Shonda

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",

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>
   );
 }

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;
+export default Timeline;

src/components/TimelineEvent.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+import "./TimelineEvent.css";
+import Timestamp from "./Timestamp";
+import { render } from "@testing-library/react";
+
+const TimelineEvent = (props) => {
+  return (
+    <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>
+  );
+};
+
+export default TimelineEvent;

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();