[WIP] Updating rename functionality

Author: LakshSingla

client/modules/IDE/actions/project.js

@@ -277,3 +277,24 @@ export function hideEditProjectName() {
     type: ActionTypes.HIDE_EDIT_PROJECT_NAME
   };
 }
+
+export function changeProjectName(id, newName) {
+  return (dispatch, getState) => {
+    console.log('here');
+    axios.put(`${ROOT_URL}/projects/${id}`, { name: newName }, { withCredentials: true })
+      .then((response) => {
+        console.log(response);
+        dispatch({
+          type: ActionTypes.SET_PROJECT_NAME,
+          payload: { id, newName }
+        });
+      })
+      .catch((response) => {
+        console.log(response);
+        dispatch({
+          type: ActionTypes.PROJECT_SAVE_FAIL,
+          error: response.data
+        });
+      });
+  };
+}

client/modules/IDE/components/SketchList.jsx

@@ -30,6 +30,12 @@ class SketchList extends React.Component {
     this.restoreRenameBoxContent = this.restoreRenameBoxContent.bind(this);
   }
 
+  componentWillReceiveProps(props) {
+    this.setState({
+      renameBoxContent: props.sketches.map(({ name }) => name)
+    });
+  }
+
   getSketchesTitle() {
     if (this.props.username === this.props.user.username) {
       return 'p5.js Web Editor | My sketches';
@@ -118,6 +124,7 @@ class SketchList extends React.Component {
                         onKeyUp={(e) => {
                           // Enter pressed
                           if (e.key === 'Enter') {
+                            this.props.changeProjectName(sketch.id, this.state.renameBoxContent[i]);
                             this.restoreRenameBoxContent();
                             this.closeAllRenameBoxes();
                           }
@@ -272,6 +279,7 @@ SketchList.propTypes = {
   cloneProject: PropTypes.func.isRequired,
   autosaveProject: PropTypes.func.isRequired,
   exportProjectAsZip: PropTypes.func.isRequired,
+  changeProjectName: PropTypes.func.isRequired
 };
 
 SketchList.defaultProps = {

client/modules/IDE/pages/IDEView.jsx

@@ -427,6 +427,7 @@ class IDEView extends React.Component {
             <Feedback previousPath={this.props.ide.previousPath} />
           </Overlay>
         }
+        aa
         { this.props.ide.shareModalVisible &&
           <Overlay
             title="Share This Sketch"

client/modules/IDE/reducers/projects.js

@@ -7,6 +7,17 @@ const sketches = (state = [], action) => {
     case ActionTypes.DELETE_PROJECT:
       return state.filter(sketch =>
         sketch.id !== action.id);
+    case ActionTypes.SET_PROJECT_NAME: {
+      // let changedSketch = state.find(sketch => sketch.id === action.payload.id);
+      // console.log(changedSketch);
+      // changedSketch
+      return state.map((sketch) => {
+        if (sketch.id === action.payload.id) {
+          return { ...sketch, name: action.payload.newName };
+        }
+        return { ...sketch };
+      });
+    }
     default:
       return state;
   }

server/controllers/project.controller.js

@@ -62,7 +62,8 @@ export function updateProject(req, res) {
           res.json({ success: false });
           return;
         }
-        if (updatedProject.files.length !== req.body.files.length) {
+        console.log(updatedProject);
+        if (req.body.files && updatedProject.files.length !== req.body.files.length) {
           const oldFileIds = updatedProject.files.map(file => file.id);
           const newFileIds = req.body.files.map(file => file.id);
           const staleIds = oldFileIds.filter(id => newFileIds.indexOf(id) === -1);