switch sketch list to sketch list modal, which you now can close

client/modules/App/components/Overlay.js

@@ -0,0 +1,17 @@
+import React, { PropTypes } from 'react';
+
+function Overlay(props) {
+  return (
+    <div className="overlay">
+      <div className="overlay-content">
+        {props.children}
+      </div>
+    </div>
+  );
+}
+
+Overlay.propTypes = {
+  children: PropTypes.object
+};
+
+export default Overlay;

client/modules/IDE/actions/projects.js

@@ -0,0 +1,25 @@
+import * as ActionTypes from '../../../constants';
+import { browserHistory } from 'react-router';
+import axios from 'axios';
+
+const ROOT_URL = location.href.indexOf('localhost') > 0 ? 'http://localhost:8000/api' : '/api';
+
+export function getProjects() {
+  return (dispatch) => {
+    axios.get(`${ROOT_URL}/projects`, { withCredentials: true })
+      .then(response => {
+        dispatch({
+          type: ActionTypes.SET_PROJECTS,
+          projects: response.data
+        });
+      })
+      .catch(response => dispatch({
+        type: ActionTypes.ERROR,
+        error: response.data
+      }));
+  };
+}
+
+export function closeSketchList() {
+  browserHistory.push('/');
+}

client/modules/IDE/components/SketchList.js

