Ports - Laneia

src/App.js

@@ -5,20 +5,21 @@ import timelineData from './data/timeline.json';
 import Timeline from './components/Timeline';
 
 class App extends Component {
+
   render() {
     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">Welcome, {timelineData.person}</h1>
         </header>
         <main className="App-main">
+          <Timeline items={timelineData.events} />
         </main>
       </div>
     );
   }
 }
 
+
 export default App;

src/components/Timeline.css

@@ -1,5 +1,6 @@
 .timeline {
-  width: 30%;
+  width: 50%;
   margin: auto;
   text-align: left;
+  font-size: 1.5rem;
 }

src/components/Timeline.js

@@ -2,9 +2,20 @@ import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
-const Timeline = () => {
-  // Fill in your code here
-  return;
+const Timeline = (props) => {
+  const timelineComponents = props.items.map((event, i) => {
+    return (
+      <TimelineEvent 
+      key = {i}
+      person={event.person} 
+      status={event.status} 
+      time={event.timeStamp} />
+    );
+  });
+  return(
+    <section className="timeline">{timelineComponents}</section>
+  );
 }
 
+
 export default Timeline;

src/components/TimelineEvent.js

@@ -2,9 +2,14 @@ import React from 'react';
 import './TimelineEvent.css';
 import Timestamp from './Timestamp';
 
-const TimelineEvent = () => {
-  // Fill in your code here
-  return;
+const TimelineEvent = (props) => {
+   return(
+  <article class="timeline-event">
+    <p class="event-person">{props.person}</p>
+    <p class="event-status">{props.status}</p>
+    <p class="event-time"><Timestamp time={props.time} /></p>
+  </article>
+  );
 }
 
 export default TimelineEvent;

src/components/Timestamp.js

@@ -7,7 +7,7 @@ const Timestamp = (props) => {
   const relative = time.fromNow();
 
   return (
-    <span title={absolute}>{relative}</span>
+    <span className="event-time" title={absolute}>{relative}</span>
   );
 };
 

src/data/timeline.json

@@ -25,11 +25,6 @@
       "person": "Stephanie Hurlburt",
       "status": "I don’t think you can do good work if you’re not at least occasionally talking to a person you’re building for.",
       "timeStamp": "2018-05-18T23:09:38Z"
-    },
-    {
-      "person": "Yan Zhu",
-      "status": "//for a good time, paste this into twitter page console: c=new AudioContext;n=setInterval(\"for(n+=7,i=k,P='\u25b2.\\\n';i-=1/k;P+=P[i%2?(i%2*j-j+n/k^j)&1:2])j=k/i;doc.innerHTML=P;with(c.createOscillator())frequency.value=200*(j+n/k^j),connect(c.destination),start(),stop(n/k)\",k=64)",
-      "timeStamp": "2018-05-18T23:51:01Z"
     }
   ]
 }