From b2369704a2b14ee4d7ba075c526caef8532f9238 Mon Sep 17 00:00:00 2001
From: catarak <ctarakajian@gmail.com>
Date: Fri, 1 Jul 2016 11:30:40 -0400
Subject: [PATCH] start sketch list view

---
 client/components/Nav.js                      |  7 +++
 client/constants.js                           |  1 +
 client/modules/Sketch/actions.js              | 20 ++++++++
 client/modules/Sketch/pages/SketchListView.js | 50 +++++++++++++++++++
 client/modules/Sketch/reducers.js             | 12 +++++
 client/reducers.js                            |  4 +-
 client/routes.js                              |  2 +
 server/controllers/project.controller.js      | 15 ++++++
 server/routes/project.routes.js               |  2 +
 9 files changed, 112 insertions(+), 1 deletion(-)
 create mode 100644 client/modules/Sketch/actions.js
 create mode 100644 client/modules/Sketch/pages/SketchListView.js
 create mode 100644 client/modules/Sketch/reducers.js

diff --git a/client/components/Nav.js b/client/components/Nav.js
index 687f4b7a..ddccbc1a 100644
--- a/client/components/Nav.js
+++ b/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">
diff --git a/client/constants.js b/client/constants.js
index 2f5571d5..446a6c34 100644
--- a/client/constants.js
+++ b/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';
diff --git a/client/modules/Sketch/actions.js b/client/modules/Sketch/actions.js
new file mode 100644
index 00000000..ed980d4e
--- /dev/null
+++ b/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
+      }));
+  };
+}
diff --git a/client/modules/Sketch/pages/SketchListView.js b/client/modules/Sketch/pages/SketchListView.js
new file mode 100644
index 00000000..caea9d76
--- /dev/null
+++ b/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);
diff --git a/client/modules/Sketch/reducers.js b/client/modules/Sketch/reducers.js
new file mode 100644
index 00000000..6f0d2e14
--- /dev/null
+++ b/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;
diff --git a/client/reducers.js b/client/reducers.js
index 839e4d75..64305956 100644
--- a/client/reducers.js
+++ b/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;
diff --git a/client/routes.js b/client/routes.js
index 12523a3d..e071eb7f 100644
--- a/client/routes.js
+++ b/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>
   );
 
diff --git a/server/controllers/project.controller.js b/server/controllers/project.controller.js
index 656c884f..5afb8ca2 100644
--- a/server/controllers/project.controller.js
+++ b/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([]);
+  }
+
+}
diff --git a/server/routes/project.routes.js b/server/routes/project.routes.js
index 2a31e632..ee8f4654 100644
--- a/server/routes/project.routes.js
+++ b/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;