Ampers: Nora Peters

src/App.js

@@ -1,21 +1,27 @@
 import React, { Component } from 'react';
 import './App.css';
 import timelineData from './data/timeline.json';
-
 import Timeline from './components/Timeline';
+import Counter from './components/Counter';
+
 
 class App extends Component {
   render() {
-    console.log(timelineData);
+    const name = timelineData.person
 
-    // Customize the code below
     return (
       <div className="App">
         <header className="App-header">
-          <h1 className="App-title">Application title</h1>
+          <h1 className="App-title">{name}</h1>
         </header>
         <main className="App-main">
+          <section>
+            <Timeline timeline={timelineData} />
+          </section>
         </main>
+        <footer>
+          <small><Counter/></small>
+        </footer>
       </div>
     );
   }

src/components/Counter.js

@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+
+class Counter extends Component {
+  state = {
+    seconds: 0
+  }
+
+  componentDidMount() {
+    setInterval(() => {
+      this.setState({ seconds: this.state.seconds + 1 })
+    }, 1000)
+  }
+
+  render() {
+    return <h1>It has been {this.state.seconds} seconds since you arrived here.</h1>;
+  }
+}
+
+export default Counter;

src/components/Timeline.css

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

src/components/Timeline.js

@@ -3,9 +3,26 @@ import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
 class Timeline extends React.Component {
+
   render() {
-    // Fill in your code here
-    return;
+    console.log(this.props);
+    const timeline = this.props.timeline
+    // console.log({timeline});
+
+    const timelineEvents = timeline.events.map((event) => {
+      return (
+        <TimelineEvent
+          key={event.timeStamp}
+          person={event.person}
+          status={event.status}
+          timestamp={event.timeStamp}
+        />
+      );
+    });
+
+    return (
+      <div className="timeline">{timelineEvents}</div>
+    );
   }
 }
 

src/components/TimelineEvent.css

@@ -18,6 +18,7 @@
 
 .event-status {
   grid-area: 2 / 1 / span 1 / -1;
+  word-wrap: break-word;
 }
 
 .event-time {

src/components/TimelineEvent.js

@@ -2,10 +2,25 @@ import React, { Component } from 'react';
 import './TimelineEvent.css';
 import Timestamp from './Timestamp';
 
-class TimelineEvent extends React.Component {
+class TimelineEvent extends Component {
   render() {
-    // Fill in your code here
-    return;
+    console.log(this.props);
+    const { person, status, timestamp } = this.props
+    // console.log({person})
+
+    return (
+      <article className="timeline-event">
+        <div className="event-person">
+          {person}
+        </div>
+        <div className="event-time">
+          <Timestamp time={timestamp} />
+        </div>
+        <p className="event-status">
+          {status}
+        </p>
+      </article>
+    );
   }
 }
 

src/components/Timestamp.js

@@ -3,6 +3,7 @@ import moment from 'moment';
 
 class Timestamp extends React.Component {
   render() {
+    console.log(this.props);
     const time = moment(this.props.time);
     const absolute = time.format('MMMM Do YYYY, h:mm:ss a');
     const relative = time.fromNow();