Space - Jessica

src/App.js

@@ -11,9 +11,10 @@ function App() {
   return (
     <div className="App">
       <header className="App-header">
-        <h1 className="App-title">Application title</h1>
+        <h1 className="App-title">{timelineData.person}'s Social Media Timeline</h1>
       </header>
       <main className="App-main">
+        <Timeline events={timelineData.events} />
       </main>
     </div>
   );

src/components/Timeline.css

@@ -1,5 +1,5 @@
 .timeline {
   width: 30%;
-  margin: auto;
+  margin: 10px auto;
   text-align: left;
 }

src/components/Timeline.js

@@ -2,9 +2,16 @@ import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
-const Timeline = () => {
-
-  return;
+const Timeline = (props) => {
+  const timelineComponents = props.events.map((event, i) => {
+    return (
+      <article key={i} className="timeline">
+        <TimelineEvent person={ event.person } status={event.status} timestamp={event.timeStamp} likes={event.likes}/>
+      </article>
+    );
+  });
+
+  return (timelineComponents);
 }
 
 export default Timeline;

src/components/TimelineEvent.css

@@ -4,6 +4,7 @@
   padding: 0.5rem;
   border-bottom: 1px solid #E6ECF0;
   background-color: #FFF;
+  border-radius: 5px;
 }
 
 .timeline-event:hover {
@@ -18,10 +19,16 @@
 
 .event-status {
   grid-area: 2 / 1 / span 1 / -1;
+  overflow-wrap: break-word;
 }
 
 .event-time {
   grid-area: 1 / 2 / span 1 / span 1;
   margin-top: 0.5rem;
   text-align: right;
 }
+
+.event-likes {
+  grid-area: 3 / 1 / span 1 / -1;
+  margin: 5px 0;
+}

src/components/TimelineEvent.js

@@ -2,9 +2,18 @@ import React from 'react';
 import './TimelineEvent.css';
 import Timestamp from './Timestamp';
 
-const TimelineEvent = () => {
-
-  return;
+const TimelineEvent = (props) => {
+  let likes = "likes";
+  if (props.likes === 1) likes = "like";
+
+  return (
+    <section className="timeline-event">
+      <header className="event-person">{props.person}</header>
+      <p className="event-time"><Timestamp time={props.timestamp} /></p>
+      <p className="event-status">{props.status}</p>
+      <p className="event-likes">{props.likes} {likes}</p>
+    </section>
+  )
 }
 
 export default TimelineEvent;

src/data/timeline.json

@@ -4,32 +4,38 @@
     {
       "person": "Adele Goldberg",
       "status": "In Smalltalk, everything happens somewhere else.",
-      "timeStamp": "2018-05-18T22:12:03Z"
+      "timeStamp": "2018-05-18T22:12:03Z",
+      "likes": 5
     },
     {
       "person": "Erica Baker",
       "status": "Every once in a while, life affords you the opportunity to have real, authentic, genuine happiness. It's up to you to see it. Pay attention.",
-      "timeStamp": "2018-05-18T22:19:40Z"
+      "timeStamp": "2018-05-18T22:19:40Z",
+      "likes": 3
     },
     {
       "person": "Aubrey Tang",
       "status": "The art of computer programming is a blend of mathematics and poetry.",
-      "timeStamp": "2018-05-18T22:41:19Z"
+      "timeStamp": "2018-05-18T22:41:19Z",
+      "likes": 3
     },
     {
       "person": "Julia Evans",
       "status": "no seriously what if we replaced tech books with informative concise 30 page zines though",
-      "timeStamp": "2018-05-18T23:02:44Z"
+      "timeStamp": "2018-05-18T23:02:44Z",
+      "likes": 125
     },
     {
       "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"
+      "timeStamp": "2018-05-18T23:09:38Z",
+      "likes": 1
     },
     {
       "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='▲.\\\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"
+      "timeStamp": "2018-05-18T23:51:01Z",
+      "likes": 8
     }
   ]
 }