Ports - Elle

package.json

@@ -3,21 +3,30 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "moment": "^2.22.1",
-    "react": "^16.3.2",
-    "react-dom": "^16.3.2",
-    "react-scripts": "^2.1.5"
+    "moment": "^2.24.0",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-scripts": "3.0.1"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
+    "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not ie <= 11",
-    "not op_mini all"
-  ]
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
 }

src/App.js

@@ -5,16 +5,16 @@ 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>
     );

src/components/Timeline.css

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

src/components/Timeline.js

@@ -2,9 +2,21 @@ import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
-const Timeline = () => {
-  // Fill in your code here
-  return;
+const Timeline = (props) => {
+  // props is an array of "events" which are JS objects from timeline.json 
+  const timelineComponents = props.items.map((event, i) => {
+    // why do we need .events again ^ here? 
+    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,15 @@ import React from 'react';
 import './TimelineEvent.css';
 import Timestamp from './Timestamp';
 
-const TimelineEvent = () => {
-  // Fill in your code here
-  return;
+const TimelineEvent = (props) => {
+
+  return(
+  <article className="timeline-event">
+    <p className="event-person">{props.person}</p>
+    <p className="event-status">{props.status}</p>
+    <p className="event-time"><Timestamp time={props.time} /></p>
+  </article>
+  );
 }
 
 export default TimelineEvent;

src/index.css

@@ -1,5 +1,5 @@
 body {
   margin: 0;
   padding: 0;
-  font-family: 'Muli', sans-serif;
+  font-family: Arial, Helvetica, sans-serif
 }