Answer key list

src/components/AnswerKeyList/index.js

@@ -1,10 +1,54 @@
 import React from 'react';
+import API from '../../lib/API';
+import {Link} from 'react-router-dom';
 
 class AnswerKeyList extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.api = new API();
+    this.state = {
+      courses: new Array(0),
+    };
+
+    this.api.answerKeys.list().then(r => this.setState({courses: r.courses}));
+  }
+
+  getCreatedAt(unixEpoch) {
+    if (!unixEpoch) {
+      return '';
+    }
+
+    const date = new Date();
+    date.setTime(unixEpoch);
+
+    return date.getMonth() + '/' + date.getDate() + '/' + date.getFullYear();
+  }
+
   render() {
+    const courseRows = this.state.courses.map((course, index) => (
+      <tr>
+        <td>{course.name}</td>
+        <td>{this.getCreatedAt(course.created_at)}</td>
+        <td>
+          <Link to="/answerkeys/edit/{course.name}">edit</Link>
+        </td>
+      </tr>
+    ));
+
     return (
       <div className="answerkeylist row">
         <h2>Answer Keys</h2>
+        <table className="u-full-width">
+          <thead>
+            <tr>
+              <th>Course name</th>
+              <th>Created</th>
+              <th>&nbsp;</th>
+            </tr>
+          </thead>
+          <tbody>{courseRows}</tbody>
+        </table>
       </div>
     );
   }