add sketch list, with links

client/modules/Sketch/pages/SketchListView.js

@@ -1,6 +1,8 @@
 import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
+import moment from 'moment';
+import { Link } from 'react-router';
 import Nav from '../../../components/Nav';
 import * as SketchActions from '../actions';
 import * as ProjectActions from '../../IDE/actions/project';
@@ -18,11 +20,22 @@ class SketchListView extends React.Component {
           createProject={this.props.createProject}
           saveProject={this.props.saveProject}
         />
-        <ul className="sketch-list__items">
-        {this.props.sketches.map(sketch =>
-          <li>{sketch.name}</li>
-        )}
-        </ul>
+        <table className="sketches-table">
+          <thead>
+            <th>Name</th>
+            <th>Created</th>
+            <th>Last Updated</th>
+          </thead>
+          <tbody>
+            {this.props.sketches.map(sketch =>
+              <tr className="sketches-table__row">
+                <td><Link to={`/projects/${sketch._id}`}>{sketch.name}</Link></td>
+                <td>{moment(sketch.createdAt).format('MMM D, YYYY')}</td>
+                <td>{moment(sketch.updatedAt).format('MMM D, YYYY')}</td>
+              </tr>
+            )}
+          </tbody>
+        </table>
       </div>
     );
   }

client/styles/base/_base.scss

@@ -46,3 +46,7 @@ h2 {
 h3 {
 	font-weight: normal;
 }
+
+thead {
+	text-align: left;
+}

client/styles/base/_reset.scss

@@ -15,3 +15,7 @@ ul, p {
 h2, h3 {
 	margin: 0;
 }
+
+ul {
+  list-style: none;
+}

client/styles/components/_sketch-list.scss

@@ -0,0 +1,9 @@
+.sketches-table {
+  width: 100%;
+  padding: #{10 / $base-font-size}rem 0;
+  padding-left: #{170 / $base-font-size}rem;
+}
+
+.sketches-table__row {
+  margin: #{10 / $base-font-size}rem;
+}

client/styles/layout/_sketch-list.scss

@@ -0,0 +1,6 @@
+.sketch-list {
+  display: flex;
+  flex-wrap: wrap;
+  height: 100%;
+  flex-flow: column;
+}

client/styles/main.scss

@@ -13,5 +13,7 @@
 @import 'components/preferences';
 @import 'components/signup';
 @import 'components/login';
+@import 'components/sketch-list';
 
 @import 'layout/ide';
+@import 'layout/sketch-list';

package.json

@@ -68,6 +68,7 @@
     "eslint-loader": "^1.3.0",
     "express": "^4.13.4",
     "express-session": "^1.13.0",
+    "moment": "^2.14.1",
     "mongoose": "^4.4.16",
     "passport": "^0.3.2",
     "passport-github": "^1.1.0",

server/controllers/project.controller.js

@@ -59,7 +59,7 @@ export function getProjects(req, res) {
   if (req.user) {
     Project.find({user: req.user._id}) // eslint-disable-line no-underscore-dangle
       .sort('-createdAt')
-      .select('name file _id')
+      .select('name file _id createdAt updatedAt')
       .exec((err, projects) => {
         res.json(projects);
       });

server/routes/server.routes.js

@@ -21,4 +21,8 @@ router.route('/login').get((req, res) => {
   res.sendFile(path.resolve(`${__dirname}/../../index.html`));
 });
 
+router.route('/sketches').get((req, res) => {
+  res.sendFile(path.resolve(`${__dirname}/../../index.html`));
+});
+
 export default router;