Answer key list

src/components/AnswerKeyForm/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import './index.css';
 import QuestionsRow from './QuestionsRow';
+import API from '../../lib/API';
 
 class AnswerKeyForm extends React.Component {
   constructor(props) {
@@ -77,16 +78,7 @@ class AnswerKeyForm extends React.Component {
       answers: this.state.answers.slice(),
     };
 
-    const result = fetch(
+    const result = API.answerKeys.create(payload);
-      'https://bzwy0j344j.execute-api.us-east-2.amazonaws.com/dev/courses',
-      {
-        method: 'POST',
-        mode: 'cors',
-        cache: 'no-cache',
-        headers: {'Content-Type': 'application/json; charset=utf-8'},
-        body: JSON.stringify(payload),
-      }
-    ).then(res => res.json());
 
     console.log(result);
   }

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>
     );
   }

src/components/App.js

@@ -8,16 +8,16 @@ import {BrowserRouter as Router, Route} from 'react-router-dom';
 class App extends Component {
   render() {
     return (
-      <div className="App">
+      <Router>
-        <NavBar />
+        <div className="App">
-        <Router>
+          <NavBar />
           <div className="container">
             <Route path="/" exact component={Dashboard} />
             <Route path="/answerkeys" exact component={AnswerKeyList} />
             <Route path="/answerkeys/create" exact component={AnswerKeyForm} />
           </div>
-        </Router>
+        </div>
-      </div>
+      </Router>
     );
   }
 }

src/components/NavBar/index.js

@@ -1,5 +1,6 @@
 import React, {Component} from 'react';
 import './index.css';
+import {Link} from 'react-router-dom';
 
 class Header extends Component {
   render() {
@@ -8,7 +9,9 @@ class Header extends Component {
         <nav className="header__nav container">
           <div className="row">
             <div className="three columns">
-              <div className="header__sitename">ECS Grader</div>
+              <div className="header__sitename">
+                <Link to="/">ECS Grader</Link>
+              </div>
             </div>
             <div className="nine columns" />
           </div>

src/lib/API.js

@@ -0,0 +1,40 @@
+export default class API {
+  constructor() {
+    this.apiBase = 'https://bzwy0j344j.execute-api.us-east-2.amazonaws.com/dev';
+    this.resources = {
+      courses: {
+        list: '/courses',
+        create: '/courses',
+      },
+    };
+    this.answerKeys = {
+      list: this.listAnswerKeys.bind(this),
+      create: this.createAnswerKey.bind(this),
+    };
+  }
+
+  createAnswerKey(payload) {
+    const url = this.apiBase + this.resources.courses.create;
+    const result = fetch(url, {
+      method: 'POST',
+      mode: 'cors',
+      cache: 'no-cache',
+      headers: {'Content-Type': 'application/json; charset=utf-8'},
+      body: JSON.stringify(payload),
+    }).then(res => res.json());
+
+    return result;
+  }
+
+  listAnswerKeys() {
+    const url = this.apiBase + this.resources.courses.list;
+    const result = fetch(url, {
+      method: 'GET',
+      mode: 'cors',
+      cache: 'no-cache',
+      headers: {'Content-Type': 'application/json; charset=utf-8'},
+    }).then(res => res.json());
+
+    return result;
+  }
+}