Space - Charlotte

src/App.js

@@ -1,19 +1,16 @@
 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">Ada Lovelace's social media feed!</h1>
       </header>
       <main className="App-main">
+      <Timeline data={timelineData.events}  />
       </main>
     </div>
   );

src/components/Timeline.js

@@ -1,10 +1,31 @@
 import React from 'react';
 import './Timeline.css';
+import PropTypes from 'prop-types';
 import TimelineEvent from './TimelineEvent';
 
-const Timeline = () => {
+const Timeline = (props) => {
+  console.log(props);
+
+  const events = props.data.map((event, index) => {
+    return (
+      <section key={index}>
+        <TimelineEvent 
+          person={event.person}
+          status={event.status}
+          timeStamp={event.timeStamp}
+        />
+      </section>
+
+    )
+  });
+
 
-  return;
+  return(
+    <div className='timeLine'> {events} </div>
+  );
 }
+Timeline.propTypes = {
+  events: PropTypes.arrayOf(PropTypes.object)
+};
 
 export default Timeline;

src/components/TimelineEvent.css

@@ -16,6 +16,7 @@
   font-weight: bolder;
 }
 
+
 .event-status {
   grid-area: 2 / 1 / span 1 / -1;
 }

src/components/TimelineEvent.js

@@ -1,10 +1,29 @@
 import React from 'react';
 import './TimelineEvent.css';
+import PropTypes from 'prop-types';
 import Timestamp from './Timestamp';
 
-const TimelineEvent = () => {
+const TimelineEvent = (props) => {
+
+
 
-  return;
-}
+  return (
+    <section className='timeline-event'>
+      <h3 className='event-person'>{props.person}</h3>
+      <h4 className='event-status'>{props.status}</h4>
+      <h3 className='event-time'><Timestamp time={props.timeStamp}/></h3>
+    </section>
+
+  );
+};
+
+
+TimelineEvent.propTypes = {
+  person: PropTypes.string.isRequired,
+  status: PropTypes.string.isRequired,
+};
+
+
+
 
-export default TimelineEvent;
+export default TimelineEvent;

src/components/Timestamp.js

@@ -2,6 +2,7 @@ import React from 'react';
 import moment from 'moment';
 
 const Timestamp = (props) => {
+  console.log(props);
   const time = moment(props.time);
   const absolute = time.format('MMMM Do YYYY, h:mm:ss a');
   const relative = time.fromNow();
@@ -11,4 +12,4 @@ const Timestamp = (props) => {
   );
 };
 
-export default Timestamp;
+export default Timestamp;