add author name to sketches

client/modules/IDE/actions/project.js

@@ -8,12 +8,14 @@ export function getProject(id) {
   return (dispatch) => {
     axios.get(`${ROOT_URL}/projects/${id}`, { withCredentials: true })
       .then(response => {
+        console.log(response.data);
         browserHistory.push(`/projects/${id}`);
         dispatch({
           type: ActionTypes.SET_PROJECT,
           project: response.data,
           files: response.data.files,
-          selectedFile: response.data.selectedFile
+          selectedFile: response.data.selectedFile,
+          owner: response.data.user
         });
       })
       .catch(response => dispatch({
@@ -61,6 +63,7 @@ export function saveProject() {
             type: ActionTypes.NEW_PROJECT,
             name: response.data.name,
             id: response.data.id,
+            owner: response.data.user,
             selectedFile: response.data.selectedFile,
             files: response.data.files
           });
@@ -78,11 +81,13 @@ export function createProject() {
   return (dispatch) => {
     axios.post(`${ROOT_URL}/projects`, {}, { withCredentials: true })
       .then(response => {
+        console.log(response.data);
         browserHistory.push(`/projects/${response.data.id}`);
         dispatch({
           type: ActionTypes.NEW_PROJECT,
           name: response.data.name,
           id: response.data.id,
+          owner: response.data.user,
           selectedFile: response.data.selectedFile,
           files: response.data.files
         });

client/modules/IDE/components/Toolbar.js

@@ -40,6 +40,13 @@ function Toolbar(props) {
         >
           {props.projectName}
         </span>
+        {(() => { // eslint-disable-line
+          if (props.owner) {
+            return (
+              <p className="toolbar__project-owner">by <span>{props.owner.username}</span></p>
+            );
+          }
+        })()}
       </div>
       <button className={preferencesButtonClass} onClick={props.openPreferences}>
         <Isvg src={preferencesUrl} alt="Show Preferences" />
@@ -55,7 +62,8 @@ Toolbar.propTypes = {
   stopSketch: PropTypes.func.isRequired,
   setProjectName: PropTypes.func.isRequired,
   projectName: PropTypes.string.isRequired,
-  openPreferences: PropTypes.func.isRequired
+  openPreferences: PropTypes.func.isRequired,
+  owner: PropTypes.string.isRequired
 };
 
 export default Toolbar;

client/modules/IDE/pages/IDEView.js

@@ -39,6 +39,7 @@ class IDEView extends React.Component {
           setProjectName={this.props.setProjectName}
           openPreferences={this.props.openPreferences}
           isPreferencesVisible={this.props.preferences.isVisible}
+          owner={this.props.project.owner}
         />
         <Preferences
           isVisible={this.props.preferences.isVisible}
@@ -108,7 +109,10 @@ IDEView.propTypes = {
   startSketch: PropTypes.func.isRequired,
   stopSketch: PropTypes.func.isRequired,
   project: PropTypes.shape({
-    name: PropTypes.string.isRequired
+    name: PropTypes.string.isRequired,
+    owner: PropTypes.shape({
+      username: PropTypes.string
+    })
   }).isRequired,
   setProjectName: PropTypes.func.isRequired,
   openPreferences: PropTypes.func.isRequired,

client/modules/IDE/reducers/project.js

@@ -7,18 +7,18 @@ const initialState = {
 const project = (state = initialState, action) => {
   switch (action.type) {
     case ActionTypes.SET_PROJECT_NAME:
-      return {
-        name: action.name
-      };
+      return Object.assign({}, { ...state }, { name: action.name });
     case ActionTypes.NEW_PROJECT:
       return {
         id: action.id,
-        name: action.name
+        name: action.name,
+        owner: action.owner
       };
     case ActionTypes.SET_PROJECT:
       return {
         id: action.project.id,
-        name: action.project.name
+        name: action.project.name,
+        owner: action.owner
       };
     default:
       return state;

client/styles/components/_toolbar.scss

@@ -54,3 +54,7 @@
 		color: $light-inactive-text-color;
 	}
 }
+
+.toolbar__project-owner {
+	margin-left: #{5 / $base-font-size}rem;
+}

server/controllers/project.controller.js

@@ -9,7 +9,12 @@ export function createProject(req, res) {
 
   Project.create(projectValues, (err, newProject) => {
     if (err) { return res.json({ success: false }); }
-    return res.json(newProject);
+    Project.populate(newProject,
+      {path: 'user', select: 'username'},
+      (innerErr, newProjectWithUser) => {
+        if (innerErr) { return res.json({ success: false }); }
+        return res.json(newProjectWithUser);
+    });
   });
 }
 
@@ -17,27 +22,31 @@ export function updateProject(req, res) {
   Project.findByIdAndUpdate(req.params.project_id,
     {
       $set: req.body
-    }, (err, updatedProject) => {
+    })
+    .populate('user', 'username')
+    .exec((err, updatedProject) => {
       if (err) { return res.json({ success: false }); }
       return res.json(updatedProject);
     });
 }
 
 export function getProject(req, res) {
-  Project.findById(req.params.project_id, (err, project) => {
-    if (err) {
-      return res.status(404).send({ message: 'Project with that id does not exist' });
-    }
+  Project.findById(req.params.project_id)
+    .populate('user', 'username')
+    .exec((err, project) => {
+      if (err) {
+        return res.status(404).send({ message: 'Project with that id does not exist' });
+      }
 
-    return res.json(project);
-  });
+      return res.json(project);
+    });
 }
 
 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 createdAt updatedAt')
+      .select('name files _id createdAt updatedAt')
       .exec((err, projects) => {
         res.json(projects);
       });