start sketch list view

client/components/Nav.js

@@ -21,6 +21,13 @@ function Nav(props) {
             Save
           </p>
         </li>
+        <li className="nav__item">
+          <p className="nav__open">
+            <Link to="/sketches">
+              Open
+            </Link>
+          </p>
+        </li>
       </ul>
       <ul className="nav__items-right">
         <li className="nav__item">

client/constants.js

@@ -21,6 +21,7 @@ export const PROJECT_SAVE_FAIL = 'PROJECT_SAVE_FAIL';
 export const NEW_PROJECT = 'NEW_PROJECT';
 
 export const SET_PROJECT = 'SET_PROJECT';
+export const SET_PROJECTS = 'SET_PROJECTS';
 
 // eventually, handle errors more specifically and better
 export const ERROR = 'ERROR';

client/modules/Sketch/actions.js

@@ -0,0 +1,20 @@
+import * as ActionTypes from '../../constants';
+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
+      }));
+  };
+}

client/modules/Sketch/pages/SketchListView.js

@@ -0,0 +1,50 @@
+import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import Nav from '../../../components/Nav';
+import * as SketchActions from '../actions';
+import * as ProjectActions from '../../IDE/actions/project';
+
+class SketchListView extends React.Component {
+  componentDidMount() {
+    this.props.getProjects();
+  }
+
+  render() {
+    return (
+      <div className="sketch-list">
+        <Nav
+          user={this.props.user}
+          createProject={this.props.createProject}
+          saveProject={this.props.saveProject}
+        />
+        <ul className="sketch-list__items">
+        {this.props.sketches.map(sketch =>
+          <li>{sketch.name}</li>
+        )}
+        </ul>
+      </div>
+    );
+  }
+}
+
+SketchListView.propTypes = {
+  user: PropTypes.object.isRequired,
+  createProject: PropTypes.func.isRequired,
+  saveProject: PropTypes.func.isRequired,
+  getProjects: PropTypes.func.isRequired,
+  sketches: PropTypes.array.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)(SketchListView);

client/modules/Sketch/reducers.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/reducers.js

@@ -4,6 +4,7 @@ import ide from './modules/IDE/reducers/ide';
 import preferences from './modules/IDE/reducers/preferences';
 import project from './modules/IDE/reducers/project';
 import user from './modules/User/reducers';
+import sketches from './modules/Sketch/reducers';
 import { reducer as form } from 'redux-form';
 
 const rootReducer = combineReducers({
@@ -12,7 +13,8 @@ const rootReducer = combineReducers({
   file,
   preferences,
   user,
-  project
+  project,
+  sketches
 });
 
 export default rootReducer;

client/routes.js

@@ -4,6 +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 { getUser } from './modules/User/actions';
 
 const checkAuth = (store) => {
@@ -17,6 +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>
   );
 

server/controllers/project.controller.js

@@ -54,3 +54,18 @@ export function getProject(req, res) {
     });
   });
 }
+
+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')
+      .exec((err, projects) => {
+        res.json(projects);
+      });
+  } else {
+    // could just move this to client side
+    return res.json([]);
+  }
+
+}

server/routes/project.routes.js

@@ -9,4 +9,6 @@ router.route('/projects/:project_id').put(ProjectController.updateProject);
 
 router.route('/projects/:project_id').get(ProjectController.getProject);
 
+router.route('/projects').get(ProjectController.getProjects);
+
 export default router;