@@ -0,0 +1,68 @@
+import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import moment from 'moment';
+import { Link } from 'react-router';
+import * as SketchActions from '../actions/projects';
+import * as ProjectActions from '../actions/project';
+import InlineSVG from 'react-inlinesvg';
+const exitUrl = require('../../../images/exit.svg');
+
+class SketchList extends React.Component {
+  componentDidMount() {
+    this.props.getProjects();
+  }
+
+  render() {
+    return (
+      <div className="sketch-list">
+        <header className="sketch-list__header">
+          <h2>Sketches</h2>
+          <button className="sketch-list__exit-button" onClick={this.props.closeSketchList}>
+            <InlineSVG src={exitUrl} alt="Close Sketch List Overlay" />
+          </button>
+        </header>
+        <div className="sketches-table-container">
+          <table className="sketches-table" summary="table containing all saved projects">
+            <thead>
+              <tr>
+                <th scope="col">Name</th>
+                <th scope="col">Created</th>
+                <th scope="col">Last Updated</th>
+              </tr>
+            </thead>
+            <tbody>
+              {this.props.sketches.map(sketch =>
+                <tr className="sketches-table__row" key={sketch.id}>
+                  <td scope="row"><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>
+      </div>
+    );
+  }
+}
+
+SketchList.propTypes = {
+  user: PropTypes.object.isRequired,
+  getProjects: PropTypes.func.isRequired,
+  sketches: PropTypes.array.isRequired,
+  closeSketchList: PropTypes.func.isRequired
+};
+
+function mapStateToProps(state) {
+  return {
+    user: state.user,
+    sketches: state.sketches
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators(Object.assign({}, SketchActions, ProjectActions), dispatch);
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(SketchList);

client/modules/IDE/pages/IDEView.js

@@ -16,9 +16,12 @@ import * as EditorAccessibilityActions from '../actions/editorAccessibility';
 import * as PreferencesActions from '../actions/preferences';
 import { getFile, getHTMLFile, getJSFiles, getCSSFiles, setSelectedFile } from '../reducers/files';
 import SplitPane from 'react-split-pane';
+import Overlay from '../../App/components/Overlay';
+import SketchList from '../components/SketchList';
 
 class IDEView extends React.Component {
   constructor(props) {
+    console.log(props);
     super(props);
     this._handleConsolePaneOnDragFinished = this._handleConsolePaneOnDragFinished.bind(this);
     this._handleSidebarPaneOnDragFinished = this._handleSidebarPaneOnDragFinished.bind(this);
@@ -50,6 +53,10 @@ class IDEView extends React.Component {
     if (this.props.ide.sidebarIsExpanded !== nextProps.ide.sidebarIsExpanded) {
       this.sidebarSize = nextProps.ide.sidebarIsExpanded ? 180 : 20;
     }
+
+    if (nextProps.params.project_id && !this.props.params.project_id) {
+      this.props.getProject(nextProps.params.project_id);
+    }
   }
 
   componentDidUpdate(prevProps) {
@@ -227,6 +234,15 @@ class IDEView extends React.Component {
           }
           return '';
         })()}
+        {(() => { // eslint-disable-line
+          if (this.props.location.pathname === '/sketches') {
+            return (
+              <Overlay>
+                <SketchList />
+              </Overlay>
+            );
+          }
+        })()}
       </div>
 
     );
@@ -237,6 +253,9 @@ IDEView.propTypes = {
   params: PropTypes.shape({
     project_id: PropTypes.string
   }),
+  location: PropTypes.shape({
+    pathname: PropTypes.string
+  }),
   getProject: PropTypes.func.isRequired,
   user: PropTypes.shape({
     authenticated: PropTypes.bool.isRequired,

client/modules/IDE/reducers/projects.js

@@ -0,0 +1,12 @@
+import * as ActionTypes from '../../../constants';
+
+const sketches = (state = [], action) => {
+  switch (action.type) {
+    case ActionTypes.SET_PROJECTS:
+      return action.projects;
+    default:
+      return state;
+  }
+};
+
+export default sketches;

client/routes.js

@@ -4,7 +4,7 @@ import App from './modules/App/App';
 import IDEView from './modules/IDE/pages/IDEView';
 import LoginView from './modules/User/pages/LoginView';
 import SignupView from './modules/User/pages/SignupView';
-import SketchListView from './modules/Sketch/pages/SketchListView';
+// import SketchListView from './modules/Sketch/pages/SketchListView';
 import { getUser } from './modules/User/actions';
 
 const checkAuth = (store) => {
@@ -18,7 +18,7 @@ const routes = (store) =>
     <Route path="/login" component={LoginView} />
     <Route path="/signup" component={SignupView} />
     <Route path="/projects/:project_id" component={IDEView} />
-    <Route path="/sketches" component={SketchListView} />
+    <Route path="/sketches" component={IDEView} />
   </Route>
   );
 

client/styles/components/_overlay.scss

@@ -0,0 +1,17 @@
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.overlay-content {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

client/styles/components/_sketch-list.scss

@@ -1,10 +1,25 @@
+.sketch-list__header {
+  display: flex;
+  justify-content: space-between;
+  padding: #{20 / $base-font-size}rem;
+}
+
+.sketches-table-container {
+  flex: 1 0 0%;
+  overflow-y: scroll;
+}
+
 .sketches-table {
   width: 100%;
   padding: #{10 / $base-font-size}rem 0;
-  padding-left: #{170 / $base-font-size}rem;
+  padding-left: #{20 / $base-font-size}rem;
   height: 100%;
 }
 
 .sketches-table__row {
   margin: #{10 / $base-font-size}rem;
+}
+
+.sketch-list__exit-button {
+  @extend %icon;
 }

client/styles/layout/_sketch-list.scss

@@ -1,11 +1,8 @@
 .sketch-list {
+  @extend %modal;
   display: flex;
   flex-wrap: wrap;
-  height: 100%;
   flex-flow: column;
+  width: #{1000 / $base-font-size}rem;
+  height: #{700 / $base-font-size}rem;
 }
-
-.sketches-table-container {
-  flex: 1 0 0%;
-  overflow-y: scroll;
-}

client/styles/main.scss

@@ -20,6 +20,7 @@
 @import 'components/modal';
 @import 'components/console';
 @import 'components/resizer';
+@import 'components/overlay';
 
 @import 'layout/ide';
 @import 'layout/sketch-list';