From 6563d9d90b9a2cb0d335860807e31f268fef6242 Mon Sep 17 00:00:00 2001
From: catarak <ctarakajian@gmail.com>
Date: Tue, 5 Jul 2016 16:04:14 -0400
Subject: [PATCH] add sketch list, with links

---
 client/modules/Sketch/pages/SketchListView.js | 23 +++++++++++++++----
 client/styles/base/_base.scss                 |  4 ++++
 client/styles/base/_reset.scss                |  4 ++++
 client/styles/components/_sketch-list.scss    |  9 ++++++++
 client/styles/layout/_sketch-list.scss        |  6 +++++
 client/styles/main.scss                       |  2 ++
 package.json                                  |  1 +
 server/controllers/project.controller.js      |  2 +-
 server/routes/server.routes.js                |  4 ++++
 9 files changed, 49 insertions(+), 6 deletions(-)
 create mode 100644 client/styles/components/_sketch-list.scss
 create mode 100644 client/styles/layout/_sketch-list.scss

diff --git a/client/modules/Sketch/pages/SketchListView.js b/client/modules/Sketch/pages/SketchListView.js
index caea9d76..fec25baf 100644
--- a/client/modules/Sketch/pages/SketchListView.js
+++ b/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>
     );
   }
diff --git a/client/styles/base/_base.scss b/client/styles/base/_base.scss
index 6a66bf88..f11b8d96 100644
--- a/client/styles/base/_base.scss
+++ b/client/styles/base/_base.scss
@@ -45,4 +45,8 @@ h2 {
 
 h3 {
 	font-weight: normal;
+}
+
+thead {
+	text-align: left;
 }
\ No newline at end of file
diff --git a/client/styles/base/_reset.scss b/client/styles/base/_reset.scss
index c36505ce..33cf3b32 100644
--- a/client/styles/base/_reset.scss
+++ b/client/styles/base/_reset.scss
@@ -14,4 +14,8 @@ ul, p {
 
 h2, h3 {
 	margin: 0;
+}
+
+ul {
+  list-style: none;
 }
\ No newline at end of file
diff --git a/client/styles/components/_sketch-list.scss b/client/styles/components/_sketch-list.scss
new file mode 100644
index 00000000..9ef6a786
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/client/styles/layout/_sketch-list.scss b/client/styles/layout/_sketch-list.scss
new file mode 100644
index 00000000..979c48d4
--- /dev/null
+++ b/client/styles/layout/_sketch-list.scss
@@ -0,0 +1,6 @@
+.sketch-list {
+  display: flex;
+  flex-wrap: wrap;
+  height: 100%;
+  flex-flow: column;
+}
\ No newline at end of file
diff --git a/client/styles/main.scss b/client/styles/main.scss
index 1e23ae9d..74e48bc4 100644
--- a/client/styles/main.scss
+++ b/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';
diff --git a/package.json b/package.json
index 168f71b7..53f5d57d 100644
--- a/package.json
+++ b/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",
diff --git a/server/controllers/project.controller.js b/server/controllers/project.controller.js
index 5afb8ca2..bc621ed1 100644
--- a/server/controllers/project.controller.js
+++ b/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);
       });
diff --git a/server/routes/server.routes.js b/server/routes/server.routes.js
index ccff0582..90dda69d 100644
--- a/server/routes/server.routes.js
+++ b/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;